@charset 'utf-8'
img { border:none; vertical-align:bottom; line-height:0; font-size:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; } .clearfix { zoom:1; min-height: 1px; } .clearfix:after { content: ''; display: block; clear: both; height: 0; visibility: hidden; font-size: 0.1em; line-height: 0; } .clearboth { clear: both; height: 1px; }
a { text-decoration: none; font: inherit; color: inherit; }
.nopc { display: none; }
.nosp { display: inline-block; }
.bold { font-weight: 500; }
.subBox { padding: 72px 0 96px; }

#prj21 { width: 100%; min-width: 1200px; }
#prj21 h1 { font: 500 2.4rem/1.5 'Noto Sans JP'; text-align: center; }
#prj21 h1 span { display: block; font-size: 85%; }
#prj21 h2 { font: 400 3.2rem/1.6 'Noto Sans JP'; color: #1d1d60; text-align: center; }
#prj21 h2::after {
	content: ''; display: block; width: 80px; height: 6px; margin: 6px auto 36px;
	border-bottom: solid 6px #f7bf12;
}
#prj21 h3 {
	margin: 0 0 16px; padding: 0 0 10px; border-bottom: solid 4px #1d1d60;
	font: 500 2.8rem/1.6 'Noto Sans JP'; color: #1d1d60;
}
#prj21 h3 span { display: block; font-size: 90%; }
#prj21 h4 { font: 500 2.0rem/1.6 'Noto Sans JP'; color: #1d1d60; }
#prj21 h5 { font: 500 2.2rem/1.6 'Noto Sans JP'; margin: 0 0 20px; }
#prj21 h6 { font: 400 1.8rem/1.6 'Noto Sans JP'; text-align: center; margin: 0 0 16px; }
#prj21 a:hover { opacity: 0.8; filter: alpha(opacity=0.8); }
#prj21 * { box-sizing: border-box; letter-spacing: 0.1em; }

.mov { position: relative; width: 100%; height: 0; padding: 0 0 56.25%; overflow: hidden; }
.mov.nxt { margin: 64px 0 0; }
.mov iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width:749px) {
	.nosp { display: none; }
	.nopc { display: inline-block; }
	.subBox { padding: 48px 0 64px; }

	#prj21 { min-width: 100%; }
	#prj21 h1 { padding: 64px 0 0; font: 500 2.0rem/1.5 'Noto Sans JP'; }
	#prj21 h2 { font: 400 2.4rem/1.4 'Noto Sans JP'; }
	#prj21 h2::after { margin: 6px auto 24px; }
	#prj21 h3 { font: 500 2.2rem/1.6 'Noto Sans JP'; }
	#prj21 h4 { font: 500 1.8rem/1.5 'Noto Sans JP'; }
	#prj21 h5 { font: 500 1.6rem/1.5 'Noto Sans JP'; margin: 0 0 12px; }
	#prj21 h6 { font: 400 1.4rem/1.5 'Noto Sans JP'; }

	.mov.nxt { margin: 24px 0 0; }
}

/* ---------------------------------------------------------------------------------
   top
--------------------------------------------------------------------------------- */

