@charset "utf-8";
/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {

	
	.ttl{
		font-family: 'Roboto', sans-serif;
		font-weight: 700;
		letter-spacing: 0.1em;
		font-size: 3.6rem;
		text-align: left;
		background: linear-gradient( to right,  #0d096c 25%, #66339f 75% );
		-webkit-background-clip: text;
		color: transparent;
		filter: drop-shadow(20px 20px 10px #00000022);
	}
	
	.ttl span{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		letter-spacing: 0;
		font-size: 2.2rem;
		display:
		block;
		color:#9b9b9b;
		margin: 0 0 0;
	}
	
	.ttl_center{
		text-align:center;	
	}
	
	/* ============================================================
 	main vi 
	==============================================================*/
       
	#main_wrap{
		width: 100%;
		height: 710px;
		position: relative;
		overflow: hidden;
		background: url("../img/hero_pc.jpg") no-repeat top center;
		margin: 0 0 -49px;
		text-align: center;
	}

	#main_copy_wrap{
		position: relative;
		width: 80%;
		max-width: 1200px;
		min-width: 800px;
		margin: 138px auto 0;
	}

	#main_copy_wrap p{
		font-size: 2.2rem;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		color: #ffffff;
		background:#000;
		letter-spacing: 0.1rem;
		text-align:center;
		width:800px;
		margin:0 auto 30px;
	}
	
	#main_copy_wrap h1{
		max-width: 802px;
		width: 80%;
		min-width: 500px;
		margin: 12px auto 0;
	}
	
	#main_copy_wrap h1 .grada{
		margin: 0 0 15px;
		line-height: 120%;
		letter-spacing: 0;
		background: linear-gradient( to right, #67339f 0%, #253e97 51%, #0d086c 100%);
		-webkit-background-clip: text;
		color: transparent;
		display: inline;
		font-family: 'Hind', sans-serif;
	}

	#main_copy_wrap h1 .dx_h {
		font-size: 27.4rem;
		line-height: 100%;
		letter-spacing: -2.1rem;
	}

	#main_copy_wrap h2{
		font-size: 4.4rem;
		font-family: 'Roboto', sans-serif;
		font-weight: 600;
		color: #0d026a;
		letter-spacing: 0.1rem;
	}

	#main_copy_wrap h4{
		font-size: 3.2rem;
		font-family: 'Roboto', sans-serif;
		font-weight: 600;
		color: #000000;
		letter-spacing: 0.1rem;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
		margin: 16px 0 0;
	}

	#main_copy_wrap h4 .position {
		font-size: 1.6rem;
		display: block;
	}

	#main_copy_wrap h4 .cross {
		flex: 0 0 20px;
	}

	#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{
		box-shadow: 25px 25px 20px 0 rgb(8 8 8 / 20%);
		border-radius:10px;
	}

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

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

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

	#sec01 .photo h3{
		margin: 0px 0 -3px;
		font-size: 1.3rem;
	}
	
	#sec01 .img_box img{
		border-radius: 124px;
		width: 170px;
	}

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



	

	
		
	/* ============================================================
 	section 02
	==============================================================*/
	
	#sec02{
		width: 100%;
		position: relative;
		padding: 150px 0 38px;
		z-index: 1;
	}
	
	#sec02 .wrapper{
		width: 80%;
		max-width: 942px;
		text-align: center;
	}
	
	#sec02 .ttl_wrap_2{
		margin: 200px 0 0;
	}
	
	#sec02 .ttl_wrap_5{
		margin: 200px 0 0;
	}

	#sec02 .img_box_01 img{
		margin:0 auto;
		width: 100%;
		max-width: 936px;
		min-width: 600px;
	}

	#sec02 h2{
		color:#fff;
		display: inline-grid;
		padding: 31px 36px 31px 58px;
		font-family: 'Roboto', sans-serif;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 130%;
		text-align: left;
		margin: -100px 0 70px -55%;
		position: relative;
		background:
		linear-gradient( to left, #67339f 0%, #253e97 51%, #0d086c 100%);
		text-indent: -.7em;
	}

	#sec02 h2:before{
		content: "”";
		position:absolute;
		bottom: 37px;
		right: 31px;
		display: none;
	}

	#sec02 h2:after{
		content: "“";
		position:absolute;
		top: 26px;
		left: 26px;
		display: none;
	}

	#sec02 .ttl_wrap_5 h2:before{
		right: 5.5em;
		font-size: 3.6rem;
		bottom: 34px;
	}
	
	#sec02 .txt{
		padding: 0 0 0px 105px;
		position: relative;
		line-height: 216%;
		max-width: 840px;
		width: 90%;
		margin: 0 0 40px;
		letter-spacing: 0.1rem;
		font-size: 1.6rem;
		font-weight: 400;
		text-align: left;
	}

	#sec02 .txt_r{
		margin: 0 0 40px 182px;
		width: 80%;
	}
	
	#sec02 .txt span{
		display:block;
		position:absolute;
		top: -1px;
		left: -30px;
		font-size: 1.8rem;
		color: #64339f;
		font-weight: 600;
	}
	
	#sec02 .ttl_wrap_3 h2{
		margin: -100px -40% 84px 0;
	}
	
	#sec02 .ttl_wrap_3 .img_box_01 img{
		margin: 80px -50% 0px 0;
	}
	
	#sec02 .ttl_wrap_4 .img_box_01 img{
		margin: 80px 0 0 -50%;
	}

	#sec02 ul.btn_list{
		text-align: center;
		margin: 40px 0;
	}

	#sec02 ul.btn_list a{
		width:30%;
		padding: 18px 57px 18px 65px;
	}

	

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