@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* 共通*/

body{
	font-family: 'Noto Sans JP', sans-serif;
}

.content-title{
		color: #051B33;
		font-size: 32px;
	line-height: 1.25;
	letter-spacing: 0.05em;
	font-weight: bold;
	margin: auto;
	text-align: center ;
	
	
}


.content-sub-title{
	color: #0073EB;
		font-size: 10px;
	line-height: 1.75;
	letter-spacing: 0.1em;
	font-weight: bold;
	text-align: center ;
	margin-top: 8px;
	margin-bottom: 0px;
}



/* -------------------------------------------- */


.header{
	display: flex;
}

.header-bg {
	display: flex;
	justify-content:space-between;
    width: 100%;
    
	height: 64px;
 	position: fixed;/* 上に固定するために */
	/*background: rgba(255, 255, 255, 1);*/
	z-index: 99;
	letter-spacing: 0.05em;
}


#sp-header{
	transition: all 0.4s ease;
}


#sp-header.active {
     box-shadow: 0 0 10px rgba(0,0,0,0.09);   
	  position: fixed;
    z-index: 998;/*最前面へ*/
  height:64px;
}


.container-1{
	display: flex;
	justify-content:space-between;
	align-items: center;
	box-sizing: border-box;/* paddingとborderを幅と高さに含める */
	width: 100%;/* 横幅は1248max */
	z-index: 2;/* レイヤー */
	background: #fff;
	padding: 0 24px ;
}


#sp-logo{
	
	height:32px;
	
}



/*menu*/
.hmenu{
    
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  cursor: pointer;
    width: 32px;
    height:32px;
}



.hmenu span{
    display: inline-block;
    transition: all .13s;/*アニメーションの設定*/
    position: absolute;
    height: 4px;
    border-radius: 2px;
  background: #0073EB;
    width: 100%;
  }


.hmenu span:nth-of-type(1) {
  top:4px; 
}

.hmenu span:nth-of-type(2) {
  top:14px;
}

.hmenu span:nth-of-type(3) {
  top:24px;
}

/*activeクラスが付与されると線が回転して×に*/

.hmenu.active span:nth-of-type(1) {
    top: 14px;
    left: 0px;
    transform: translateY(0px) rotate(-45deg);
    width: 100%;
}

.hmenu.active span:nth-of-type(2) {
  opacity: 0;/*真ん中の線は透過*/
}

.hmenu.active span:nth-of-type(3){
    top: 13px;
    left: 0px;
    transform: translateY(0px) rotate(45deg);
    width: 100%;
}










/*gnav*/
.gnav{
    background: #fff;
	top:64px;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999;
}
.nav-cta{
	display: flex;
	justify-content: center;
}

.gnav__wrap{
   

	margin-top: 32px;
	margin-bottom: 72px;
	
}
.gnav__menu{
	margin-top: 10px;
	list-style: none;
	padding-left:0px;
}
.gnav__menu__item{
	
	 
	margin: 0px auto 24px;
	text-align: center;
}
.gnav__menu__item a{
    color: #051B33;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
	width: 100%;
}




.nav-demo-button{
	display: flex;
	box-sizing: border-box;
	height: 40px;
	width: 152px;
	font-size: 15px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	user-select: none;/* ユーザーがテキストとして選択できるか */
	color: #fff;
	font-weight: bold;
	background: #0073EB;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	margin-right: 16px;/* 右にだけ隙間 */
	align-items: center;
	
	
}

.nav-demo-post {
		color: inherit;
	display: block;
	width: 100%;
	padding: 13px;
    text-align: center;
    text-decoration: none;
}




.nav-contact-button{
	display: flex;
	box-sizing: border-box;
	height: 40px;
	width: 152px;
	font-size: 15px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	color: #0073EB;
	user-select: none;/* ユーザーがテキストとして選択できるか */
	border: 2px #0073EB solid;
	background: #fff;
	font-weight: bold;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	align-items: center;
}

.nav-contact-post {
		color: inherit;
	display: block;
	width: 100%;
	padding: 13px;
    text-align: center;
    text-decoration: none;
	
}













.container-2{
display: none;
}



#logo{
display: none;
}


