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

/* 共通*/

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

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


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



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


#g-nav{
	display: none;
}
#sp-header{
	display: none;
}
.gnav{
	display: none;
}

.header{
		display: flex;
	
}

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



#header{
	transition: all 0.4s ease;
}


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






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

.logo{

}

#logo{
	
	height:46px;
 transition: all 0.4s ease;
	display: block; 
}

#logo.minilogo{
  height:40px;
}



.container-2{
	display: flex;
	align-items: center;
	
}



.menu{
	display: flex;
	list-style: none;

}

.menu li{
	margin: 0.6em 32px 0.6em 0px;
	font-size: 16px;
	font-weight: bold;


}

.menu li a{
	position: relative;
	text-decoration: none ;
	color: #051B33;
	
}







.menu li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -40%;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 3.25px;
    background:#0073EB;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.menu li.current a::after,
.menu li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}





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

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

.demo-button:hover {
  box-shadow: 5px 5px 15px rgba(0, 100, 230, 0.3);
  border-color: transparent;
}





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

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

.contact-button:hover {
  box-shadow: 5px 5px 15px rgba(0, 100, 230, 0.3);
}









/* content */

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

.wrap{
	/*background:#D3E1F1;*/
	display: flex;
	flex-direction: column;
	max-width: 1120px;
}



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

index.html

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

.top-bg{
	display: flex; 
	justify-content:space-between;
	margin-top: 248px;
    height: 344px;
	letter-spacing: 0.05em;
	/*background:#f8f8f8;*/
	z-index: 2;
	
}



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

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

.top-text{
	color: #051B33;
		font-size: 16px;
	line-height: 1.75;
	font-weight: bold;
	margin: 0 0 24px;
}



.top-button{
	display: flex;
}

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

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

.top-demo-button:hover {
  box-shadow: 5px 5px 15px rgba(0, 100, 230, 0.3);
  border-color: transparent;
}




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

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

.top-contact-button:hover {
  box-shadow: 5px 5px 15px rgba(0, 100, 230, 0.3);
}



.sasato-mac{
	height: 344px;
	filter: drop-shadow(16px 24px 16px rgba(0, 100, 230, 0.15));
}


.sasato-mac-sp{
	display: none;
}


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



.problem-bg{
    
	display: flex;
	justify-content:center;
	margin-top: 176px;
    width: 100%;
    height: 416px;
	z-index: 1;
	letter-spacing: 0.05em;
	/*background: #F2F8FF;*/
}

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

.problem-title p br{
	display: none;
}

.problem-content{
	display: flex;
	margin-top:48px;
}

.problem-img{
	height: 184px;
}

.problem-list ul {
  list-style-type:none;
	margin: 0 0 0 40px;
	padding-left: 0px;
}

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

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

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



.feature-bg{
    

	margin-top: 96px;
    width: 100%;
    height: 1112px;
	z-index: 2;
	letter-spacing: 0.05em;
	/*background: #CCE8FF;*/
	
}

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


.baloon-bg{
	display: flex;
	justify-content:center;
}


.balloon {
  position: relative;
  display: inline-block; 
  display: flex;
  margin-top: -96px;
  margin-bottom:96px;
  height: 56px;
  color: #fff;
  font-size: 28px;
  font-weight:bold;
  background: #03426D;
  border-radius:8px;
  letter-spacing: 0.1em;
}

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

.balloon p {
	margin: auto 16px;
}

.balloon p br{
	display: none;
}
.feature-container{
	margin-top: 48px;
	display: grid;
	grid-template-columns: 352px 352px 352px;
	gap: 32px;
	grid-template-rows: 440px 440px ;
	width:100%;
	
}

.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 24px 0;
	font-size: 28px;
	line-height: 1.25;
	font-weight: bold;
	color: #0073EB;
}

.feature-img{
	height: 192px;
	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: 192px;
    width: 100%;
    height: 520px;
	/*background:#DBDCDC;*/
	z-index: 3;
	letter-spacing: 0.05em;
	margin-bottom:192px;
}



.step-text{
	margin: 48px 0 48px;
	font-size: 18px;
	font-weight: medium;
	text-align: center ;
	color: #37495C;
}

.step-text br{
	display: none;
}


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

.step-container {
	 padding: 0;
  text-align: center ;
  display: flex;
  justify-content: space-between;
	
	
}



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


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



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

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

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


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

function.html

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


.function-bg{
	margin-top: 264px;
    width: 100%;
    height: 4056px;
	z-index: 2;
	letter-spacing: 0.05em;
	
}



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

.function-item{
	display: flex;
	justify-content: center;
	height: 424px;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}

.function-item:nth-of-type(odd){
	background: #F9F9FA;
	
}

.function-item:nth-of-type(even){
	background: #fff;
}


.function-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 1120px;
	/*background: red;*/
}



.function-img{
	width: 536px;
	height: 232px;
}

.function-content{
		width: 536px;
	height: 232px;
	/*background: #1a1a1a;*/
}

