
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:#1a1a1a;
	font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', 'ヒラギノ角ゴ 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:#D70B24;
}

a:link {color: #1070C5; text-decoration: none; }
a:visited { color: #1070C5; text-decoration: none; }
a:hover { color: #0087FF; text-decoration: underline; }
a:active { color: #1070C5; text-decoration: none; }
a:hover img { transition:0.5s; opacity: 0.8; filter:alpha(opacity=80); -ms-filter:"alpha(opacity=80)";}


/*** 要素出し分け ***/
.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: inline;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
.sp {
	display: none;
	}
.tb {
	display: inline;
	}
.pc {
	display: inline;
	}
}

/*** 見出しh2 ***/
	h2 {
		font-size:26px;
		line-height:1.4em;
		font-weight:600;
		margin: 0 auto 30px;
		padding: 0 35px;
		display: inline-block;
		position: relative;
        display: block;
	}
	h2 span {
		font-size: 16px;
		color: #15b29a;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
	h2 {
		font-size:34px;
		line-height:1.4em;
		margin-bottom:40px;
		padding: 0 40px;
	}
	h2 span {
		font-size: 20px;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
	h2 {
		font-size:42px;
		line-height:1.4em;
		margin-bottom: 50px;
		padding: 0 60px;
	}
	h2 span {
		font-size: 26px;
	}
}

/*** ヘッダ ***/
header {
	min-width: 100%;
	overflow: hidden;
	background:rgba(255,255,255,1);
	padding: 15px 0px 32px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
	}
	header #block {
		width: 100%;
		margin: 0 auto;
	}
	/*** ハンバーガーメニュー ***/
	header #hamburger .btn-gNav{
	  position: fixed;
	  top: 13px;
	  right: 20px;
	  width: 30px;
	  height: 24px;
	  z-index: 3;
	  box-sizing: border-box;
	  cursor: pointer;
	  -webkit-transition: all 400ms;
	  transition: all 400ms;
	}
	header #hamburger .btn-gNav span{
	  position: absolute;
	  width: 100%;
	  height: 4px;
	  background: #1a9acb;
	  border-radius: 10px;
	  -webkit-transition: all 400ms;
	  transition: all 400ms;
	}
	header #hamburger .btn-gNav span:nth-child(1) {
	  top:0;
	}
	header #hamburger .btn-gNav span:nth-child(2) {
	  top:10px;
	}
	header #hamburger .btn-gNav span:nth-child(3) {
	  top:20px;
	}
	header #hamburger .btn-gNav.open span:nth-child(1){
	  background: #0186d1;
	  top: 8px;
	  -webkit-transform: rotate(-45deg);
	  -moz-transform   : rotate(-45deg);
	  transform        : rotate(-45deg);
	}
	header #hamburger .btn-gNav.open span:nth-child(2),#hamburger .btn-gNav.open span:nth-child(3){
	  top: 8px;
	  background :#0186d1;
	  -webkit-transform: rotate(45deg);
	  -moz-transform   : rotate(45deg);
	  transform        : rotate(45deg);
	}
	header #gNav{
	  position: fixed;
	  top: 0;
	  right: -100%;
	  width: 100%;
	  height: 100%;
	  background: #0186d1;
	  font-size: 16px;
	  box-sizing: border-box;
	  z-index: 2;
	  margin-top: 47px;
	  padding: 0px;
	  transition: .3s;
	}
	header #gNav.open{
	  right: 0px;
	}
	header #gNav .gNav-menu{
	  width: 80%;
	  height:100%;
	  padding: 10px 30px 0;
	  background: #0186d1;
	  margin: 0 auto;
	  display: flex;
	  flex-direction: column;
	  text-align: center;
	  justify-content: top;
	}
	header #gNav .gNav-menu li{
	  font-size:18px;
	  line-height:1.4em;
	  font-weight:600;
	  display: block;
	  padding : 18px 15px;
	  border-bottom: 1px solid #fff;
	}
	header #gNav .gNav-menu li a{
	  color: #fff;
	  text-decoration: none;
	  display: block;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
header {
	background:rgba(255,255,255,0);
	}
	header #block {
		display: none;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