.demo-button{
	display: none;
	
	
}

.demo-post {
	display: none;
}

.demo-button:hover {
  display: none;
}

.contact-button{
	display: none;
	
}

.contact-post {
	display: none;
}

.contact-button:hover {
  display: none;
}









/* content */

.content{
	display: flex;
	justify-content: center;
		padding: 0px 24px;
	maax-width: 696px;
	
}

.wrap{
	display: flex;
	flex-direction: column;

}



/* -------------------------------------------- 

index.html

-------------------------------------------- */

.top-bg{
	margin: 128px auto 0px;
    min-height: 344px;
	width: 100%;
	letter-spacing: 0.05em;
	z-index: 60;
	
}



.top-title{
		color: #051B33;
		font-size: 40px;
	line-height: 1.25;
	font-weight: bold;
	margin: 0 0 0px;
}

.top-title-blue{
	color: #0073EB;
	}

.top-text{
	color: #051B33;
		font-size: 14px;
	line-height: 1.75;
	font-weight: bold;
	max-width: 290px;
	margin: 24 0 24px;
}
.top-text br { 
	display: none;
}


.top-button{
	display: flex;
	justify-content:center;
}


.top-demo-button{
	display: flex;
	box-sizing: border-box;
	height: 40px;
	width: 100%;
	font-size: 14px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	user-select: none;/* ユーザーがテキストとして選択できるか */
	color: #fff;
	font-weight: bold;
	background: #0073EB;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	transition: all .3s;
	margin-right: 4px;
	margin-left: 0px;
	align-items: center;	
	
}

.top-demo-post {
		color: inherit;
	display: block;
	width: 100%;
	padding: 20px;
    text-align: center;
    text-decoration: none;
}



.top-contact-button{
	display: flex;
	box-sizing: border-box;
	height: 40px;
	width: 100%;
	font-size: 14px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	color: #0073EB;
	user-select: none;/* ユーザーがテキストとして選択できるか */
	border: 2px #0073EB solid;
	background: #fff;
	font-weight: bold;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	transition: all .3s;
	margin-right: 0px;
	margin-left: 4px;
	align-items: center;	
}

.top-contact-post {
		color: inherit;
	display: block;
	width: 100%;
	padding: 20px;
    text-align: center;
    text-decoration: none;
	
}




.sasato-mac-sp{
	margin-top:  40px;
	max-height: 344px;
	width: 100%;
}

.sasato-mac{
	display: none;
}


/* -------------------------------------------- */



.problem-bg{
    
	display: flex;
	justify-content:center;
	margin-top: -29%;
    width: 100%;
	z-index: 1;
	letter-spacing: 0.05em;
}

.problem-bg::before {
  content: '';
  position: absolute;
  left:0;
  z-index: -2;
  width: 100%;
  height: 1280px;
  background: #F2F8FF;
  transform: skewY(-10deg);
  transform-origin: top;
	
}

.problem-title{
	margin-top: calc(18% + 80px);
	    width: 100%;
	
}

.problem-content{
	display: flex;
	flex-direction:column-reverse;
	justify-content: center;
	margin-top:0px;
	margin: 0px;
	
}

.problem-img{
	width: 312px;
	margin: auto;
}

.problem-list ul {
  list-style-type:none;
	min-width: 312px;
	margin: 32px 0px 24px 0px;
	padding-left: 0px;
}

.problem-list ul li{
	color: #051B33;
	background: #fff;
  position:relative;
  margin-bottom: 8px;
  padding-left:26px;
  padding-right:0px;
  font-weight: bold;
  font-size:14px;
  line-height: 32px;
  border-radius:8px;
}

.problem-list ul li:before{
  font-family: "Font Awesome 5 Free";
	content: '\f058';
  position: absolute;
  left : 0.5em; 
  color: #0073EB; 
	
}

/* -----------------------2857--------------------- */



.feature-bg{

display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 56px;
    width: 100%;
	z-index: 2;
	letter-spacing: 0.05em;
	
	height: 2857px;
}

.feature-bg::before {
  content: '';
  position: absolute;
  left:0;
  margin-top:11%;
  z-index: -2;
  width: 100%;
  height:2800px;
  background: #CCE8FF;
  transform: skewY(-10deg);
  transform-origin: top;
}


