@charset "utf-8";

/*=====================================

responsive.css

=====================================*/


.forPC { display: block; }
.forSP { display: none; }

img.forPC { display: inline-block; }
img.forSP { display: none; }

br.forPC { display: inline; }
br.forSP { display: none; }

.headerSpBtn{
	display: none;
}
.headerSnsList{
	display: none;
}

/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/

/* SP layout
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.forPC { display: none; }
	.forSP { display: block; }

	img.forPC { display: none; }
	img.forSP { display: inline-block; }

	br.forPC { display: none; }
	br.forSP { display: inline; }

	.inner{
		width: auto;
		min-width: auto;
		box-sizing: border-box;
	}

	body {
		min-width: inherit;
		font-size: 1.2rem;
	}
	#wrapper{
		overflow: hidden;
	}
	header {
		position: fixed;
		background-color: #fff;
		z-index: 100001;
		width: 100%;
		height: 63px;
	}

	.headerLogoGroup {
		width: 30px;
		position: absolute;
		height: auto;
		left: 10px;
	}

	.headerLogo img {
		max-width: 60px;
	}
	.headerLogoGd {
		margin-bottom: 0px;
	}
	.headerLogo {
		text-align: center;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	main{
		padding-top: 103px;
	}
	main.indexTop{
		padding-top: 0;
	}
	.visualArea {
		padding-top: 63px;
		margin-left: -2%;
		margin-right: -2%;
	}
	/* headerSp
	-------------------------------------*/
	.headerSpBtn {
		position: absolute;
		top: 0;
		right: 28px;
		z-index: 3;
		width: 30px;
		height: 50px;
		cursor: pointer;
		padding: 15px 18px 15px 15px;
		box-sizing: content-box;
		z-index: 100001;
	}
	.headerSpBtn{
		display: block;
	}
	.headerSpBtn.open{
		background-color: transparent;
	}
	.headerSpBtn a{
		height: 100%;
		width: 100%;
		display: block;
	}
	.headerSpBtn,
	.headerSpBtn span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.headerSpBtn span {
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: #000;
	}

	.headerSpBtn span:nth-of-type(1) {
		top: 18px;
	}
	.headerSpBtn span:nth-of-type(2) {
		top: 27px;
	}
	.headerSpBtn span:nth-of-type(3) {
		top: 36px;
	}
	.headerSpBtn.open span:nth-of-type(1) {
		top: 27px;
		transform: rotate(35deg);
		margin-left: auto;
		margin-right: auto;
	}
	.headerSpBtn.open span:nth-of-type(2) {
		opacity: 0;
	}
	.headerSpBtn.open span:nth-of-type(3) {
		top: 27px;
		transform: rotate(-35deg);
		margin-left: auto;
		margin-right: auto;
	}

	.gNav {
		background: rgba(255,255,255,0.95);
		padding-top: 20px;
		padding-bottom: 20px;
		clear: both;
		display: none;
		position: fixed;
		width: 100vw;
		z-index: 2;
		height: auto;
		height: auto;
		padding-top: 70px;
		box-sizing: border-box;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.gNav ul {
		display: block;
		border: none;
	}
	.gNav li a {
		color: #555555;
		display: block;
		margin-left: 0;
		font-size: 1.6rem;
		padding: 15px;
	}
	.gNav li {
		width: 92%;
		text-align: center;
		border-left: none;
		border-bottom: solid 1px #808080;
		margin-left: 4%;
		margin-right: 4%;
		box-sizing: border-box;
	}

	.gNav ul li a span {
		font-family: 'Times New Roman';
		border-bottom: none;
		display: inline-block;
		float: left;
		margin-left: 21px;
	}
	
	.gNav ul li{
		border-right: none;
	}
	.gNav ul li a em {
		display: block;
		margin-top: 5px;
		font-size: 10px;
	}

	.bannerBox ul {
		display: grid;
		grid-template-columns: 100%;
		column-gap: 10%;
		row-gap: 10px;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px;
	}
	section {
		padding-bottom: 30px;
	}
	.rankingBox ul {
		display: grid;
		grid-template-columns: 48% 48%;
		row-gap: 30px;
		margin-bottom: 10px;
		column-gap: 4%;
	}
	section .inner{
		padding-left: 4%;
		padding-right: 4%;
	}
	.btnBox img {
		height: 28px;
		width: auto;
	}

	.btnBox{
		margin-bottom: 40px;
	}
	.label{
		padding-top: 0;
		padding-bottom: 0;
	}
	.movie3cBox.indexTop ul{
		display: block;
		margin-left: -5%;
		margin-right: -5%;
	}
	.movie3cBox.indexTop ul li{
		padding: 2%;
	}
	.media3cBox.indexTop ul{
		display: block;
		margin-left: -5%;
		margin-right: -5%;
	}
	.media3cBox.indexTop ul li{
		padding: 2%;
	}
	.media3cBox .label{
		margin-right: 5px;
	}

	.movie3cBox .label{
		margin-right: 5px;
	}
	.scheduleTextList dl {
		display: grid;
		grid-template-columns: 90px 1fr;
		column-gap: 30px;
		row-gap: 20px;
	}
	h2 {
		margin-bottom: 30px;
	}
	.scheduleTextList dd {
		font-size: 1.6rem;
	}
	.scheduleCallenderBox .youbi{
		font-size: 16px;
	}
	.access2c {
		display: grid;
		grid-template-columns: 40% 60%;
		width: 87%;
		margin-left: auto;
		margin-right: auto;
		column-gap: 6%;
	}
	section.bgLblue + section {
		padding-top: 60px;
	}
	.specialLabel{
		margin-bottom: 20px;
	}
	.specialLabel ul {
		display: grid;
		grid-template-columns: 48% 48%;
		column-gap: 4%;
		width: 100%;
		row-gap: 15px;
	}
	.staffProfileBox .snsList ul li {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.staffProfileBox .snsList ul{
		display: block;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.staffProfileBox .snsList ul li {
		display: inline-block;
		margin: 0px 5% 20px 5%;
		width: 23%;
		text-align: center;
	}
	.staffProfileBox {
		display: block;
	}
	.staffProfileBox{
		width: 100%;
		max-width: none;
	}
	.photoSlide{
		margin-left: -5%;
		margin-right: -5%;
	}
	.position {
		margin-bottom: 0;

	}
	.name{
		margin-bottom: 0;
	}
	.profileContents .name{
		display: inline-block;
		margin-right: 10px;
	}
	.profileContents .nameEn{
		display: inline-block;
	}
	.profileContents .icons{
		column-gap: 5px;
	}
	section.bgLblue {
		padding-top: 40px;
	}
	.movie3cBox ul li{
		padding: 0;
	}
	.movie3cBox ul{
		display: grid;
		grid-template-columns: 48% 48%;
		column-gap: 4%;
		row-gap: 30px;
	}
	.media3cBox ul li{
		padding: 0;
	}
	.media3cBox ul{
		display: grid;
		grid-template-columns: 48% 48%;
		column-gap: 4%;
		row-gap: 30px;
	}
	.nextMonthLink {
		max-width: 60px;
	}
	.scheduleBannerSlide .slick-prev {
		left: -10px;
	}
	.scheduleCallenderBox .boxInner {
		display: flex;
		align-items: center;
		padding: 45px 10px 10px 10px;
		position: relative;
		font-size: 0.9rem;
	}
	.scheduleCallenderBox .boxInner {
		display: flex;
		align-items: center;
		padding: 30px 5px 5px 5px;
		position: relative;
		font-size: 0.9rem;
	}
	.modaal-gallery-item img {
		max-height: none;
		max-width: 100%;
		width: auto !important;
	}
	.modaal-close{
		top: 80px;
	}
	.scheduleBannerSlide ul li {
		padding: 5px;
	}
	.aboutSection .lead {
		font-size: 1.5rem;
	}
	h3.aboutH {
		font-size: 1.8rem;
		padding-bottom: 8px;
	}
	.aboutSection h4 {
		font-size: 1.6rem;
		margin-bottom: 10px;
	}
	.aboutSection p {
		font-size: 1.3rem;
	}
	.snsBox .ttl {
		font-size: 1.5rem;
		font-weight: bold;
		display: inline-block;
		letter-spacing: 2px;
		color: #404040;
	}
	.gNav ul li a em::after {
		content: '';
		position: absolute;
		margin-left: 10px;
		background: #555;
		height: calc(tan(60deg) * 9px / 2);
		width: 5px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		margin-top: 5px;
	}
	.scheduleCallenderBox .day {
		position: absolute;
		top: 0px;
		left: 6px;
		font-size: 1.6rem;
	}
	.informationTextList dl dd {
		font-size: 16px;
	}

	.date{
		font-size: 1.1rem;
	}
	h3.mediaTitle {
		font-size: 1.6rem;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	.mediaDetailBox p{
		font-weight: 200;
	}


	.mediaCatBox ul li a {
		padding: 5px 20px;
		display: block;
		background-color: #DBE5EF;
		color: #0F2D64;
		border-radius: 100px;
		min-width: 90px;
		font-size: 11px;
	}
	.mediaCatBox ul li {
		display: inline-block;
		margin: 10px;
	}

	h2.svgL img {
		height: 37px;
	}
	h2.svgR img {
		height: 37px;
	}
	h2.svgR::after {
		width: 68%;
		bottom: -1px;
	}
	h2.svgL::after {
		width: 68%;
		bottom: -1px;
	}
	.pagerBox .prev, .pagerBox .next {
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
		height: 20px;
		width: auto;
		box-sizing: border-box;
	}
	.pagerBox .pager li a {
		height: 25px;
		width: 25px;
	}
	.pagerBox .pager li {
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
	}
	.pagerBox{
		margin-left: -4%;
		margin-right: -4%;
	}

}