/*===============================================
　SP iPhone6以上（画面の横幅が761pxまで）
===============================================*/

@media (max-width:761px){
	
	
	
	.ttl{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 2.8rem;
		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: 49%;
		left: -21px;
		width:10px;
		height:10px;
		background: linear-gradient(to right, #00b38b 0%, #00b38b 30%, #1b799c 100%);
		border-radius:10px;
		transform: translate(0%, -50%);
	}
	
	.ttl_center{
		text-align:center;	
	}	
	/* ============================================================
 	main vi 
	==============================================================*/
       
	#main_wrap{
		width: 100%;
		position: relative;
		overflow: hidden;
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
		background-size: auto 100%;
		height: 57vh;
	}

	#main_copy_wrap{
		width: 85%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:
		translate(-50%, -50%);
	}

	
	#main_copy_wrap h1{
		font-family: 'Noto Sans JP', serif;
		font-weight: 700;
		font-size: 3.2rem;
		color: #fff;
		text-align: left;
		letter-spacing: 2px;
		margin: 0 0 28px;
		line-height: 141%;
	}
	#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 img{
		border-radius: 20px;
	}


	
    
	/* ============================================================
 	tab_btn_wrap
	==============================================================*/

	#tab_btn_wrap {
		transition: all 0.6s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
		z-index: 900;
		/* position: fixed; */
		top: 0;
	}	
	
	#tab_btn_wrap .top_tab_wrap{
		width:100vw;
		position:
		relative;
		height: 17vh;
	}

	#tab_btn_wrap .top_follow_wrap{
		height: 100%;
		background: linear-gradient( to right, #67339f 0%, #253e97 51%, #0d086c 100%);
		box-shadow: 25px 25px 20px 0 rgb(8,8,8,0.2);
	}

	#tab_btn_wrap.fix{
		position: sticky;
		top: 95px;
		z-index: 100;
	}

	#tab_btn_wrap .top_follow_wrap .row{
		width: 94%;
		justify-content: space-between;
		position:
		absolute;
		text-align:
		center;
		top: 0;
		left:50%;
		transform: translate(-50%, 0%);
		display: flex;
	}

	#tab_btn_wrap .top_follow_wrap .row li{
		position:
		relative;
	}
	
	#tab_btn_wrap .top_follow_wrap .row li:before{
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-right:
		solid 1px #fff;
		border-bottom:
		solid 1px #fff;
		position: absolute;
		bottom: 14px;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
		transition: all 0.2s ease-out 0s;
	}
	
	#tab_btn_wrap .top_follow_wrap .row li:hover:before{
    	bottom: 8px;  
		border-right:solid 1px #d5cbdf;
		border-bottom:solid 1px #d5cbdf;  	
    }
	
	#tab_btn_wrap .top_follow_wrap .row li a{
		font-family: 'Noto Sans JP', sans-serif;
		display:
		block;
		font-weight: 300;
		font-size: 1.2rem;
		line-height: 159%;
		color: #fff;
		letter-spacing: 0.14em;
		text-align:	center;
		padding: 31px 5% 40px;
		white-space: nowrap;
	}
	
	#tab_btn_wrap .top_follow_wrap .row li a:hover{
		color:#d5cbdf;
	}

	#tab_btn_wrap .top_follow_wrap .row li:nth-child(3) a, #tab_btn_wrap .top_follow_wrap .row li:nth-child(4) a{
		line-height: 288%;
	}
	
	
	
	#tab_btn_wrap.DownMove{
		transform:
		translate(0,0);
	}

	#tab_btn_wrap.UpMove{
		transform: translate(0,-130px);
	}
	
		
	/* ============================================================
 	section 01
	==============================================================*/
	
	#sec01{
		width: 100%;
		padding: 50px 0 50px;
		position: relative;
		z-index: 1;
		background: url(../img/bg01_pc.png) no-repeat top center;
	}
	
	#sec01 .txt{
		margin: 10px auto 49px;
		width: 96%;
		text-align:
		center;
		color: #000000;
	}

	#sec01 .row_sp{
		display:
		flex;
		justify-content: space-between;
	}

	#sec01 .photo{
		font-family: 'Noto Sans JP', sans-serif;
		text-align:
		center;
		color:#fff;
		margin: -8px 0 0;
		width: 44%;
	}

	#sec01 .photo h2{
		font-size: 2.0rem;
	}

	#sec01 .photo h3{
		margin: 10px 0 -3px;
		font-size: 1.2rem;
		white-space: nowrap;
	}
	
	#sec01 .img_box img{
		width: 100%;
	}

	#sec01 .img_box_02{
		max-width: 936px;
		width: 76%;
		margin: 0 auto;
	}



	

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

	#sec_strategy .wrapper{
	padding: 0;
	}

	#sec_strategy .f_box{
		padding:0 6%;
	}

	#sec_strategy .ttl{
		color:#fff;
	}

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

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

	#sec_strategy p{
		color:#fff;
	}

	#sec_strategy .img_box{
		width: 100%;
		position: relative;
		padding: 0 2%;
		margin: 39px 0 0;
	}

	#sec_strategy .dx_bottun{
		position:absolute;
		top: 37%;
		left: 19%;
		background: linear-gradient(to right, #1ede74 0%, #29c6a3 100%);
		width: 80px;
		height: 80px;
		border-radius:100px;
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#sec_strategy .dx_bottun2{
		position:absolute;
		top: 36%;
		left: 58%;
		background: linear-gradient(to right, #32c0ed 0%, #1f86ef 100%);
		width: 80px;
		height: 80px;
		border-radius: 100%;
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#sec_strategy .dx_bottun {
	  animation: anime1 0.8s ease 0s infinite alternate;
	  transform-origin:center;
	}
	@keyframes anime1 {
	  from {
	    transform: scale(0.94,0.94);
	  }
	  to {
	    transform: scale(1,1);
	  }
	}

	#sec_strategy .dx_bottun a{
		display:block;
	}

	#sec_strategy .dx_bottun h3{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.8rem;
        color:#fff;
        text-align:center;
        margin: 22px 0 3px;
 }

	#sec_strategy .dx_bottun .hide_p{
		display:none;
	}

	#sec_strategy .dx_bottun h4{
        display:none; 
	}

	#sec_strategy .f_box img{
		width:166px;
		margin: 30px 0 0;
	}

	#sec_strategy .plat_wrap{
		width: 100%;
		margin: 51px 0 64px;
	}

	#sec_strategy .plat_wrap .flex li{
		width: 80%;
		margin: 0 auto 28px;
		text-align: center;
		padding: 0 6%;
	}

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

	#sec_strategy .plat_wrap2 .img_box{
		width: 100%;
		margin: 28px auto 20px;
	}
	#sec_strategy .plat_wrap2 p{
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.4rem;
		width: 231px;
		font-weight: 300;
		margin: 10px 0;
	}
	#sec_strategy .plat_wrap2 ul.btn_list a{
		width:200px;
	}

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

	#sec_strategy .plat_wrap2 .img_box{
		width: 100%;
		margin: 28px auto 20px;
		padding:0 6%;
	}


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

	#sec_skill .wrapper{
	}

	#sec_skill .ttl{
		color:#fff;
	}

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

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

	#sec_skill p{
		color:#fff;
	}
	
	#sec_skill ul.flex h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.7rem;
		color:#fff;
		line-height:120%;
		font-weight: 500;
		text-align: left;
		padding: 12px 0 3px;
		position: relative;
		margin: 39px 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 JP', sans-serif;
		font-size: 1.4rem;
		width: auto;
		font-weight: 300;
		margin: 10px 0;
		padding: 10px 0 0;
		border-top: 1px solid #fff;
	}
	/* ============================================================
 	sec_design
	==============================================================*/
	
	#sec_design{
		padding: 106px 0 150px;
		background: url(../img/bg01_pc.png) no-repeat bottom center;
	}

	#sec_design .wrapper{
	}

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

	#sec_design .ttl span{
		margin: 0 0 -7px 25px;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.4rem;
	}

	#sec_design .img_box{
	width: 100%;
	}

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

	#sec_training .ttl span{
		margin: 0 0 -7px 25px;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.4rem;
	}

	#sec_training .ttl span{
		margin: 0 0 -7px 25px;
		font-size: 1.3rem;
	}

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

	#sec_training .glay_box .ttl_box{
		border-bottom: 1px solid #000;
	}

	#sec_training .glay_box .ttl_box h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 2.2rem;
		color: #000;
		text-align: center;
	}

	#sec_training .glay_box .ttl_box h4{
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.9rem;
		color: #000;
		font-weight:500;
		margin: -40px 0 0;
		letter-spacing: 0.2rem;
		text-align: center;
	}

	#sec_training .glay_box .ttl_box h4 span{
		font-size: 5.0rem;
		font-weight:700;
		letter-spacing: 0.1rem;
	}

	#sec_training .glay_box .txt_box{
		margin: 17px 0 18px;
	}
	
	#sec_training .txt2{
		line-height: 180%;
		margin: 0 0 26px;
	}

	#sec_training .img_box{
		white-space: nowrap;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#sec_training .img_box img{
		display: inline-block;
		/* height: 100%; */
		width: 900px;
		max-width: 900px;
		vertical-align: middle;
	}
	
	#sec_training .btn_list{
		text-align:center;
		margin:80px 0 0;
	}

	#sec_training ul.btn_list a{
		width:80%;
	}
	



	

	
	/*CSS*/
	.bg {
		margin: -46px 0 9px;
	}
	.bg .bg-wrap {
	  position: relative;
	  display: inline-block;
	  padding: 0 2%;
	  margin: 0 0 0;
	}
	.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 JP', 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;
	  }
	}

	
	
	
	

	



/*===============================================
　SP iPhone5サイズ対応　画面の横幅が350pxまで▼▼▼▼▼
===============================================*/

@media (max-width:349px) {
	
}

/*===============================================
　SP iPhone Plus サイズ対応　画面の横幅が415pxまで▼▼▼▼▼
===============================================*/

@media (min-width: 413px) and (max-width: 761px) {
	
}