@charset "utf-8";
/* ==========================================================
 背景色変更
========================================================== */
body {
  background-color: #000;
  color: #fff;
}
.hero-program-01 {
  background-color: #000;
}
/* 背景色を指定 */
.contents {
  background: #000;
}
/* 背景黒の時は要素間の罫線消した方が良いかも */
/*
		.sec-cmn-01 + .sec-cmn-01 {
			border-top: none;
		}

		.area-brd {
			border-top: none;
			border-bottom: none;
		}
		*/
/* コンテンツ背景色変更（コンテンツ全面の場合）
------------------------------------------------ */
.contents-main .container {
  background: #000;
}
.ttl-cmn-01:before {
  background-color: #f4007e;
}
/*
.s-bg-gray .container {
  background-color: #ededed;
}

.container.bnr-footer-wrap,
.container.sec-related-programs,
.container.related-info-wrap {
  background-color: ##fff;
}

.container.bnr-footer-wrap .ttl-cmn-01,
.container.sec-related-programs .ttl-cmn-01,
.container.related-info-wrap .ttl-cmn-01 {
	color: #000;
}

.list-cmn-btn-01 {
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 767px) {

}
*/
/* コンテンツ背景色変更（コンテンツ白・縁カラーの場合）
------------------------------------------------ */
/*
.contents-main .container {
	padding-right: 30px;
	padding-left: 30px;
	background: #FFF;
}

.s-bg-gray .container {
  background-color: #ededed;
}

.container.bnr-footer-wrap,
.container.sec-related-programs,
.container.related-info-wrap {
  background-color: #F8E7EF;
}

.container.bnr-footer-wrap .ttl-cmn-01,
.container.sec-related-programs .ttl-cmn-01,
.container.related-info-wrap .ttl-cmn-01 {
	color: #000;
}

.s-bg-gray {
	max-width: 1024px;
	margin: 0 auto;
}

.list-cmn-btn-01 {
	max-width: 1024px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	.container.are-sns-share-wrap {
		width: 95%;
		margin: 0 auto;
	}
	.contents-main .container {
		width: 95%;
		padding-right: 15px;
		padding-left: 15px;
		background: #fff;
	}
	.s-bg-gray .container {
		background-color: #ededed;
	}
	.s-bg-gray + .container {
		width: 95%;
		margin: 0 auto;
	}
	.contents-main .container-sp-no {
		padding-right: 0;
		padding-left: 0;
  }
	.s-bg-gray {
		width: 95%;
		margin: 0 auto;
	}
	.list-cmn-btn-01 {
		width: 95%;
		margin: 0 auto;
	}
}
*/
/* news.htmlインクルード部分（背景色変える場合）
----------------------------------------------- */
/*
.sec-cmn-news-01 .container {
  background-color: #333;
}

.sec-cmn-01 {
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 767px) {
	.sec-cmn-news-01 .container {
		background-color: #333;
	}

	.sec-cmn-01 {
		margin-left: auto;
		margin-right: auto;
	}
}
*/
/* ==========================================================
 hero-cmn
========================================================== */
.hero-cmn-subpage {
  background: #000;
}
@media screen and (max-width: 767px) {
  .hero-cmn-subpage {
    background: #000;
  }
}
@media screen and (max-width: 768px) {
  img {
    width: 100%;
  }
}
.item a {
  color: #fff;
  text-decoration: underline;
  word-wrap: break-word;
}