header {
	background:rgba(255,255,255,0);
	}
	header #block {
		display: none;
	}
}

/*** メインビジュアル ***/
#mainV {
	padding: 0em 0 1em;
	min-width: 100%;
	overflow: hidden;
	background: #040000;
	}
	#mainV .contents {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	#mainV .contents h1 {
		text-align: center;
		margin-top: 55px;
	}
	#mainV .contents h1 img {
		width: 100%;
		height: auto;
	}
	#mainV .contents h1 img.box_in {
		width: 90%;
		height: auto;
	}
	#mainV .contents p.sp {
		width: 90%;
		margin: 20px auto 5px;
		color: #fff;
		font-size:15px;
		line-height:1.6em;
		font-weight:600;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
#mainV {
	min-width: 100%;
	padding-bottom: 1.5em;
	}
	#mainV .contents h1 {
		margin-top: 40px;
	}
	#mainV .contents h1 img {
		width: 80%;
		height: auto;
	}
	#mainV .contents p.tb {
		width: 90%;
		margin: 30px auto 5px;
		color: #fff;
		font-size:15px;
		line-height:1.6em;
		font-weight:600;
		display: block;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
#mainV {
	min-width: 1050px;
	padding-bottom: 1.5em;
	}
	#mainV .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
	}
	#mainV .contents h1 {
		margin-top: 25px;
	}
	#mainV .contents h1 img {
		width:980px;
		height: auto;
	}
	#mainV .contents p.pc {
		width: 92%;
		margin: 30px auto 10px;
		color: #fff;
		font-size:16px;
		line-height:1.6em;
		font-weight:600;
		display: block;
	}
}

/*** 目次ナビ ***/
#toc {
	display: none;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
#toc {
	display: inline-block;
	min-width: 100%;
	overflow: hidden;
	background: #0186d1;
	padding: 1em 0 1em;
	}
	#toc .contents {
		width: 96%;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#toc .contents .container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	#toc .contents .container .item {
		width: 20%;
	}
	#toc .contents .container .button {
		display: inline-block;
		font-size: 15px;
		line-height:1.4em;
		font-weight:600;
		color: #0186d1;
		background-color: #fff;
		border: 2px solid #fff;
		text-decoration: none;
		border-radius: 20px;
		text-align: center;
		padding: 8px 5px;
		margin: 5px 2px;
	}
	#toc .contents .container .button:hover {
		color: #fff;
		background-color: #040000;
		border: 2px solid #040000;
	}
	#toc .contents .container .button_on {
		display: inline-block;
		font-size: 15px;
		line-height:1.4em;
		font-weight:600;
		color: #fff;
		background-color: #040000;
		border: 2px solid #040000;
		text-decoration: none;
		border-radius: 20px;
		text-align: center;
		padding: 8px 5px;
		margin: 5px 2px;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
#toc {
	display: inline-block;
	min-width: 100%;
	overflow: hidden;
	background: #0186d1;
	padding: 1em 0 1em;
	}
	#toc .contents {
		width: 850px;
		overflow: hidden;
		margin: 0 auto;
	}
	#toc .contents .container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	#toc .contents .container .item {
		width: 20%;
	}
	#toc .contents .container .button {
		display: inline-block;
		font-size: 16px;
		line-height:1.4em;
		font-weight:600;
		color: #0186d1;
		background-color: #fff;
		border: 2px solid #fff;
		text-decoration: none;
		border-radius: 30px;
		text-align: center;
		padding: 12px 9px;
		margin: 5px 1px;
	}
	#toc .contents .container .button:hover {
		color: #fff;
		background-color: #040000;
		border: 2px solid #040000;
	}
	#toc .contents .container .button_on {
		display: inline-block;
		font-size: 16px;
		line-height:1.4em;
		font-weight:600;
		color: #fff;
		background-color: #040000;
		border: 2px solid #040000;
		text-decoration: none;
		border-radius: 30px;
		text-align: center;
		padding: 12px 9px;
		margin: 5px 1px;
	}
}