.baloon-bg{
	margin: auto;
}


.balloon {
	margin: auto;
  position: relative;
  display: inline-block; 
  display: flex;
  justify-content: center;
	align-items: center;
  margin-bottom:56px;
  	height: 136px;
	width: 232px;
  color: #fff;
  font-size: 24px;
  font-weight:bold;
  background: #03426D;
  border-radius:8px;
  letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
}

.balloon:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-bottom: 15px solid #03426D;
}



.feature-container{
	display: grid;
	justify-content: center;
	grid-template-columns: 312px;
	gap: 24px;
	grid-template-rows: 400px 400px 424px 400px 400px 424px ;
	width:100%;
	margin-top: 32px;
	
	
}


.feature-item{
	background: #fff;
	padding: 24px;
	box-shadow: 6px 6px 24px rgba(0, 100, 230, 0.1);
	border-radius:16px;
	
}





.box{
	opacity: 0;
}


.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}


@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.feature-title{
	text-align: center ;
	margin:0 0 16px 0;
	font-size: 24px;
	line-height: 1.25;
	font-weight: bold;
	color: #0073EB;
}

.feature-img{
	height: 160px;
	margin:0 0 16px 0;
	
}

.feature-text{
	text-align: justify;
	text-justify: inter-ideograph;
		font-size: 14px;
	line-height: 1.75;
	font-weight: medium;
	color: #37495C;
	margin:0;

}


/* -------------------------------------------- */





.step-bg{
display: flex;
	flex-direction: column;
	justify-content:center;
	margin-top: 80px;
    width: 100%;
	z-index: 3;
	letter-spacing: 0.05em;
	margin-bottom:0px;
}



.step-text{
	margin: 32px 0 32px;
	font-size: 14px;
	font-weight: medium;
	text-align: center ;
	color: #37495C;
	line-height: 1.75;
}




.step-container li {
  list-style-type: none;
}



.step-container {
  text-align: center ;
  display: flex;
	flex-direction: column;
	justify-content: center;
    justify-content: space-between;
	padding-left: 0px;
	margin: auto;
}



.step-container > li .step-box {
	
  background:#F2F8FF;
  position: relative;
	height: 208px;
	width: 208px;
	border-radius: 50%;
	margin: 0px auto 128px;
	
}


.step-container > li:not(:last-child) .step-box::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  border-top: 4px solid #A1A1A1;
  border-right: 4px solid #A1A1A1;
  position: absolute;
  
  top: 135%;
  transform: rotate(135deg);
	left: calc(50% - 10px);
}



.step-count-img{
	height: 32px;
	margin-top: -8px;
	margin-bottom: 28px;
}

.step-img{
	height: 104px;
	margin-bottom: 48px;
}

.step-box p {
		font-size: 24px;
	font-weight: bold;
	color: #051B33;
	
}


/* -------------------------------------------- 

function.html  

-------------------------------------------- */


.function-bg{
	margin-top: 128px;
    max-width: 536px;
	z-index: 2;
	letter-spacing: 0.05em;

	
}



.function-container{
	margin-top: 56px;
	
}





.function-item{
	display: flex;
	justify-content: center;

}

.function-item:nth-of-type(odd){
	  margin: 0 calc(50% - 50vw);
  width: 100vw;
	background: #F9F9FA;
}

.function-item:nth-of-type(even){
	  margin: 0 calc(50% - 50vw);
  width: 100vw;
	background: #fff;
}






.function-wrap{
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	width: 100%;
	/*background: red;*/
	
	padding: 56px 24px 54px 24px;
}





.img-box{
}

.function-img{
	margin-top:24px;
		width: 100%;
	max-width: 536px;
}




.function-content{
		width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	/*background: #1a1a1a;*/
	
}





.function-heading{
	text-align: center ;
	margin: 26px 0px 0px 0px;
  position: relative;
	font-size: 24px;
	font-weight: bold;
	color: #051B33;
}

.function-heading:before {
left: calc(50% - 30px);
  position: absolute;
  top:  -26px;
  width: 60px;
  height: 6px;
  content: '';
  border-radius: 3px;
  background: #0073EB;
	
}