.function-heading{
	margin: 42px 0px 0px 0px;
  position: relative;
	font-size: 28px;
	font-weight: bold;
	color: #051B33;
}

.function-heading:before {
  position: absolute;
  top:  -42px;
  width: 60px;
  height: 6px;
  content: '';
  border-radius: 3px;
  background: #0073EB;
	
}


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



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

flow.html

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


.flow-bg{
	margin-top: 264px;
    width: 100%;
    height: 100%;
	z-index: 2;
	letter-spacing: 0.05em;
	/*background:red;*/
	margin-bottom:96px;
}


.flow-container{
	margin-top: 96px;
		display: flex;
	flex-direction: column;
	gap:48px 0px;
}



.flow-item{
	height:224px;

	/*background:#a1a1a1;*/
		box-shadow: 6px 6px 24px rgba(0, 100, 230, 0.1);
	border-radius:16px;
}


.flow-wrap{
	display: flex;
	justify-content:space-between;
	align-items: center;
	height: 100%;
	width: 1120px;
	/*background: red;*/
}



.flow-img{
	height: 64px;
	margin-left: 48px;
}

.flow-content{
		width: 888px;
	height: 232px;
	/*background: #1a1a1a;*/
	margin-right: 48px;
}

.flow-heading{
	margin: 48px 0px 0px 0px;
  position: relative;
	font-size: 28px;
	font-weight: bold;
	color: #051B33;
}






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




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

faq.html

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


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




.tab{
margin:96px 0px 0px 0px;
  display: flex;
  justify-content: center;
  list-style:none;
	padding-left:0;
}
.tab li a{
margin:0px 24px;

 color: #37495C;
	font-weight: bold;
  text-decoration: none;
	font-size: 16px;
	
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  position: relative;;
	color: #0073EB;
}

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









/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  padding:58px 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: 0 calc(50% - 50vw);
	padding:0px 0px  96px 0px;
	background:#CCE8FF;
}

.wrapper{
	display: flex;
	flex-direction: column;
	max-width: 1120px;
  margin:96px auto 0px;
	
}

.faq-wrap{
	display: flex;
	
	flex-direction: column;	
	max-width: 1120px;
	background: #fff;
	margin: 8px 0 0 0 ;
	padding: 48px;
	
}




.faq-contents{
	display: flex;
}

.faq-item{
	display: flex;
}



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

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







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



.faq-text{
	margin:32px 0px 0px 0px;
	align-items:flex-start;
		text-align: justify;
	text-justify: inter-ideograph;
		font-size: 16px;
	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: 264px;
width: 100%;
	 height: 100%;
	z-index: 2;
	letter-spacing: 0.05em;
	margin-bottom:0px;
	
}




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


.form-container{
	display: flex;
	flex-direction: column;
	width: 928px;
	margin: -96px auto 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: 96px 96px -54px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-size: 15px;
}

.alert-danger{
	background: #d2202f;
}

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


.demo-item{
	margin: 96px 96px 96px;
	/*background:#a1a1a1;*/
	width: 736px;
}




.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;
	min-width:720px;
	max-width:720px;
	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;
}


.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;
	min-width:736px;
	max-width:736px;
	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%;
	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: 368px;
	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;
			width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-top: 192px;
	top:110px;
	padding:0px 0px  96px 0px;
	background:#CCE8FF;
}
	


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


.privacy-textarea{
	margin:96px;
}


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

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


.privacy-text-1{
			color: #051B33;
		font-size: 16px;
	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: 504px;
	z-index: 3;
	letter-spacing: 0.05em;
	background-image: url("../images/cta.png");
	background-repeat: no-repeat;
	background-position: 50% 14%;
	background-size:  100%;
}



.cta-content{
	z-index: 4;
	width: 928px;
}


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

.cta-title br{
	display: none;
}



.cta-container{
	display: flex;
	justify-content: space-between;
	
}


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


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


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

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

.cta-demo-button:hover {
  box-shadow: 6px 6px 16px rgba(12, 68,128, 0.4);
  border-color: transparent;
}



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

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

.cta-contact-button:hover {
  box-shadow: 6px 6px 16px rgba(12, 68,128, 0.4);
  border-color: transparent;
}



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


.footer-bg{
	display: flex;
	justify-content:center;
    width: 100%;
    height: 160px;
	 /*background:#C8C9CA;*/
	z-index: 1;
	
}

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

.footer-nav{
		display: flex;
	justify-content:space-between;
	align-items: center;
}

.footer-menu{
	display: flex;
	list-style: none;
	padding-left:0;
	margin-left: 48px;
}
.footer-menu li{
	margin-right: 32px;/* 右にだけ隙間 */
	font-size: 16px;
	font-weight: bold;


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

.footer-logo{
	height:48px;
}





.footer-copy{
	display: flex;
	color: #051B33;
	justify-content:space-between;
	align-items: center;
	flex-basis: 264px;
	
	letter-spacing: 0.03em;
}

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