/* ==========================================================
 contents
========================================================== */
.ttl-cmn-section {
  margin-bottom: 5px;
}
.ttl-cmn-01 {
  color: #fff;
  margin-bottom: 20px;
}
.ttl-cmn-02 {
  color: #fff;
}
.box-staff-01 {
  /*display: inline-flex;*/
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 1.1rem;
  text-align: left;
}
.box-staff-01 dl {
  overflow: hidden;
  margin: 0 0 1em 1em;
}
.box-staff-01 dl dt {
  width: 16%;
  float: left;
  font-weight: bold;
}
.box-staff-01 dl dd {
  width: 87%;
  float: left;
}
.txt-areafull {
  width: 100%;
  padding: 1rem;
}
.txt-para-01 span {
  /*	text-indent: -1em;
*/ display: inline-block;
	font-size: 1.2rem;
}
.photoArea1col {
  width: 500px;
  margin: 0 auto;
}
.photoArea2col {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}
.photoArea4col {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.photoArea4col figure {
  /* flex-basis: 50%; */
}
.photoSize {
  width: 490px;
  padding: 5px;
}
.photoSize02 {
  width: 380px;
}
.btopsInfo {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 1.1rem;
}
.btopsInfo dt {
  width: 200px;
}
.btopsInfo dd {
  width: 290px;
  color: #CC0000;
  font-weight: bold;
}
.spOnly {
  display: none;
}
.movieArea {
  	width: 100%;
    margin: 0 auto;
    padding: 1em;
}
/*.movieArea iframe {
  width: 960px;
  height: 540px;
}*/
.bnrArea {
 		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 800px;
 margin: 20px auto 0;
}
.bnrArea img {
  width: 90%;
  border-radius: 10px;
}
.subTitle {
  width: 400px;
}
.subTitle img {
  width: 100%;
}
.btnBox {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}
.btnBox img {
  width: 70%;
}
.center {
  text-align: center;
}
.pink {
  color: #ffa0e5;
}
.blue {
  color: #0066ff;
}
.orange {
  color: #ff9600;
}
.snsbox {
  border: 1px solid;
  padding: 10px;
  width: 100px;
  text-align: center;
  margin-bottom: 15px;
  border-radius: 5px;
}
.snsbox:hover {
  opacity: .8;
}
.box-staff-01 .name-01 {
  color: #fff;
}
dl {
  display: flex;
}
dt {
  width: 20%;
}
dd {
  width: 80%;
}
strong {
  font-weight: bold;
}
.bnrBox {
  text-align: center;
	padding: 1em;
}
@media screen and (max-width: 767px) {
  .photoArea1col, .photoArea2col {
    display: block;
  }
  .photoArea1col {
    width: 100%;
  }
  .photoArea2col {
    width: 100%;
  }
  .photoSize, .photoSize02 {
    width: 100%;
  }
  .box-staff-01 dl dt {
    width: 30%;
  }
  .box-staff-01 dl dd {
    width: 70%;
  }
  .picto img {
    width: 90%;
  }
  .btopsInfo dt {
    width: 100%;
  }
  .btopsInfo dd {
    width: 100%;
    color: #CC0000;
    font-weight: bold;
  }
  .photoSize_s {
    width: 63%;
    margin: 0 auto;
  }
  .spOnly {
    display: block;
  }
  .bnrArea {
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    margin: 20px auto 0;
  }
  .bnrArea li {
    margin: .5rem auto;
  }
  .bnrArea img {
    width: 100%;
    border-radius: 10px;
  }
  .subTitle {
    width: 70%;
  }
  .subTitle img {
    width: 100%;
  }
  .btnBox {
    width: 50%;
    margin: 0 auto;
    text-align: center;
  }
  .btnBox img {
    width: 100%;
  }
  dl {
    display: block;
  }
  dt {
    width: 100%;
    font-size: 12px;
  }
  dd {
    width: 100%;
    margin-bottom: 10px;
    font-size: 12px;
  }
  /*		.movieArea {
		width: 100%;
		margin: 0 auto;
		padding: 1rem;
	}

	.movieArea iframe {
		width: 320px;
		height: 180px;
	}
*/ .movieArea {
    width: 90%;
    margin: 20px auto 0;
  }
  .youtubeMovie {
    width: 100%;
    margin: 0px auto;
    text-align: center;
    padding-bottom: 56.25%;
    height: 0px;
    position: relative;
  }
  .youtubeMovie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
.txt-para-01 span {
font-size: 14px;
}

}