.function-text{
		text-align: justify;
	text-justify: inter-ideograph;
		font-size: 14px;
	line-height: 1.75;
	font-weight: medium;
	color: #37495C;
	margin:16px auto 0px;
	letter-spacing: 0.075em;
	max-width: 536px;
}



/* -------------------------------------------- 

flow.html
background:red;
-------------------------------------------- */


.flow-bg{
	margin-top: 128px;
    min-width: 264px;
    height: 100%;
	z-index: 2;
	letter-spacing: 0.05em;
	
	margin-bottom:56px;
}

.flow-container{
	display: flex;
	flex-direction: column;
	min-width: 264px;
	gap:32px 0px;
	margin-top: 56px;
}



.flow-item{
	height:auto;
	min-width: 264px;
	/*background:#a1a1a1;*/
	background:#fff;
	box-shadow: 6px 6px 24px rgba(0, 100, 230, 0.1);
	border-radius:16px;
	padding: 24px;

}


.flow-wrap{
	height: 100%;
	width: 100%;
}



.flow-imgbox{
	display: flex;
	justify-content: center;
		height: 48px;
	width: 100%;
}

.flow-img{
	margin-bottom:24px;
	height: 48px;
}

.flow-content{
	display: flex;
	justify-content: center;
	flex-direction: column;
	
}

.flow-heading{
	text-align: center;
  position: relative;
	font-size: 24px;
	font-weight: bold;
	color: #051B33;
	margin-top:16px;
	margin-bottom:16px;
}






.flow-text{
		text-align: justify;
	text-justify: inter-ideograph;
		font-size: 14px;
	line-height: 1.75;
	font-weight: medium;
	color: #37495C;
	margin-top:0px;
	margin-bottom:0px;
	letter-spacing: 0.075em;
}

.flow-text br{
	display: none;
}


/* -------------------------------------------- 

faq.html

-------------------------------------------- */


.faq-bg{
	margin-top: 128px;
    width: 100%;
	z-index: 2;
	letter-spacing: 0.05em;
	
}




.tab{
margin:56px 0px 0px;
  display: flex;
  justify-content: center;
  list-style:none;
	padding-left:0;
	
}
.tab li a{
margin:0px 16px;
  display: flex;
  justify-content: center;
 color: #37495C;
	font-weight: bold;
  text-decoration: none;
	font-size: 12px;
	margin-left: 0px;
	width: 100%;
	
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  position: relative;;
	color: #0073EB;
}

.tab li.active a:before{
    position: absolute;
  bottom:  -12px;
  width: 85%;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #0073EB;
	
}









/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  padding:56px 0px 0px 0px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
	
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/*========= レイアウトのためのCSS ===============*/




.faq-container{
		width: 100vw;
	margin: 0px calc(50% - 50vw);
	padding:0px 0px  56px 0px;
	background:#CCE8FF;
	
}

.wrapper{
	display: flex;
	flex-direction: column;
	min-width: 312px;
  margin:56px auto 0px;
}











.faq-wrap{
	display: flex;
	flex-direction: column;
	background: #fff;
	margin: 8px 24px 0 24px ;
	padding: 24px;
	
	min-width: 216px;
}




.faq-contents{
	display: flex;
}

.faq-item{
	display: flex;
}


.question-img{
	height: 24px;
	margin:0px 16px 0px 0px;
}

.anser-img{
	height: 24px;
	margin:24px 16px 0px 0px;
}







.faq-heading{
	margin:0px;
	font-size: 16px;
	font-weight: bold;
	color: #051B33;
}



.faq-text{
	margin:24px 0px 0px 0px;
	align-items:flex-start;
		text-align: justify;
	text-justify: inter-ideograph;
		font-size: 14px;
	line-height: 1.75;
	font-weight: medium;
	color: #37495C;
	letter-spacing: 0.075em;
	
}


/* -------------------------------------------- 

demo.php　contact.php

-------------------------------------------- */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


.demo-bg{
	margin-top: 128px;
	width: 100%;
	 height: 100%;
	z-index: 2;
	letter-spacing: 0.05em;
	margin-bottom:0px;
}