/*** 目次一覧 ***/
#list {
	padding: 2em 0 3em;
	min-width: 100%;
	overflow: hidden;
	}
	#list .contents {
		width: 90%;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#list .contents div.list_wrap {
		border-bottom: 1px solid #D9D9D9;
	}
	#list .contents div.list_wrap div.list_unit {
		flex-direction: column;
		padding: 8px 0 8px;
		border-top: 1px solid #D9D9D9;
		position: relative;
	}
	#list .contents div.list_wrap div.list_unit:before {
		content: "";
		position: absolute;
		display: inline-block;
		background-image: url(../images/icon_arw.png);
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: 0px;
		top: 23%;
		right: 5px;
		width: 30px;
		height: 30px;
	}
	#list .contents div.list_wrap div.list_unit:hover {
		background-color: #e7f8ff;
	}
	#list .contents div.list_wrap div.list_unit div {
		flex: 1;
		text-align: left;
	}
	#list .contents div.list_wrap div.list_unit h3 {
		font-size:18px;
		line-height:1.6em;
		font-weight:600;
		margin: 5px 0 5px 10px;
	}
	#list .contents a:link {
		color: #1a1a1a; 
		text-decoration: none; 
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
#list {
	padding: 3em 0 3em;
	}
	#list .contents div.list_wrap {
		margin: 20px 5px 20px;
		padding: 0px;
	}
	#list .contents div.list_wrap div.list_unit:before {
		top: 24%;
		right: 10px;
		width: 38px;
		height: 38px;
	}
	#list .contents div.list_wrap div.list_unit h3 {
		margin: 10px 0 10px 10px;
		font-size:24px;
	}
}

/* 960px～ */
@media screen and (min-width: 960px) { 
#list {
	padding: 3.5em 0 6em;
	min-width: 1050px;
	overflow: hidden;
	}
	#list .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
	}
	#list .contents div.list_wrap {
		width: 680px;
		margin: 0 auto;
	}
	#list .contents div.list_wrap div.list_unit:before {
		top: 24%;
		right: 10px;
		width: 40px;
		height: 40px;
	}
	#list .contents div.list_wrap div.list_unit h3 {
		margin: 10px 0 10px 10px;
		font-size:26px;
	}
}


/*** 音源一覧 ***/
#list_audio {
	padding: 2em 0 3em;
	min-width: 100%;
	overflow: hidden;
	}
	#list_audio .contents {
		width: 90%;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	#list_audio .contents .list {
		text-align: right;
		margin: 0 0 10px;
	}
	#list_audio .contents .list2 {
		text-align: right;
		margin: 10px 0 0;
	}
	#list_audio .contents .button_list {
		display: inline-block;
		font-size: 14px;
		line-height:1.4em;
		font-weight:600;
		color: #040000;
		background-color: #c8e8ff;
		border: 2px solid #040000;
		text-decoration: none;
		border-radius: 20px;
		padding: 6px 12px;
	}
	#list_audio .contents .button_list:hover {
		color: #fff;
		background-color: #040000;
		border: 2px solid #040000;
	}
	#list_audio .contents div.list_wrap {
		border-bottom: 1px solid #D9D9D9;
	}
	#list_audio .contents div.list_wrap div.list_unit {
		flex-direction: column;
		padding: 8px 0 8px;
		border-top: 1px solid #D9D9D9;
	}
	#list_audio .contents div.list_wrap div.list_unit div {
		flex: 1;
		text-align: center;
	}
	#list_audio .contents p.label {
		font-size: 15px;
		line-height:1.6em;
		font-weight:600;
		color: #fff;
		border: 1px solid #0186d1;
		background-color: #0186d1;
		border-radius: 20px;
		padding: 2px 15px;
		margin: 8px 0 0;
		display: inline-block;
	}
	#list_audio .contents div.list_wrap div.list_unit h3 {
		font-size:18px;
		line-height:1.6em;
		color: #0186d1;
		font-weight:600;
		margin: 5px 0 15px;
	}
	#list_audio .contents div.list_wrap div.list_unit h3 span {
		color: #1a1a1a;
	}
	#list_audio .contents div.list_wrap div.list_unit audio {
		margin-bottom: 10px;
	}