.main {
	padding: 60px 0 80px; color: #1d1d60;
	background: url(../img/main.jpg) top center no-repeat; background-size: auto 100%;
}
.main .box {
	width: 1000px; margin: 0 auto; padding: 60px 40px; background: rgba(255,255,255,.95);
	border-radius: 10px; 
}
.main .title {
	display: flex; margin: 0 0 40px; padding: 0 0 30px; border-bottom: solid 4px #1d1d60;
	justify-content: space-between; align-items: center; 
}
.main .box p { font: 500 1.8rem/2.0 'Noto Sans JP'; letter-spacing: 0.05em !important; }
.main .news { margin: 36px 0 0; padding: 20px 30px 30px; border: solid 1px #000; color: #000; }
.main .news dt, .main .news dd { font: 400 1.6rem/1.6 'Noto Sans JP'; }
.main .news dd { margin: -1.6em 0 10px 9em; }
.main .news a { border-bottom: dotted 1px #000; }

.info { font: 400 1.8rem/1.6 'Noto Sans JP'; padding: 0 0 36px; text-align: center; }

@media screen and (max-width:749px) {
	.main { padding: 36px 0 64px; }
	.main .box { width: 90%; padding: 36px 24px; }
	.main .title { display: block; position: relative; margin: 0 0 24px; padding: 0 0 16px; }
	.main .box p { font: 500 1.5rem/1.8 'Noto Sans JP'; }
	.main .title p { position: absolute; top: 0; width: 50%; }
	.main .title p:first-of-type { left: 0; }
	.main .title p:last-of-type { right: 0; }
	.main .news { margin: 24px 0 0; padding: 12px 16px 1px; }
	.main .news dt, .main .news dd { font: 400 1.3rem/1.6 'Noto Sans JP'; }
	.main .news dd { margin: 0 0 12px; }

	.info { font: 400 1.4rem/1.6 'Noto Sans JP'; padding: 0 0 16px; text-align: left; }
}

.navi {
	width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap;
	justify-content: space-between;
}
.navi li {
	position: relative; width: 490px; margin: 0 0 24px;
	border: solid 3px #1d1d60; border-radius: 12px; background: #fff;
}
.navi li h4 {
	margin: 0; padding: 20px 0; background: url(../img/base_navi.png) center center no-repeat;
	background-size: 100% auto; text-align: center; border-radius: 10px 10px 0 0;
}
.navi li h4 span { display: block; font-size: 90%; font-weight: 500; }
.navi li h4 .date { margin: 12px 0 0; }
.navi li .cs {
	display: block; width: 90%; margin: 0 auto; padding: 0; background: #d2d3d8; color: #1d1d60;
	border-radius: 6px; font: 400 1.8rem/3.0 'Noto Sans JP'; text-align: center;
}
.navi li a {
	display: block; width: 90%; margin: 0 auto; background: #1d1d60; color: #f7bf12;
	border-radius: 6px; font: 400 1.8rem/3.0 'Noto Sans JP'; text-align: center;
}
.navi li a::after { content: '►'; display: inline-block; margin-left: 10px; }

@media screen and (min-width:750px) {
	.navi li p { padding: 20px 20px 96px; font: 400 1.5rem/1.6 'Noto Sans JP'; }
	.navi li .cs, .navi li a {
		position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
	}
}
@media screen and (max-width:749px) {
	.navi { display: block; width: 90%; }
	.navi li { width: 100%; margin: 0 0 24px; padding: 0 0 16px; }
	.navi li h4 { padding: 12px 0; }
	.navi li p { padding: 12px 12px 16px; font: 400 1.4rem/1.6 'Noto Sans JP'; }
}

/* ---------------------------------------------------------------------------------
   area
--------------------------------------------------------------------------------- */

.head {
	padding: 60px 0 80px; color: #1d1d60;
	background: url(../img/main.jpg) center center no-repeat; background-size: 100% auto;
}
.head .box {
	display: flex; width: 1000px; margin: 0 auto; padding: 60px 40px;
	background: rgba(255,255,255,.95); border-radius: 10px;
	justify-content: space-between; align-items: center;
}

@media screen and (max-width:749px) {
	.head { padding: 36px 0 64px; background-size: auto 100%; }
	.head .box { display: block; position: relative; width: 90%; padding: 36px 24px; }
	.head .box p { position: absolute; top: 36px; width: 50%; text-align: center; }
	.head .box p:first-of-type { left: 0; }
	.head .box p:last-of-type { right: 0; }
}

.area {
	display: flex; align-items: center; border: solid 3px #1d1d60; border-radius: 10px;
	background: linear-gradient(to right, #f7bf12 50%, #fff 50%);
}
.area li:first-child { width: 500px; }
.area li:last-child { width: 500px; padding: 30px 40px; }
.area li p { font: 400 1.6rem/1.8 'Noto Sans JP'; }

@media screen and (max-width:749px) {
	.area { display: block; background: #fff; }
	.area li:first-child { width: 100%; border-radius: 7px 7px 0 0; background: #f7bf12; }
	.area li:last-child { width: 100%; padding: 24px 4%; }
	.area li p { font: 400 1.5rem/1.8 'Noto Sans JP'; }
}

.menu { display: flex; justify-content: space-between; margin: 64px 0 0; text-align: center; }
.menu a {
	display: block; width: 300px; padding: 16px 0; border: solid 3px #1d1d60;
	border-radius: 6px; font: 500 1.8rem/1.4 'Noto Sans JP'; color: #1d1d60; 
}
.menu a::after { content: '▼'; display: block; margin: 0 auto; color: #f8bf00; }

@media screen and (max-width:749px) {
	.menu { margin: 36px 0 0; }
	.menu a { width: 32%; padding: 10px 0; font: 500 1.4rem/1.4 'Noto Sans JP'; }
}

/* ---------------------------------------------------------------------------------
   about
--------------------------------------------------------------------------------- */

#intro ul:last-of-type { margin: 0; }
#intro li { width: 490px; }
#intro li p { font: 400 1.6rem/1.8 'Noto Sans JP'; }
.lside { display: flex; justify-content: space-between; margin: 0 0 64px; }
.rside li { float: right; margin: 0 0 64px; }
.rside li:first-child { margin-left: 20px; }

@media screen and (max-width:749px) {
	#intro li { width: 100%; }
	#intro li p { font: 400 1.3rem/1.6 'Noto Sans JP'; }
	.lside { display: block; margin: 0 0 36px; }
	.rside li { float: none; margin: 0 0 36px; }
	.lside li:first-child, .rside li:first-child { margin: 0 0 16px; }
}

/* ---------------------------------------------------------------------------------
   ondemand
--------------------------------------------------------------------------------- */

#vod .detail { padding: 16px 0 64px; }
#vod .detail p { margin: 12px 0 0; font: 400 1.6rem/1.6 'Noto Sans JP'; }

@media screen and (max-width:749px) {
	#vod .detail { padding: 12px 0 36px; }
	#vod .detail p { font: 400 1.5rem/1.5 'Noto Sans JP'; }
}

/* ---------------------------------------------------------------------------------
   area sub navigation
--------------------------------------------------------------------------------- */

.snavi { width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; }
.snavi li {
	width: 235px; padding: 0 0 20px; border: solid 3px #1d1d60; border-radius: 12px;
	background: #fff; text-align: center;
}
.snavi li a { display: block; }
.snavi li h4 {
	margin: 0 0 20px; padding: 20px 0; border-radius: 10px 10px 0 0;
	background: url(../img/base_navi.png) center center no-repeat; background-size: 100% auto; 
}
.snavi li h4 span { display: block; font-size: 90%; font-weight: 500; }
.snavi li h4 .date { margin: 12px 0 0; }
.snavi li p { display: block; color: #1d1d60; font: 400 1.6rem/1.6 'Noto Sans JP'; }
.snavi li .cs { display: block; font: 100 1.6rem/1.6 'Noto Sans JP'; }
.snavi li p::after { content: '►'; display: inline-block; margin-left: 10px; }

.back21 {
	display: block; width: 1000px; margin: 16px auto 0; border: solid 3px #1d1d60;
	border-radius: 12px; background: #fff; text-align: center; color: #1d1d60;
	font: 400 1.6rem/3.0 'Noto Sans JP';
}
.back21::after { content: '►'; display: inline-block; margin-left: 10px; }

@media screen and (max-width:749px) {
	.snavi { width: 90%; flex-wrap: wrap; }
	.snavi li { width: 49%; padding: 0 0 16px; margin: 0 0 12px; }
	.snavi li h4 { margin: 0 0 16px; padding: 12px 0; }
	.snavi li p { font: 400 1.4rem/1.6 'Noto Sans JP'; }
	.snavi li .cs { font: 100 1.4rem/1.6 'Noto Sans JP'; }
	.back21 { width: 90%; border-radius: 6px; font: 400 1.4rem/2.8 'Noto Sans JP'; }
}

/* ---------------------------------------------------------------------------------
   osaka
--------------------------------------------------------------------------------- */

.menu.teaser a { width: 480px; }

@media screen and (max-width:749px) {
	.menu.teaser a { width: 48%; }
}

/* ---------------------------------------------------------------------------------
   logo
--------------------------------------------------------------------------------- */

[class*="lg-"] {
	display: block; height: 0; margin: 0 auto;
	background: url(../img/logo.png) top left no-repeat;
	vertical-align: baseline; overflow: hidden; text-indent: 100%; white-space: nowrap;
}
.lg-jc { width:140px; height:49px; background-position: 0 0; background-size: 100% auto; }
.lg-ac { width:140px; height:49px; background-position: 0 -49px; background-size: 100% auto; }