.form-container-bg{
	display:flex;
		justify-content: center;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-top: 112px;
	top:10px;
	padding:0px 0px  96px 0px;
	background:#CCE8FF;
	
	
}
	


.form-container{
	display: flex;
	width: 928px;
	flex-direction: column;
	justify-content: center;
	margin: -56px 24px 0px;
	background: #fff;
	box-shadow: 6px 6px 24px rgba(0, 100, 230, 0.1);
	border-radius:16px;
	
}




.alert{
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:8px;
	height:72px;
	margin: 24px 24px 0px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.alert-danger{
	background: #d2202f;
}

.alert-success{
	background:#0ace5c;
}


.demo-item{
	margin: 24px 24px 24px;
	/*background:#a1a1a1;*/
}




.mb-3-container{
		display: flex;
	flex-direction: column;
	gap: 24px;
	
}






.form-name{
	margin: -6px 0px ;
			color: #051B33;
		font-size: 18px;
	letter-spacing: 0.05em;
	font-weight: bold;
}


.text-mast::after {
  content: "必須";
  background-color: #0073EB;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 10px;
  padding: 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
}


.form-control{
	margin: 16px 0px 0px 0px;
	height:48px;
	background: #F9F9FA;
	border-radius: 8px;

    padding: 0px 8px;
    border: none;
    box-shadow: 0 0 0 1px #A1A1A1 inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
	width: 96.5%;
}


.form-control:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(0, 115, 235) inset;
}


.mb-4{/* selectボックスの親要素 */
	position:relative;
}

.select-form-control{
	position: relative;
	margin: 16px 0px 0px 0px;
	height:48px;
	width: 100%;
	background: #F9F9FA;
	border-radius: 8px;

    padding: 0px 8px;
    
    border: none;
    box-shadow: 0 0 0 1px #A1A1A1 inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


.select-form-control:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(0, 115, 235) inset;
}



.mb-4{
	position: relative;
}


.mb-4:after {
	margin: 22px 8px;
  content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-top: 1.5px solid #A1A1A1;
    border-left: 1.5px solid #A1A1A1;
    transform: translateY(-50%) rotate(-135deg);
  pointer-events: none;
}







.form-textarea{
	height:100%;
	width: 96.5%;
	display:block;
	border-radius: 0px;	
	margin-bottom: 26px;
	padding: 16px 8px;
	line-height: 1.5;
}



.form-text{
	margin:0px;
	width: 100%;
				color: #051B33;
		font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
	font-weight: bold;
}




.d-grid{
	display:flex;
	margin: 26px 0px 0px;
}




.btn{
	height: 56px;
	width: 100%;
	font-size: 20px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	user-select: none;/* ユーザーがテキストとして選択できるか */
	color: #fff;
	font-weight: bold;
	background: #0073EB;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	transition: all .3s;
	letter-spacing: 0.125em;
	border:none;
	text-align: center;
	margin: 0px auto;
}



.btn:hover {
  box-shadow: 6px 6px 16px rgba(0, 100, 230, 0.3);
  border-color: transparent;
}


/* -------------------------------------------- 

privacy.html

-------------------------------------------- */



.privacy-container-bg{
	display:flex;
		justify-content: center;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-top: 112px;
	top:10px;
	padding:0px 0px  96px 0px;
	background:#CCE8FF;
}
	


.privacy-container{
	display: flex;
	width: 928px;
	flex-direction: column;
	justify-content: center;
	margin: -56px 24px 0px;
	background: #fff;
	box-shadow: 6px 6px 24px rgba(0, 100, 230, 0.1);
	border-radius:16px;
}


.privacy-textarea{
	margin:24px;
}


.privacy-title{
			color: #051B33;
		font-size: 24px;
	line-height: 1.25;
	letter-spacing: 0.05em;
	font-weight: bold;
	margin: auto;
	margin-bottom: 24px;
	text-align: center ;
	
	
}

.privacy-subtitle{
				color: #051B33;
		font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin: auto;
	margin-bottom: 8px;
}


.privacy-text-1{
			color: #051B33;
		font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin: auto;
	margin-bottom: 24px;
}


