@media screen and (min-width: 769px) {
	
	/*---------------------------------------
	 * MainVisual
	---------------------------------------*/ 
	
	.mainvisual{
		width: 100%;
		height: 731px;
		background: linear-gradient(-45deg, #4cadfe, #97ffed, #aafcae, #d6ff96, #fbff97, #ffe397, #ffaea3, #ffa9d8, #e1a6ff, #b5beff) 0 0 / 1000% no-repeat;
		-webkit-animation: gradientAnimation 40s linear infinite;
		animation: gradientAnimation 40s linear infinite;
		position: relative;
	}
	.mainvisual .inner{
		width: 100%;
		height: 731px;
		background: url(../img/img_mainvisual-01_pc.png) 50% no-repeat;
		background-size: 2560px;
		position: relative;
	}
	.mainvisual .box{
		position: absolute;
		width: calc(100% - 40px);
		/*max-width: 890px;*/
		width: 890px;
		margin:  auto;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%)
	}
	.mainvisual .box h2{
		width: 629px;
		height: 381px;
	}
	.mainvisual .scroll{
		position: absolute;
		bottom:-54px;
		left:2.467vw;
		display: block;
		width: 12px;
		height: 160px;
		z-index: 50;
	}

	/*---------------------------------------
	 * Intro
	---------------------------------------*/     
	
	.intro{
		width: 100%;
		padding: 97px 0 105px;
	}
	.intro .inner{
		width: calc(100% - 80px);
		/*max-width: 890px;*/
		width: 890px;
		margin: 0 auto;
	}



	/*---------------------------------------
	 * Interview
	---------------------------------------*/ 
	
	.interview{
		width: 100%;
		padding: 100px 0 80px;
	}  
	.interview .inner{
		width: calc(100% - 80px);
		/*max-width: 890px;*/
		width: 890px;
		margin: 0 auto;
	}
	.interview .inner h2{
		width: 304px;
		margin: 0 auto 55px;
	}
	.interview .inner ul li{
		width: 100%;
		margin: 0 0 50px;
		background: rgb(61,138,203);
		background: linear-gradient(45deg, rgba(61,138,203,1) 0%, rgba(163,199,190,1) 50%, rgba(139,198,186,1) 100%);
		padding: 10px;
		box-sizing: border-box;
	}
	.interview .inner ul li a{
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.interview .inner ul li a .copy{
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
	}
	
	
	/*---------------------------------------
	 * News
	---------------------------------------*/ 	
	
	.news{
		width: 100%;
		padding: 85px 0 115px;
		background: #e6f6ff;
	}
	.news .inner{
		width: calc(100% - 40px);
		max-width: 1279px;
		min-width: 890px;
		margin: 0 auto;
	}
	.news .inner h2{
		width: 215px;
		height: 107px;
		margin: 0 auto 36px;
	}
	.news .inner .list{
		display: flex;
		justify-content: space-between;
	}
	.news .inner .list li{
		width: 23.5%;
	}
	.news .inner .list li a{
		display: block;
		
	}
	.news .inner .list li a .image{
		width: 100%;
		height: 195px;
		/*overflow: hidden;*/
		border-radius: 8px 8px 0px 0px
	}
	.news .inner .list li a .image img{
		width: auto;
		height: 100%;
		position: relative;
		position: relative;
		left: 50%;
		right: 0;
		margin: auto;
		transform: translateX(-50%);
		transition: transform 0.3s;
	}
	.news .inner .list li a:hover .image img{
		transform: translateX(-50%) scale(1.05);
	}
	.news .inner .list li a .summary{
		width: 100%;
		padding: 28px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 0 0 8px 8px;
	}
	.news .inner .list li a .summary .date{
		font-weight: 700;
		font-size: 1.1rem;
		margin: 0 0 22px;
		color: #003969;
	}
	.news .inner .list li a .summary .post-title{
		height: 6.5em;
		line-height: 1.6;
		font-weight: 700;
		color: #003969;
	}
	.news .inner .list li a .summary .cat{
		color: #c8281c;
	}
	
	
	/*---------------------------------------
	 * Youkou
	---------------------------------------*/ 
	
	.youkou{
		width: 100%;
		background: rgb(76,173,254);
		background: linear-gradient(45deg, rgba(76,173,254,1) 0%, rgba(192,243,241,1) 40%, rgba(242,254,220,1) 100%);
		padding: 100px 0 95px;
	}
	.youkou .inner{
		width: calc(100% - 40px);
		/*max-width: 890px;*/
		width: 890px;
		margin: 0 auto;
	}
	.youkou .inner .box{
		background: rgba(255,255,255,.7);
		padding: 40px 60px;
		position: relative;
		margin: 0 0 40px;
	}
	.youkou .inner .box h2{
		position: relative;
	}
	.youkou .inner .box h2 img{
		display: block;
		width: 126px;
		height: 28px;
		margin: 0 auto;
		padding: 0 0 44px;
	}
	.youkou .inner .box2 h2 img{
		width: 305px;
		height: 29px;
	}
	.youkou .inner .box h2::before{
		content:"";
		display: block;
		width: 37px;
		height: 21px;
		background: url(../img/arrow.png) 0 0 no-repeat;
		background-size:100%;
		position: absolute;
		top:10px;
		right:10px;
		transition: transform .3s;
	}
	.youkou .inner .box h2.active::before{
		transform: rotate(-180deg);
	}
	.youkou .inner .box h2::after{
		content:"";
		width: 100%;
		height: 6px;
		background: linear-gradient(0deg, #b3ded8, #c7e3c6 );
		display: block;
	}
	.youkou .inner .box .content{
		height: 165px;
		overflow: hidden;
	}
	.youkou .inner .box .content dl{
		padding: 40px 0;
		border-bottom: 1px solid #e5e6e5;
		width: 100%;
		display: table;
	}
	.youkou .inner .box .content dl:last-child{
		border-bottom: none;
	}
	.youkou .inner .box .content dl dt{
		display: table-cell;
		width: 147px;
		padding: 0 0 0 27px;
		box-sizing: border-box;
		color: #3588cd;
		line-height: 1.6;
	}
	.youkou .inner .box .content dl dd{
		display: table-cell;
		color: #003969;
		line-height: 1.6;
	}
	.youkou .inner .box .content dl dd .table{
		display: table;
		width: 100%;
		padding: 10px 0 15px;
		position: relative;	
	}
	.youkou .inner .box .content dl dd .table .deco,
	.youkou .inner .box .content dl dd .table .read{
		display: table-cell;
		text-align: left;
	}
	.youkou .inner .box .content dl dd .table .deco{
		width: 9px;
	}
	.youkou .inner .box .content dl dd .table .deco span{
		display: block;
		background: #FFFFFF;
		border: 1px solid #000000;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		position: relative;
		z-index: 1;
	}
	.youkou .inner .box .content dl dd .table::after{
		content:"";
		width: 1px;
		height: 100%;
		display: block;
		background: #000000;
		position: absolute;
		top: 0;
		left: 5px;
		z-index: 0;
	}
	.youkou .inner .box .content dl dd .table .read{
		padding-left: 25px;
	}
	.show-more{
		position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 100%;
    	height: 30px;
    	padding-top: 60px;
    	background: linear-gradient(180deg, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);	
	}

	
}

@media screen and (max-width: 768px) {
	
	/*---------------------------------------
	 * MainVisual
	---------------------------------------*/ 
	
	.mainvisual{
		width: 100%;
		height: 125.467vw;
		background: linear-gradient(-45deg, #4cadfe, #97ffed, #aafcae, #d6ff96, #fbff97, #ffe397, #ffaea3, #ffa9d8, #e1a6ff, #b5beff) 0 0 / 1000% no-repeat;
		-webkit-animation: gradientAnimation 40s ease infinite;
		animation: gradientAnimation 40s ease infinite;
		position: relative;
	}
	.mainvisual .inner{
		width: 100%;
		height: 125.467vw;
		background: url(../img/img_mainvisual-01_sp.png) 50% no-repeat;
		background-size: cover;
		position: relative;
	}
	.mainvisual .box{
		position: absolute;
		width: calc(100% - 12.8vw);
		margin:  auto;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%)
	}
	.mainvisual .box h2{
		width: 100%;
	}
	.mainvisual .scroll{
		position: absolute;
		bottom:-7.2vw;
		left:6.4vw;
		display: block;
		width: 2.2vw;
		z-index: 50;
	}
	
	/*---------------------------------------
	 * Intro
	---------------------------------------*/     
	
	.intro{
		width: 100%;
		padding: 15.733vw 0 14.8vw;
	}
	.intro .inner{
		width: calc(100% - 12.8vw);
		margin: 0 auto;
	}
	
	
	/*---------------------------------------
	 * Discovery
	---------------------------------------*/ 	
	/*
	.discovery{
		width: 100%;
		height: 76.8vw;
		background: linear-gradient(45deg, rgba(76,173,254,.7), rgba(151,255,237,.7), rgba(170,252,174,.7), rgba(214,255,150,.7), rgba(251,255,151,.7), rgba(255,227,151,.7), rgba(255,174,163,.7), rgba(255,169,216,.7), rgba(225,166,255,.7), rgba(181,190,255,.7)) 0 0 / 1000% no-repeat, url(../img/bg_discovery-01_sp.png) 50% / cover no-repeat;
		-webkit-animation: gradientAnimation 40s ease infinite;
		animation: gradientAnimation 40s ease infinite;
	}
	.discovery .inner{
		width: calc(100% - 12.8vw);
		margin: 0 auto;
	}
	.discovery .inner a{
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto ;
		padding: 9.867vw 0 0;
	}
	*/
	
	/*---------------------------------------
	 * Interview
	---------------------------------------*/ 
	
	.interview{
		width: 100%;
		padding: 14.667vw 0 10.667vw;
	}  
	.interview .inner{
		width: calc(100% - 12.8vw);
		margin: 0 auto;
	}
	.interview .inner h2{
		width: 51.867vw;
		margin: 0 auto 7.2vw;
	}
	.interview .inner ul li{
		width: 100%;
		margin: 0 0 4vw;
		background: rgb(61,138,203);
		background: linear-gradient(45deg, rgba(61,138,203,1) 0%, rgba(163,199,190,1) 50%, rgba(139,198,186,1) 100%);
		padding: 1.333vw;
		box-sizing: border-box;
	}
	.interview .inner ul li a{
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.interview .inner ul li a .img{
		width: 100%;
		height: auto
	}
	
	.interview .inner ul li a .copy{
		display: none;
	}
	
	
	/*---------------------------------------
	 * News
	---------------------------------------*/ 	
	
	.news{
		width: 100%;
		padding: 9.867vw 0 7.733vw;
		background: #e6f6ff;
	}
	.news .inner{
		width: calc(100% - 12.8vw);
		
		margin: 0 auto;
	}
	.news .inner h2{
		width: 40.533vw;
		margin: 0 auto 7.2vw;
	}
	.news .inner .list{
		
	}
	.news .inner .list li{
		width: 100%;
		margin: 0 0 6.667vw;
	}
	.news .inner .list li a{
		display: block;
		
	}
	.news .inner .list li a .image{
		width: 100%;
		height: auto;
		overflow: hidden;
		border-radius: 8px 8px 0px 0px
	}
	.news .inner .list li a .image img{
		width: 100%;
		height: auto;
		position: relative;
		
	}
	
	.news .inner .list li a .summary{
		width: 100%;
		padding: 7.733vw;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 0 0 8px 8px;
	}
	.news .inner .list li a .summary .date{
		font-weight: 700;
		font-size: 3.2vw;
		margin: 0 0 6.4vw;
		color: #003969;
	}
	.news .inner .list li a .summary .post-title{
		height: 6.5em;
		line-height: 1.6;
		font-size: 4.8vw;
		font-weight: 700;
		color: #003969;
	}
	.news .inner .list li a .summary .cat{
		color: #c8281c;
		font-size: 3.733vw;
	}
	
	
	/*---------------------------------------
	 * Youkou
	---------------------------------------*/ 
	
	.youkou{
		width: 100%;
		background: rgb(76,173,254);
		background: linear-gradient(45deg, rgba(76,173,254,1) 0%, rgba(192,243,241,1) 40%, rgba(242,254,220,1) 100%);
		padding: 16vw 0 6.667vw;
	}
	.youkou .inner{
		width: calc(100% - 12.8vw);
		margin: 0 auto;
	}
	.youkou .inner .box{
		background: rgba(255,255,255,.7);
		padding: 7.467vw 5.867vw;
		position: relative;
		margin: 0 0 40px;
	}
	.youkou .inner .box h2{
		position: relative;
	}
	.youkou .inner .box h2 img{
		display: block;
		width: 20.8vw;
		margin: 0 auto;
		padding: 0 0 5.867vw;
	}
	.youkou .inner .box2 h2 img{
		width: 44.533vw;
	}
	.youkou .inner .box h2::before{
		content:"";
		display: block;
		width: 4.933vw;
		height: 2.8vw;
		background: url(../img/arrow.png) 0 0 no-repeat;
		background-size:100%;
		position: absolute;
		top:1.333vw;
		right:1.333vw;
		transition: transform .3s;
	}
	.youkou .inner .box h2.active::before{
		transform: rotate(-180deg);
	}
	.youkou .inner .box h2::after{
		content:"";
		width: 100%;
		height: 0.8vw;
		background: linear-gradient(0deg, #b3ded8, #c7e3c6 );
		display: block;
	}
	.youkou .inner .box .content{
		height: 165px;
		overflow: hidden;
	}
	.youkou .inner .box .content dl{
		padding: 4vw 0;
		border-bottom: 1px solid #e5e6e5;
		width: 100%;
		font-size: 3.467vw;
	}
	.youkou .inner .box .content dl:last-child{
		border-bottom: none;
	}
	.youkou .inner .box .content dl dt{
		
		margin: 0 0 2vw;
		box-sizing: border-box;
		color: #3588cd;
		line-height: 1.6;
	}
	.youkou .inner .box .content dl dd{
		
		color: #003969;
		line-height: 1.6;
	}
	.youkou .inner .box .content dl dd .table{
		display: table;
		width: 100%;
		padding: 1.333vw 0 2vw;
		position: relative;	
	}
	.youkou .inner .box .content dl dd .table .deco,
	.youkou .inner .box .content dl dd .table .read{
		display: table-cell;
		text-align: left;
	}
	.youkou .inner .box .content dl dd .table .deco{
		width: 1.467vw;
	}
	.youkou .inner .box .content dl dd .table .deco span{
		display: block;
		background: #FFFFFF;
		border: 1px solid #000000;
		width: 1.467vw;
		height: 1.467vw;
		border-radius: 50%;
		position: relative;
		z-index: 1;
	}
	.youkou .inner .box .content dl dd .table::after{
		content:"";
		width: 1px;
		height: 100%;
		display: block;
		background: #000000;
		position: absolute;
		top: 0;
		left: 0.667vw;
		z-index: 0;
	}
	.youkou .inner .box .content dl dd .table .read{
		padding-left: 3.333vw;
	}
	.show-more{
		position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 100%;
    	height: 4vw;
    	padding-top: 8vw;
    	background: linear-gradient(180deg, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);	
	}					
	
	
}