html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,apply
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	color:#333;
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.red {
	color:#ff0000;
}

a:link {color: #0066cc; text-decoration: none; }
a:visited { color: #0066cc; }
a:hover { color: #0379f0; text-decoration: underline; }
a:active { color: #0066cc; }

a:hover {
  opacity: 0.6;
}


/*** 要素出し分け ***/
.tb {
	display: none;
}
.pc {
	display: none;
}
/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
.sp {
	display: none;
	}
.tb {
	display: inline;
	}
.pc {
	display: none;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
.sp {
	display: none;
	}
.tb {
	display: none;
	}
.pc {
	display: inline;
	}
}


/* メインビジュアル */
#mainV {
	padding: 0;
	}
#mainV {
	min-width: 100%;
	overflow: hidden;
	background: #fff;
	}
	#mainV .contents {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	#mainV .contents div.main {
		margin: 0px;
		text-align: center;
		width: 100%;
	}
	#mainV .contents div.main h1 {
		margin: 0px;
	}
	#mainV .contents div.main h1 img {
		width: 100%;
		height: auto;
	}

/* 960px～ */
@media screen and (min-width: 960px) { 
#mainV {
	min-width: 1050px;
	overflow: hidden;
	background: #fff;
	}
	#mainV .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
	}
	#mainV .contents div.main {
		margin: 0px;
		text-align: left;
		width: 100%;
	}
	#mainV .contents div.main h1 img {
		width: 1050px;
	}
}


/* 動画ブロック */
#video {
	padding: 2em 0 1em;
	min-width: 100%;
	overflow: hidden;
	background-color: #efcacb;
	background-image: linear-gradient(90deg, #fff 20%, transparent 30%, transparent 100%);
	background-position: left top;
	background-size: 3px 0.5px;
	background-repeat: repeat;
	}
	#video .contents {
		width: 96%;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#video .contents h2 {
		text-align: center;
		margin: 0px auto 0px;
	}
	#video .contents h2 img {
		width: 50%;
		height: auto;
	}
	#video .contents h3 {
		text-align: center;
		margin: 10px auto 0px;
	}
	#video .contents h3 img {
		width: 95%;
		height: auto;
	}
	#video .contents h4 {
		text-align: center;
		margin: 20px auto 10px;
	}
	#video .contents h4 img {
		width: 95%;
		height: auto;
	}
	#video .contents iframe.video {
		width: 320px;
		height: 180px;
		margin: 5px 0 7px;
		background: #fff;
	}
	#video .contents p.notes {
		font-size:12px;
		font-weight:normal;
		text-align: center;
		margin: 5px auto 50px;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
	#video .contents h2 img {
		width: 40%;
	}
	#video .contents h3 {
		margin: 15px auto 0px;
	}
	#video .contents h3 img {
		width: 85%;
	}
	#video .contents h4 {
		margin: 20px auto 20px;
	}
	#video .contents h4 img {
		width: 90%;
	}
	#video .contents iframe.video {
		width: 480px;
		height: 270px;
		margin: 5px 0 7px;
		background: #fff;
	}
	#video .contents p.notes {
		font-size:14px;
		margin: 7px auto 60px;
	}
}

/* 960px～ */
@media screen and (min-width: 960px) { 
#video {
	padding: 4em 0 3em;
	min-width: 1050px;
	overflow: hidden;
	}
	#video .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#video .contents h2 img {
		width: 322px;
	}
	#video .contents h3 {
		margin: 15px auto 0px;
	}
	#video .contents h3 img {
		width: 846px;
		height: 64px;
	}
	#video .contents h4 {
		margin: 40px auto 40px;
	}
	#video .contents h4 img {
		width: 764px;
	}
	#video .contents iframe.video {
		width: 640px;
		height: 360px;
		margin: 5px 0 10px;
		background: #fff;
	}
	#video .contents p.notes {
		font-size:15px;
		margin: 10px auto 70px;
	}
}