.privacy-text-2{
			color: #051B33;
		font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin: auto;
}






/* -------------------------------------------- 

cta and footer

-------------------------------------------- */

.cta-bg{
	display: flex;
	justify-content:center;
	margin-top: 0px;
    width: 100%;
    height: 100%;
	z-index: 3;
	letter-spacing: 0.05em;
	background-image: url("../images/cta.png");
	background-repeat: no-repeat;
	background-position: 20% 11%;
	background-size:  auto 180%;
}



.cta-content{
	z-index: 4;
		display: flex;
	justify-content: center;
	flex-direction: column;
}


.cta-title{
			color: #fff;
		font-size: 32px;
	line-height: 1.25;
	letter-spacing: 0.125em;
	font-weight: bold;
	margin: 56px auto 32px;
	text-align: center ;
}

.cta-container{
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 24px 0px;
	margin-bottom: 64px;
}


.cta-box{
	background: #fff;
	display: flex;
	flex-direction: column;
	text-align: center ;
	height: 100%;
	width:312px; 
	border-radius:16px;
	box-shadow: 3px 3px 8px rgba(3, 66, 109, 0.15);
}

.cta-box-sp{
		background: #fff;
	display: flex;
	flex-direction: column;
	text-align: center ;
	height: 100%;
	width:312px; 
	border-radius:16px;
	box-shadow: 3px 3px 8px rgba(3, 66, 109, 0.15);
}

.cta-text{
	margin: 24px auto 16px;
	display: flex;
	justify-content: center;
	color: #37495C;
	font-size:14px;
	font-weight: bold;
	line-height: 1.5;
	
}

.br-pc{
	display: none;
}

.cta-demo-button{
	display: flex;
	box-sizing: border-box;
	height: 48px;
	width: 264px;
	font-size: 20px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	user-select: none;/* ユーザーがテキストとして選択できるか */
	color: #fff;
	font-weight: bold;
	background: #03426D;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	margin: 0px auto 24px;
	transition: all .3s;
	letter-spacing: 0.125em;
	text-align: center ;
	
}

.cta-demo-post {
	margin-top:11px;	
		color: inherit;
	display: block;
	width: 100%;
    text-align: center;
    text-decoration: none;
}





.cta-contact-button{
	display: flex;
	box-sizing: border-box;
	height: 48px;
	width: 264px;
	font-size: 20px;
	cursor: pointer;/* カーソルを上に乗せるとポインターに */
	user-select: none;/* ユーザーがテキストとして選択できるか */
	color: #fff;
	font-weight: bold;
	background: #03426D;
	border-radius: 100vh;/* ビューポートの高さに対する割合 */
	margin: 0px auto 24px;
	transition: all .3s;
	letter-spacing: 0.125em;
	text-align: center ;
	
}

.cta-contact-post {
	margin-top:11px;
		color: inherit;
	display: block;
	width: 100%;
    text-align: center;
    text-decoration: none;
}



/* -------------------------------------------- */


.footer-bg{
    height: 100%;
	/*background:#C8C9CA;*/
	z-index: 1;
		min-width: 264px;
	padding: 0px 24px;
}

.container-footer{
	box-sizing: border-box;/* paddingとborderを幅と高さに含める */
	height: 100%;
	width: 100%;/* 横幅は1120max */
	z-index: 2;/* レイヤー */
	/* background: #EEEEEF; */
}

.footer-nav{
}

.footer-menu{
	list-style: none;
	padding-left:0;
	margin: 0px;
	}

.footer-menu li{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 24px;


}
.footer-menu li a{
	text-decoration: none ;
	color: #051B33;
	letter-spacing: 0.05em;
}

.footer-logo{
	margin-top: 48px;
	margin-bottom: 32px;
	height:48px;
}





.footer-copy{
	display: flex;
	color: #051B33;
	align-items: center;
	flex-basis: 264px;
	margin: 0px;
	letter-spacing: 0.03em;
	gap: 0px 16px;
}

.copy{
	margin: 0px 0px 48px 0px;
	font-size: 11px;
	color: #051B33;
	font-weight: 400;
	text-decoration: none ;
}