/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
#list_audio {
	padding: 3em 0 3em;
	}
	#list_audio .contents div.list_wrap {
		margin: 15px 5px 15px;
		padding: 0px;
	}
	#list_audio .contents p.label {
		font-size: 18px;
		padding: 2px 18px;
	}
	#list_audio .contents div.list_wrap div.list_unit h3 {
		font-size:24px;
	}
}

/* 960px～ */
@media screen and (min-width: 960px) { 
#list_audio {
	padding: 3.5em 0 6em;
	min-width: 1050px;
	overflow: hidden;
	}
	#list_audio .contents {
		width: 1050px;
		overflow: hidden;
		margin: 0 auto;
	}
	#list_audio .contents .list {
		width: 730px;
		margin: 0 auto 15px;
	}
	#list_audio .contents .list2 {
		width: 730px;
		margin: 15px auto 0;
	}
	#list_audio .contents .button_list {
		font-size: 15px;
	}
	#list_audio .contents div.list_wrap {
		width: 730px;
		margin: 0 auto;
	}
	#list_audio .contents p.label {
		font-size: 20px;
		padding: 2px 20px;
	}
	#list_audio .contents div.list_wrap div.list_unit h3 {
		font-size:26px;
	}
}


/*** フッタ ***/
footer {
	min-width: 100%;
	overflow: hidden;
	background: #F6F6F6;
	padding: 20px 0px 60px;
	margin: 0;
	}
	footer .footer-content-wrap {
		width: 96%;
		margin: auto;
		text-align: center;
	}
	footer p.footer-logo img {
		width: 120px;
		margin-bottom: 10px;
	}
	footer p.footer-copyright {
		font-size: 11px;
		color: #555;
	}
/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
footer {
	padding: 30px 0px 70px;
	}
	footer p.footer-logo img {
		width: 150px;
		margin-bottom: 15px;
	}
	footer p.footer-copyright {
		font-size: 12px;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
footer {
	min-width: 1050px;
	overflow: hidden;
	padding: 40px 0px 40px;
	}
	footer .footer-content-wrap {
		min-width: 980px;
		margin: auto;
		text-align: center;
	}
	footer p.footer-logo img {
		width: 160px;
		margin-bottom: 20px;
	}
	footer p.footer-copyright {
		font-size: 12px;
	}
}

/*ページトップ */
#pageTop {
	position: fixed;
	bottom: 10px;
	left: 45%;
	z-index: 99999;
	}
	#pageTop #pagetop-icon {
		display: block;
		border-radius: 50%;
		width: 42px;
		height: 42px;
		background:rgba(0,0,0,0.4);
		text-decoration: none;
		text-align: center;
	}
	#pageTop #pagetop-icon:hover {
		text-decoration: none;
		opacity: 0.7;
	}
	#pagetop-icon::before, #pagetop-icon::after {
		width: 42px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	#pagetop-icon::before {
		width: 42px;
		height: 42px;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		background:rgba(0,0,0,0.4);
	}
	#pagetop-icon::after {
		top: 3px;
		left: 15px;
		width: 9px;
		height: 9px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
/* 480px～959px */
@media screen and (min-width: 480px) and (max-width: 959px) { 
#pageTop {
	left: 47%;
	}
	#pageTop #pagetop-icon {
		width: 50px;
		height: 50px;
	}
	#pagetop-icon::before, #pagetop-icon::after {
		width: 50px;
	}
	#pagetop-icon::before {
		width: 50px;
		height: 50px;
	}
	#pagetop-icon::after {
		top: 3px;
		left: 18px;
		width: 11px;
		height: 11px;
	}
}
/* 960px～ */
@media screen and (min-width: 960px) { 
#pageTop {
	left: 93%;
	bottom: 50px;
	}
	#pageTop #pagetop-icon {
		width: 58px;
		height: 58px;
	}
	#pagetop-icon::before, #pagetop-icon::after {
		width: 58px;
	}
	#pagetop-icon::before {
		width: 58px;
		height: 58px;
	}
	#pagetop-icon::after {
		top: 3px;
		left: 21px;
		width: 12px;
		height: 12px;
	}
}

