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;
}

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

/* メインビジュアル */
#mainV {
	padding: 0;
	}
#mainV {
	min-width: 100%;
	overflow: hidden;
	background: #f63550;
	}
	#mainV .contents {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	#mainV .contents div.main {
		margin: 0px;
		padding: 0px;
		text-align: center;
		width: 100%;
	}
	#mainV .contents div.main h1 {
		margin: 0px;
		padding: 0px;
	}
	#mainV .contents div.main h1 img {
		width: 100%;
		height: auto;
		vertical-align:top;
	}
/* 960px～ */
@media screen and (min-width: 960px) { 
#mainV {
	min-width: 1050px;
	overflow: hidden;
	background: #f63550 url(../images/bg_main.webp) center center repeat;
	}
	#mainV .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
	}
	#mainV .contents div.main {
		margin:20px 0 0;
	}
}

/* 動画ブロック */
#video {
	padding: 1em 0 1em;
	min-width: 100%;
	overflow: hidden;
	background-color: #fff;
	}
	#video .contents {
		width: 96%;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#video .contents h2 {
		text-align: center;
	}
	#video .contents h2 img.type01 {
		width: 95%;
		height: auto;
		margin-bottom: 20px;
	}
	#video .contents h2 img.type02 {
		width: 90%;
		height: auto;
		margin-bottom: 10px;
	}
	#video .contents h3 {
		text-align: center;
		margin: 35px auto 5px;
	}
	#video .contents h3 img {
		width: 95%;
		height: auto;
	}
	#video .contents iframe.video {
		width: 320px;
		height: 180px;
		margin: 5px 0 7px;
		background: #fff;
		box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .3);
	}
	#video .contents p.notes01 {
		font-size:14px;
		line-height: 1.4;
		font-weight:bold;
		text-align: left;
		margin: 15px 10px 45px;
	}
	#video .contents p.notes02 {
		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.type01 {
		width: 90%;
		margin-bottom: 30px;
	}
	#video .contents h2 img.type02 {
		width: 85%;
		margin-bottom: 20px;
	}
	#video .contents h3 img {
		width: 75%;
	}
	#video .contents iframe.video {
		width: 480px;
		height: 270px;
	}
	#video .contents p.notes01 {
		margin-bottom: 50px;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
#video {
	padding: 2em 0 3em;
	min-width: 1050px;
	overflow: hidden;
	}
	#video .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#video .contents h2 {
		text-align: center;
	}
	#video .contents h2 img.type01 {
		width: 934px;
		height: auto;
		margin-bottom: 50px;
	}
	#video .contents h2 img.type02 {
		width: 750px;
		height: auto;
		margin-bottom: 20px;
	}
	#video .contents h3 {
		text-align: center;
		margin: 70px auto 5px;
	}
	#video .contents h3 img {
		width: 644px;
	}
	#video .contents iframe.video {
		width: 640px;
		height: 360px;
		margin: 5px 0 10px;
	}
	#video .contents p.notes01 {
		font-size:16px;
		margin: 20px auto 0;
		width: 80%;
	}
	#video .contents p.notes02 {
		font-size:15px;
		margin: 10px auto 60px;
	}
}

/* 著者紹介 */
#profile {
	padding: 2em 0 2em;
	min-width: 100%;
	overflow: hidden;
	background-color: #ffcc00;
	background-image: linear-gradient(90deg, #ffe680 20%, transparent 30%, transparent 100%);
	background-position: left top;
	background-size: 3px 0.5px;
	background-repeat: repeat;
	}
	#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:20px;
		font-weight:bold;
		text-align: center;
		margin: 20px 0 8px;
	}
	#profile .contents p.name span {
		font-size:60%;
		padding-left: 5px;
	}
	#profile .contents p.position {
		font-size:16px;
		font-weight:normal;
		text-align: center;
		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;
	}
/* 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:20px;
		font-weight:bold;
		text-align: left;
		margin: 20px 0 8px;
	}
	#profile .contents p.name span {
		font-size:60%;
		padding-left: 5px;
	}
	#profile .contents p.position {
		font-size:16px;
		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;
	}
}

/*ページトップ */
#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～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
#pageTop {
	position: fixed;
	bottom: 10px;
	left: 47%;
	z-index: 99999;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
	#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: 11px;
		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: 12px;
		color: #555;
	}
}