@charset "UTF-8";

/* --------------------------------------------------
    共通

AI用のCSS:ailp-xxx
-------------------------------------------------- */
main#ailp p {
	line-height: 2;
}
/*レイアウト*/
.ailp-section1{
	background-color:#e2efff;
}
#ailp-fview-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;        /* 常にコンテナ幅に合わせる */
  height: auto;       /* アスペクト比維持 */
  max-width: none;    /* はみ出し防止 */
  opacity: 0.35;      /* 背景らしく薄く */
  z-index: 1;
}
#ailp-txt-catch{
	font-size: 3rem;
	line-height: 1.2 !important;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	margin-top:60px;
	margin-bottom:60px;
  -webkit-text-stroke: 4px #FFFFFF;
  paint-order: stroke fill;
}
#ailp-txt-sub{
	font-size: 1.2rem;
	line-height: 1.6 !important;
	margin-bottom:30px;
}
#ailp-fview-inner{
  position: relative;
  z-index: 2;         /* 画像の上に表示 */
  padding: 60px 5%;   /* 上下左右に余白 */
  margin: 0 auto;
  max-width: 900px;   /* テキスト幅制限（任意） */
  height: auto;       /* 高さ固定を解除 */
}
.ailp-section1 {
  position: relative;
  background-color: #e2efff;
  overflow: hidden;
}
.ailp-section2{
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("./img/ailp-bg-technology.png");
	padding: 15px 30px;
	color: #ffffff;
}
.ailp-section3,
.ailp-section6,
.ailp-section7{
	position: relative;
}
.ailp-section3{
	background-color:#f2f2f2 ;

}
.ailp-section4 .border-bottom-blue{
	border-bottom: 3px solid #0080CC;
}
.ailp-section6{
	background-color: #ffffff;
}
.ailp-section7{
	background-color:#E2F4FF;
	padding: 180px 0 30px;
}
.ailp-section9{
	background-color:#337AB7;
}
.ailp-section9 dt{
	padding: 1em;
	background-color: #E2F4FF;
}
.ailp-section9 dd{
	padding: 1em 1em 1em 3em;
	margin-left: 0;
	background-color:#ffffff;
}
.ailp-section9 dd::before{
    content: "A：";
	position: absolute;
    left: 2em;
}
.ailp-section10{
	background-color:#E2F4FF;
}


/*文字*/
.ailp-text-yellow{ color: yellow;}

/*ボタン*/
.ailp-btn-cta{
	background-color:#0080CC;
	margin: 15px;
	padding: 14px 30px;
	border-radius: 50px;
	color:#ffffff;
	font-size: 1.4em;
	box-shadow: 2px 2px 4px gray;
}
.ailp-btn-cta:hover{
	color:#ffffff;
}

.to-pagetop-sub{
	/*bottom: 340px;*/
    bottom: 20px;
}
.gotop-sub{
	/*bottom: -330px;*/
    bottom: -10px;
}

/*矢印背景*/
.ailp-section3::after {
    content: "";
    position: absolute;
    bottom: -53px;
    height: 54px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0); 
    background-color: #f2f2f2;
}
.ailp-section7::before {
    content: "";
    position: absolute;
    top: 0px; 
    height: 54px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0); 
    background-color: #ffffff;
}
.ailp-section7::after {
    content: "";
    position: absolute;
    bottom: -53px;
    height: 54px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0); 
    background-color: #E2F4FF;
}



/* デバイス対応 */
@media screen and (min-width: 1025px) {
  #ailp-fview-img {
	position:absolute;
	top:0;
	left:-6%;
	overflow: hidden;
	width:auto;
	height: 100%;
	max-height: 610px;
	opacity: 1;
  }

  #ailp-fview-inner {
	position:relative;
	height:500px;
	margin-top: 30px;
	margin-left:30%;
	z-index: 2;
	padding: 0;
  }
  #ailp-txt-sub{
	margin-left: 120px;
}
}
@media screen and (min-width: 1024px) {
	.ps-br{
	    display: block;
	  }
	.sp-br{
	    display: none;
	  }
}

@media screen and (max-width: 1024px) {
	#ailp-fview-img{
		left:-20%;
		opacity: 0.5;
	}
	#ailp-fview-inner{
		margin-left:0;
		/*height:400px;*/
	}
	#ailp-txt-catch{
		font-size: 2.4rem;
		margin-top:30px;
		margin-bottom:30px;
	}
	#ailp-fview-img {
		left: 0;
		opacity: 0.3;
  }
	#ailp-fview-inner {
		height: auto;
		margin-left: 0;
		padding: 50px 5%;
  }
}
@media screen and (max-width: 575px) {
	.ps-br{
	  display: none;
	}
	.sp-br{
	  display: block;
	}
	#ailp-img1, #ailp-img4 {
	  max-width:50%;
	  margin-bottom:20px;
	}
	#ailp-txt-catch{
		font-size: 2rem;
		margin-top:20px;
		margin-bottom:20px;
	}
	#ailp-txt-sub{
		font-size: 1rem;
		line-height: 1.6 !important;
		margin-bottom: 30px;
		margin-left: 0;
	}
	#ailp-fview-img {
		opacity: 0.25;
	}
	#ailp-fview-inner{
		padding: 40px 20px;
	}
	.ailp-btn-cta{
		font-size: 1em;
	}
	.ailp-section2{
		padding: 10px 20px;
	}
}

/*ふわっと表示・ファーストビューのみ*/
.anim-box.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*ふわっと表示2*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}