/* 著者紹介 */
#profile {
	padding: 2em 0 2em;
	min-width: 100%;
	overflow: hidden;
	background: #fff;
	}
	#profile .contents {
		width: 90%;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#profile .contents p.pic {
		text-align: center;
	}
	#profile .contents p.pic img {
		width: 40%;
		height: auto;
	}
	#profile .contents p.name {
		font-size:22px;
		font-weight:bold;
		text-align: center;
		margin: 20px 0 15px;
	}
	#profile .contents p.name span {
		font-size:60%;
		padding-left: 5px;
	}
	#profile .contents p.position {
		font-size:15px;
		line-height: 1.5;
		color:#d95357;
		font-weight:normal;
		text-align: left;
		margin: 0 0 20px;
	}
	#profile .contents p.profile {
		font-size:14px;
		line-height: 1.5;
		font-weight:normal;
		text-align: left;
		margin: 0 0 15px;
	}
	#profile .contents p.web {
		font-size:14px;
		line-height: 1.5;
		font-weight:normal;
		text-align: left;
		margin: 0 0 15px;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
	#profile .contents p.pic img {
		width: 30%;
	}
	#profile .contents p.name {
		font-size:26px;
		margin: 20px 0 20px;
	}
	#profile .contents p.position {
		font-size:16px;
	}
	#profile .contents p.profile {
		font-size:15px;
	}
	#profile .contents p.web {
		font-size:15px;
	}
}

/* 960px～ */
@media screen and (min-width: 960px) { 
#profile {
	padding: 2em 0 2em;
	min-width: 1050px;
	overflow: hidden;
	min-height: auto;
	}
	#profile .contents {
		width: 900px;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#profile .contents div.box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px auto 30px;
	}
	#profile .contents div.box div.col01 {
		width: 27%;
	}
	#profile .contents div.box div.col02 {
		width: 73%;
	}
	#profile .contents p.pic {
		text-align: left;
	}
	#profile .contents p.pic img {
		width: 188px;
		height: 188px;
	}
	#profile .contents p.name {
		font-size:24px;
		text-align: left;
		margin: 20px 0 15px;
	}
	#profile .contents p.position {
		font-size:16px;
	}
	#profile .contents p.profile {
		font-size:16px;
	}
	#profile .contents p.web {
		font-size:16px;
	}
}


/*ページトップ */
#pageTop {
	position: fixed;
	bottom: 10px;
	left: 45%;
	z-index: 99999;
	}
	#pageTop a {
		display: block;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		background-color: #333;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
	}
	#pageTop a:hover {
		text-decoration: none;
		opacity: 0.7;
	}
	#pageTop a img {
		padding-top: 5px;
	}

/* 480px～ */
@media screen and (min-width: 480px) { 
#pageTop a {
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: block;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	background-color: #333;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	}
}



/*フッタ */
footer {
	min-width: 100%;
	overflow: hidden;
	background: #f0f3f5;
	padding: 20px 0px 60px;
	margin-top: 0px;
	font-size: 11px;
	}
	footer .footer-content-wrap {
		min-width: 96%;
		margin: auto;
		text-align: center;
		line-height: 2;
	}
	footer p.footer-logo {
		display: inline-block;
		text-align: center;
	}
	footer p.footer-logo img {
		width: 120px;
	}
	footer p.footer-copyright {
		font-size: 12px;
		line-height:1; 
		color: #555;
	}

/* 960px～ */
@media screen and (min-width: 960px) { 
footer {
	min-width: 1050px;
	overflow: hidden;
	background: #f0f3f5;
	padding: 15px 0px 40px;
	margin-top: 0px;
	font-size: 12px;
	}
	footer .footer-content-wrap {
		min-width: 1050px;
		margin: auto;
		text-align: center;
		line-height: 2;
	}
	footer p.footer-logo img {
		width: 150px;
		vertical-align: middle;
		margin: 10px auto 10px;
	}
	footer p.footer-copyright {
		font-size: 14px;
		color: #555;
	}
}