#begins,
	#begins > *,
	.vt .vdesc,
	#heroes,
	.remarks > div {
		display:flex;
		display:-webkit-flex;
	}
	
	#banner-main {
		margin-bottom:0px;
		min-height:70vh;
	}


	#intro,
	#begins .col_a {
		flex-direction: column;
		-webkit-flex-wrap: column;
	}

	#begins > * {
		justify-content:center;
		-webkit-justify-content: center;
	}



	#intro {
		margin-bottom:0px;
	}

	#intro .vdesc a {
		padding: 20px 0px 25px 0px;
		border: 2px solid #88937b7d;
		display: block;
		border-radius: 3px;
	}

	#intro .comments p {
		color:#333;
	}

	#intro .vdesc,
	.vt .vdesc {
		background: linear-gradient(2deg,rgba(30,30,30,.9) 0,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 70%);
		color:#fff;
		width:100%;
	}

	#intro picture, 
	#intro picture img, 
	#more-about picture, 
	#more-about picture img,
	#intro .vdesc,
	#intro .col_b > div {
		border-radius: 5px;
		object-position: top;
		-webkit-object-position: top;
	}

	#intro .comments {
		margin-top: calc(20px + 3vw);/**/
	}


	#svgh-kanji-sensei {
		border: 2px solid #cd5e27;
		border-radius: 60px;
		fill: #cd5e27;
		height: 90px;
		padding: 10px;
	}		
	
	
	#begins,
	#heroes {
		padding-bottom:calc(20px + 3vw);
		padding-top:calc(20px + 3vw);
	}		
	
	
	#begins {
		background-color:#fff;
	}
	
	
	#heroes {
		color:#fff;
		background-color:#222224;
	}
	
	
	#begins video,
	#heroes img,
	.remarks img {
		border-radius:5px;
	}
	
	
	#begins video {
		margin:auto;
		max-height:720px;
		max-width:480px;
		position: relative;
		width:100%;
	}


	#origins {
		height:70vw;
		max-height:70vw;
		margin-bottom:2vw;
	}

	.vt .vdesc {
		align-items: flex-end;
		-webkit-align-items: flex-end;
		height:100%;
		padding-bottom:calc(20px + 2vw);
		text-align:left;
	}

	.vt .vdesc,
	.remarks .comments {		
		font-size: calc(1em + 0.2vw);
	}
	
	
	#middle {
		margin:calc(20px + 2vw) 0px;
	}

	
	section div p a[target="_blank"]::after, 
	a[target="_blank"].exturl::after {
		content:unset;
	}
	
	

	#intro a, 
	#begins a, 
	#heroes a, 
	.remarks a, 
	.vt a {
		border-bottom: 1px solid #e8b0b0;
		padding-bottom: 2px;
	}

	#intro a:hover, 
	#begins a:hover, 
	#heroes a:hover, 
	.remarks a:hover, 
	.vt a:hover {
		border-bottom: 2px solid #db3f3f;
		text-decoration: none;
	}
	
	#intro a:hover, 
	#begins a:hover, 
	.remarks a:hover {
		color: #720909;
	}
	
	#heroes a:hover,  
	.vt a:hover {
		color: #FFAEAE;
	}
	
	
	@media screen and (min-width:1980px) {		
		#origins picture,
		#origins picture img {
			object-position:center -40vw;
		}
	}
	
	
	@media screen and (min-width:1200px) {
		#svgh-kanji-sensei {
			margin-left:-100px;
		}
	}



	@media screen and (min-width: 992px) {
		#intro .vdesc {
			margin: auto auto 0 auto;
			padding: 150px 10% calc(20px + 2vw) 10%;
		}

		#intro .comments,
		.remarks .central.cnt,
		.vt .vdesc > div {
			padding-left:25vw;
			padding-right:25vw;
		}



		#intro .col_b > div {
			height: calc(40vh - 15px);
		}
		
		#intro .col_b > div:not(:last-of-type) {
			margin-bottom:30px;
		}
		
		

		#begins,
		#heroes {
			padding-left:7vw;
		}

		#begins,
		#begins .col_a,
		#heroes,
		#heroes .col_a {
			padding-right:7vw;
		}
		
		#begins .col_b {
			padding:0px;
		}
		
		
		#heroes > picture {
			width:40%;
		}
		
		#heroes > div {
			width:60%;
		}
		
		
		.content_row {
			padding-bottom: calc(20px + 2vw);
			padding-top: calc(20px + 2vw);
		}

		#heroes > div,
		.content_row.alternate {
			padding-left: 7vw;
			padding-right: 7vw;
		}

		.content_row.alternate .comments {
			width: 60vw;
		}

		.content_row.alternate:nth-child(even) .cnt {
			padding-left: 3vw;
			padding-right: 5vw;
		}

		.content_row.alternate:nth-child(odd) .cnt {
			padding-left: 6vw;
			padding-right: 2vw;
		}
		
		.content_row .content_row > div.central {
			margin: 4vw 1vw;
			padding: 5vw 25vw;
			width: 100%;
			background-color: #fdf8f2;
		}

		.content_row.alternate:nth-child(even) {
			flex-direction:row-reverse;
			-webkit-flex-direction:row-reverse;
		}

		.content_row.alternate:nth-child(odd) {
			flex-direction:row;
			-webkit-flex-direction:row;
		}
		
		.content_row > div.cnt {
			display:flex;
			display:-webkit-flex;
			flex-direction: column;
			-webkit-flex-direction: column;
		}
		
		.content_row .img {
			margin-left:auto;
			margin-right:auto;
			width:40vw;
		}

		.content_row > div h3:first-of-type {
			margin-top:auto;
		}

		.content_row > div p:last-of-type,
		.content_row > div ul:last-of-type {
			margin-bottom:auto;
		}

		.content_row > * {
			text-align:left;
		}

		.content_row h3 {
			margin-top:1vw;
		}
		
		.remarks #cnt-5 picture {
			display:none;
		}
	}


	@media screen and (max-width: 991px) {
		#banner-main picture, 
		#banner-main picture img {
			height: 70vh;
		}
		
		.vt .vdesc,
		.vt .vdesc a,
		#heroes > * {
			width:100%;
		}
		
		#heroes,
		.vt .vdesc {
			display:flex;
			display:-webkit-flex;		
		}
			
		#heroes,
		.content_row {
			flex-direction:column;
			-webkit-flex-direction:column;
		}
		
		
		#intro .heading {
			margin-bottom:20px;
		}
				
		#intro > * {
			padding-left: 20px;
			padding-right: 15px;
		}

		
		.vt .vdesc {
			height: 100%;
			margin: 0px;
			padding: 0px 0px calc(25px + 2vw) 0px;
		}

		#intro .vdesc a,
		.vt .vdesc a {
			margin-top:auto;
		}
		
		
		
		#begins,
		.remarks #cnt-5 {
			flex-direction:column-reverse;
			-webkit-flex-direction:column-reverse;
		}
		
		
		
		#begins {
			padding-top: 15px;
		}
		
		#begins .col_a {		
			padding-top: calc(20px + 3vw);
		}
		
		
		#heroes {
			padding-top:0px;
		}
		
		
		#heroes img {
			border-radius:0px;
		}
		
		
		
		#heroes picture {
			margin-bottom: calc(20px + 3vw);
		}
		
		
		#origins {
			height:95vh;
			min-height:95vh;
		}

		
		.content_row picture {
			margin-bottom: 15px;
		}

		.content_row p {
			text-align:left;
		}

		.content_row .comments {
			padding: 0px 15px 15px 15px;
		}
		
		.content_row > div h3 {
			font-weight: 600;
			text-align:left;
		}
		
		.content_row > div p,
		.content_row > div ul,
		.content_row > div ol,
		.content_row > div table {
			margin-bottom:15px;
		}
	}