/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {


	.flex{
		display:flex;
		justify-content: left;
		/* flex-wrap: wrap; */
	}
	
	.ttl_center{
		text-align:center;	
	}
	
	.ttl{
		font-family: "Noto Sans", sans-serif;
		font-weight: 700;
		font-size: 3.6rem;
		text-align: left;
		margin: 0 0 12px;
		color: #252525;
		line-height: 140%;
	}
	
	.ttl span{
		font-family: 'Roboto', sans-serif;
		font-weight: 456;
		letter-spacing: 0;
		font-size: 1.6rem;
		display:
		block;
		color: #252525;
		margin: 0 0 0 25px;
		position: relative;
	}
	
	.ttl span:before{
		content: "";
		display:block;
		position:absolute;
		top: 47%;
		left: -21px;
		width:10px;
		height:10px;
		background: linear-gradient(to right, #00b38b 0%, #00b38b 30%, #1b799c 100%);
		border-radius:10px;
		transform: translate(0%, -50%);
	}
	
	
	/* ============================================================
 	main vi 
	==============================================================*/
       
	#main_wrap{
		width: 100%;
		height: 380px;
		position: relative;
		overflow: hidden;
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
		margin: 0 0 44px;
	}

	#main_copy_wrap{
		position: relative;
		width: 80%;
		max-width: 1200px;
		min-width: 1000px;
		margin: 0 auto;
	}
	
	#main_copy_wrap h1{
		font-family: 'Noto Sans JP', serif;
		font-weight: 700;
		font-size: 5.4rem;
		color: #fff;
		text-align: left;
		letter-spacing: 2px;
		margin: 193px 6% 0;
		line-height: 141%;
		width: 100%;
	}
	#main_copy_wrap h1 span{
		font-size: 1.8rem;
		padding: 0px 22px 0px;
		color: #0b175f;
		background-color: #fff;
		display: table;
		margin: 0 0 15px;
		line-height: 188%;
		letter-spacing: 0;
	}

	#main_copy_wrap .img_box_01{
		position: absolute;
		right: 0;
		top: 1%;
		max-width: 500px;
		width: 40%;
		min-width: 360px;
	}

	#main_copy_wrap .img_box_01 img{
		
		border-radius:10px;
		box-shadow: 25px 25px 20px 0 rgb(8 8 8 / 20%);
		border-radius:10px;
	}
	
	#main_copy_wrap p{
		font-size: 2.2rem;
		line-height: 179%;
		letter-spacing: 0.31em;
		margin: 34px 0 0;
		text-align: center;
		color: #fff;
		position: relative;
		font-family: "Noto Sans", sans-serif;
	}

	#main_copy_wrap p span{
		letter-spacing:-4px;
	}
	
	#main_copy_wrap .copy_body{
		position: relative;
	}
	
	#main_copy_wrap .copy_body:before{
		left: 50%;
	}
	#main_copy_wrap .copy_body:after{
		right: 50%;
	}
	
	#main_copy_wrap .copy_body_act:before{
		width: 20px;
		left: 7%;
		opacity:1;
	}
	#main_copy_wrap .copy_body_act:after{
		width: 20px;
		right:9%;
		opacity:1;
	}


		
	/* ============================================================
 	section 01
	==============================================================*/
	
	#sec01{
		width: 100%;
		padding: 76px 0 80px;
		position: relative;
		z-index: 1;
		background: url(../img/bg01_pc.png) no-repeat top center;
	}
	
	#sec01 .wrapper{
		width: 80%;
		max-width: 1120px;
		min-width: 800px;
		text-align: center;
	}
	
	#sec01 .txt{
		margin: 31px auto 0;
		text-align:
		center;
		color: #000000;
		min-width: 500px;
		max-width: 900px;
	}
	
	#sec01 .img_box img{
		width: 412px;
	}

	
	/* ============================================================
 	sec_strategy
	==============================================================*/
	
	#sec_strategy{
		background:#0e7f80;
		padding: 106px 0 100px;
		background: #0e7f80 url(../img/bg_tech.png) no-repeat top left;
	}

	#sec_strategy .wrapper{
		display:flex;
		justify-content:space-between;
		max-width: 1100px;
		min-width: 1000px;
		width: 80%;
	}

	#sec_strategy .ttl{
		color:#fff;
	}

	#sec_strategy .ttl span{
		color:#fff;
	}

	#sec_strategy .ttl span:before{
		background:#fff;
	}

	#sec_strategy p{
		color:#fff;
		width:400px;
	}

	#sec_strategy .img_box{
		width:614px;
		margin: 0 -80px 0 0;
		position: relative;
	}

	#sec_strategy .flex{
		justify-content:space-between;
	}

	#sec_strategy .plat_wrap{
		width: 500px;
		margin: 0 0 64px;
	}

	#sec_strategy .plat_wrap2{
		margin: -50px 0 0;
		text-align:center;
	}

	#sec_strategy .plat_wrap2 .img_box{
		width:400px;
		margin: 28px auto 20px;
	}
	#sec_strategy .plat_wrap2 p{
		font-family: "Noto Sans", sans-serif;
		font-size: 1.2rem;
		width: 231px;
		font-weight: 300;
		margin: 10px 0;
		text-align: left;
	}
	#sec_strategy .plat_wrap2 ul.btn_list a{
		width:200px;
	}

	#sec_strategy h3{
        font-family: "Noto Sans", sans-serif;
        font-size: 1.5rem;
        color:#fff;
        line-height:120%;
        font-weight: 500;
        text-align: left;
        padding: 12px 0 3px;
 }


	/* ============================================================
 	sec_skill
	==============================================================*/
	
	#sec_skill{
		padding: 106px 0 100px;
		background: #007db9 url(../img/bg_tech.png) no-repeat top left;
	}

	#sec_skill .wrapper{
		max-width: 1100px;
		min-width: 950px;
		width: 80%;
	}

	#sec_skill .ttl{
		color:#fff;
		width: 635px;
	}

	#sec_skill .ttl span{
		color:#fff;
	}

	#sec_skill .ttl span:before{
		background:#fff;
	}

	#sec_skill p{
		color:#fff;
		width:400px;
	}
	
	#sec_skill ul.flex{
		justify-content: space-between;
		margin: 30px 0 0;
		max-width: 1000px;
	}
	
	#sec_skill ul.flex h3{
		font-family: "Noto Sans", sans-serif;
		font-size: 1.7rem;
		color:#fff;
		line-height:120%;
		font-weight: 500;
		text-align: left;
		padding: 12px 0 3px;
		position: relative;
		margin: 0 0 0 22px;
	}
	
	#sec_skill ul.flex h3:before{
		content: "";
		display:block;
		position:absolute;
		top: 61%;
		left: -21px;
		width:10px;
		height:10px;
		background: #e16446;
		transform: translate(0%, -50%);
	}
	
	#sec_skill ul.flex li:nth-child(2) h3:before{
		background: #e6bc00;
	}
	
	#sec_skill ul.flex li:nth-child(3) h3:before{
		background: #00a082;
	}
	
	#sec_skill ul.flex p{
		font-family: "Noto Sans", sans-serif;
		font-size: 1.4rem;
		width: 300px;
		font-weight: 300;
		margin: 10px 0;
		padding: 10px 0 0;
		border-top: 1px solid #fff;
	}



	/* ============================================================
 	sec_design
	==============================================================*/
	
	#sec_design{
		padding: 106px 0 200px;
		background: url(../img/bg01_pc.png) no-repeat bottom center;
	}

	#sec_design .wrapper{
		max-width: 1100px;
		min-width: 950px;
		width: 80%;
	}

	#sec_design .txt{
		line-height:180%;
		margin: 30px 0 30px;
		width: 800px;
	}

	#sec_design .ttl span{
		margin: 0 0 -7px 25px;
	}

	/* ============================================================
 	sec_training
	==============================================================*/
	
	#sec_training{
		padding: 20px 0 100px;
	}

	#sec_training .ttl span{
		margin: 0 0 -7px 25px;
	}

	#sec_training .glay_box{
		background:#f2f2f2;
		padding: 20px 70px;
		border-radius:20px;
		display: flex;
		margin: 33px 0 43px;
	}

	#sec_training .glay_box .ttl_box{
		width: 61%;
		border-right: 1px solid #000;
	}

	#sec_training .glay_box .ttl_box h3{
		font-family: "Noto Sans", sans-serif;
		font-size: 1.5rem;
		color: #000;
		line-height: 130%;
		margin: 22px 0 0 0;
	}

	#sec_training .glay_box .ttl_box h4{
		font-family: "Noto Sans", sans-serif;
		font-size: 1.6rem;
		letter-spacing:0.1rem;
		color: #000;
		font-weight:500;
		margin: -40px 0 0;
	}

	#sec_training .glay_box .ttl_box h4 span{
		font-size: 5.0rem;
		font-weight:700;
		margin: 0 0 0 16px;
	}

	#sec_training .glay_box .txt_box{
		margin: 0 0 0 49px;
		line-height: 200%;
		font-weight: 400;
	}
	
	#sec_training .txt2{
		line-height: 180%;
		margin: 0 0 33px;
	}
	
	#sec_training .btn_list{
		text-align:center;
		margin:80px 0 0;
	}
	
	

	
	/*CSS*/
	.bg {
		margin: -46px 0 9px;
	}
	.bg .bg-wrap {
	  position: relative;
	  display: inline-block;
	  margin-top: 74px;
	  padding: 0 2%;
	}
	.bg.is-animated .bg-wrap::before {
	  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	  background: linear-gradient( to left, #67339f 0%, #253e97 51%, #0d086c 100%);
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  transform-origin: left center;
	}
	.bg .bg-wrap .inn {
	  color: #fff;
	  display: inline-block;
	  font-family: "Noto Sans", sans-serif;
	  font-size: 2.4rem;
	  font-weight: 400;
	  padding: 0px 0 3px;
	  position: relative;
	  z-index: 1;
	  letter-spacing: 0.1rem;
	  line-height: 150%;
	}
	
}

	@keyframes bg {
	  0% {
		opacity: 0;
		transform: scaleX(0) translateX(-5%);
	  }
	  30% {
		transform: scaleX(1) translateX(0);
	  }
	  100% {
		transform: scaleX(1) translateX(0);
	  }
	  30%, 100% {
		opacity: 1;
	  }
	}