@charset "utf-8";

/*=================================================================================================================================*/
/** 個別指定 for スマートフォン
/*=================================================================================================================================*/

/*---------------------------------------------
 ** 960px
---------------------------------------------*/
@media screen and (max-width: 960px) {

	/*---------------------------------------------
	body
---------------------------------------------*/
	html {
		scroll-behavior: smooth;
	}

	body {
		font-size: 16px;
		line-height: 1.8;
		border: none;
	}

	.hover:hover {
		opacity: 1.0;
		filter: alpha(opacity=100);
		-ms-filter: "alpha( opacity=100 )";
	}

	.only_pc {
		display: none;
	}

	.only_pc_line {
		display: none;
	}

	.only_sp {
		display: block;
	}

	.sp_br {
		display: inline;
	}

	/*画像*/
	img {
		max-width: 100%;
		height: auto;
	}


	#main {
		height: 1710px;
		background: url(../img/main_tree_sp.png) no-repeat top center;
		background-size: auto 100%;
	}

	#main {
		height: 1620px;
	}

	#main_in {
		width: 90%;
		height: 1600px;
	}


	.main_cast {
		width: 80%;
		display: block;
		position: absolute;
		top: 120px;
		left: 8.5%;
		margin: 0 auto;
		pointer-events: none;
	}

	.main_snow {
		width: 80%;
		display: block;
		position: absolute;
		top: 2px;
		left: 8%;
		margin: 0 auto;
		pointer-events: none;
	}

	@media screen and (max-width: 770px) {
		.main_cast {
			width: 95%;
			display: block;
			position: absolute;
			top: 120px;
			left: -0.5%;
			margin: 0 auto;
			pointer-events: none;
		}

		.main_snow {
			width: 89%;
			display: block;
			position: absolute;
			top: 2px;
			left: 2%;
			margin: 0 auto;
			pointer-events: none;
		}
	}

	.main_arrow {
		width: 10%;
		max-width: 50px;
	}

	#logo {
		width: 150px;
	}

	#logo #menu {
		display: none;
	}

	#main_data {
		top: -35px;
	}

	.bunka {
		background: url(../img/icon_bunka.png) no-repeat left top 5px;
		background-size: 50px auto;
		padding: 10px 0 5px 60px;
		font-size: 50%;
	}

	#main_data>img {
		width: 70%;
	}

	.place {
		font-size: 140%;
		margin: 5px 0 15px;
	}

	.menu_sp li a {
		display: inline-block;
		padding: 1px 0;
		box-sizing: border-box;
		font-size: 105%;
		letter-spacing: 0.01em;
	}

	.menu_sp li a::first-letter {
		font-size: 80%;
		vertical-align: 2px;
		padding-right: 3px;
	}

	.menu_sp li a:hover {
		background: #ac824d;
		color: #fff;
	}

	.menu_sp li a span {
		font-size: 80%;
		display: inline-block;
		margin-left: 5px;
	}

	.main_txt_sp {
		width: 90%;
		max-width: 500px;
		position: absolute;
		top: 1000px;
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
	}

	.main_txt_sp>p {
		font-size: 140%;
		color: #ea6da4;
		letter-spacing: 0.5em;
		margin-bottom: 10px;
	}

	.main_txt_sp>dl {
		width: 100%;
		max-width: 220px;
		margin: 0 auto !important;
		font-size: 120%;
		justify-content: center;
		letter-spacing: 0.05em;
		padding-left: 10px;
	}

	.main_txt_sp .text_link {
		font-size: 140%;
		margin-bottom: 5px;
	}


	.main_txt_sp dl:nth-child(2n-1) {
		margin: 0 auto !important;
	}

	.main_txt_sp dl:nth-child(2n) dt {
		width: 36% !important;
	}

	.main_txt_sp .btn a {
		width: 90%;
		max-width: 500px;
		margin: 20px auto 15px;
	}

	.main_txt_sp .btn a span {
		font-size: 80%;
		display: inline-block !important;
		margin-left: 12px;
	}

	.main_txt_sp .contact {
		width: 90%;
		max-width: 500px;
		font-weight: 300;
	}

	.main_txt_sp .contact dt {
		width: 100%;
		text-align: center;
		margin-bottom: 0 !important;
	}

	.main_txt_sp .contact dd {
		width: 100%;
		text-align: center;
		font-size: 85% !important;
	}

	.main_txt_sp .contact dd::before {
		content: '';
		display: none;
	}


	#story {
		width: 100%;
		max-width: 1500px;
		height: 3260px;
		margin: 0 auto;
		background: url(../img/story_snow_sp.png) no-repeat top center;
		background-size: 100%;
		box-sizing: border-box;
	}

	#story_in {
		height: 3320px;
	}

	@media screen and (max-width: 860px) {
		#story {
			height: 3060px;
		}

		#story_in {
			height: 3120px;
		}
	}

	@media screen and (max-width: 770px) {
		#story {
			height: 2920px;
		}

		#story_in {
			height: 3000px;
		}
	}

	@media screen and (max-width: 650px) {
		#story {
			height: 2730px;
			background: url(../img/story_snow_sp.png) no-repeat top center;
			background-size: auto 100%;
		}

		#story_in {
			height: 2780px;
		}
	}

	@media screen and (max-width: 480px) {
		#story {
			height: 2500px;
		}

		#story_in {
			height: 2560px;
		}
	}

	@media screen and (max-width: 340px) {
		#story {
			height: 2640px;
		}

		#story_in {
			height: 2713px;
		}
	}

	.story_box>div {
		width: 100%;
	}

	.story_box>img {
		width: 100%;
		margin: 20px auto;
	}

	#midokoro {
		background: url(../img/midokoro_bg_sp.png);
		background-size: 100%;
		padding: 4% 7%;
		box-sizing: border-box;
	}

	@media screen and (max-width: 480px) {
		#midokoro {
			background: url(../img/midokoro_bg_sp.png) center top;
			background-size: auto 100%;
			padding: 4% 7%;
			box-sizing: border-box;
		}
	}

	#midokoro h4 {
		font-size: 130%;
		margin-bottom: 10px;
	}

	#midokoro>div p {
		width: 100%;
		font-size: 90%;
		line-height: 2.0;
		margin-bottom: 20px;
	}

	#midokoro>div img {
		width: 100%;
	}

	#staff {
		width: 100%;
		max-width: 1500px;
		height: 1320px;
		margin: 0 auto;
		background: url(../img/staff_snow_sp.png) no-repeat top center;
		background-size: 100%;
		padding: 3% 0;
		box-sizing: border-box;
		color: #fff;
	}

	#music {
		width: 90%;
		padding-left: 0;
		margin: 0 auto 5%;
	}

	#music dl {
		font-size: 80%;
		width: 45%;
	}

	#staff_data {
		width: 90%;
		padding-left: 0;
		margin: 0 auto 5%;
	}

	#ticket {
		width: 90%;
		padding-left: 0;
		margin: 0 auto 5%;
	}

	#ticket dl dt {
		width: 200px;
		font-size: 95%;
		margin-bottom: 5px;
		letter-spacing: 0.02em;
		font-weight: 300;
	}

	#ticket dl dd {
		width: calc(100% - 220px);
		font-size: 105%;
		margin-bottom: 5px;
		font-weight: 300;
	}

	#ticket dl dd span {
		display: block;
		font-size: 85%;
		line-height: 1.4;
	}

	#ticket dl dd a {
		letter-spacing: 0.05em;
	}

	#ticket dl dd span.only_pc_line {
		display: none;
	}

	#ticket dl dt.tiket_long {
		width: 100%;
		margin-bottom: 0;
	}

	#ticket dl dd.tiket_long {
		width: calc(100% - 220px);
		margin-left: 200px;
		line-height: 1.4;
	}

	#ticket .btn {
		display: block;
		margin: 3px 0 5px;
	}


	#sponsor {
		width: 90%;
		padding-left: 0;
		margin: 0 auto 5%;
	}

	#sponsor dl dd ul li {
		display: inline-block;
	}

	#hole {
		text-align: center !important;
	}

	#hole>div p {
		margin-bottom: 5px;
	}

	#hole>div {
		justify-content: center;
	}

	ul.foot_sns {
		width: 98%;
		display: flex;
		margin: 0 auto;
		justify-content: center;
		padding-top: 10px;
	}

	ul.foot_sns li a {
		display: block;
		padding: 0 10px 10px;
	}

	ul.foot_sns li a:hover {
		background: #ac824d;
		color: #fff;
	}

	ul.foot_sns li:nth-child(1) a {
		width: 65px;
	}

	ul.foot_sns li:nth-child(2) a {
		width: 16px;
	}

	ul.foot_sns li:nth-child(3) a {
		width: 31px;
	}

	ul.foot_sns li:nth-child(4) a {
		width: 32px;
	}

}

@media screen and (max-width: 480px) {
	body {
		font-size: 95%;
	}

	#bg01 {
		background: #ed7fb0;
	}

	#main {
		background: url(../img/main_tree_sp.png) no-repeat top 70px center;
		background-size: auto 90%;
		height: 1100px;
	}

	#main_in {
		height: 1080px;
	}

	#sns ul {
		padding-top: 5px;
	}

	#sns ul li:nth-child(5) a {
		background: url(../img/icon_ballet.png) no-repeat left 10px top 5px;
		background-size: 20px auto;
		padding: 5px 10px 4px 35px;
		font-size: 115%;
	}

	#sns ul li:nth-child(5) a:hover {
		background: url(../img/icon_ballet.png) no-repeat left 10px top 5px;
		background-size: 20px auto;
		padding: 5px 10px 4px 35px;
	}

	#main_data {
		top: -10px;
	}

	.bunka {
		background: url(../img/icon_bunka.png) no-repeat left top 10px;
		background-size: 30px auto;
		padding: 10px 0 5px 35px;
		font-size: 80%;
		margin-bottom: 10px;
		line-height: 1.4;
	}

	#logo {
		width: 90px;
		top: 35px;
	}

	.menu_sp {
		font-size: 120%;
	}

	h2 {
		font-size: 115%;
	}

	.main_cast {
		top: 200px;
	}

	.main_snow {
		top: 155px;
	}

	#main_data>img {
		width: 55%;
	}

	#main_data {
		font-size: 110%;
	}

	.main_txt_sp {
		top: 660px;
		font-size: 140%;
	}

	.main_txt_sp dl {
		font-size: 120%;
		max-width: 170px;
		padding-left: 15px;
		line-height: 1.6;
	}

	.main_txt_sp dl.contact {
		font-size: 100%;
	}

	.main_txt_sp .btn a {
		font-size: 90%;
	}

	#story h3 {
		max-width: 180px;
		padding-top: 20px;
	}

	#story_in {
		width: 80%;
	}

	.story_box {
		font-size: 120%;
	}

	#cast ul {
		justify-content: space-between;
	}

	#cast ul li {
		width: 42.5%;
		font-size: 120%;
		margin-bottom: 10px;
	}

	#cast ul li span {
		font-size: 105%;
	}

	#midokoro {
		padding: 4% 5%;
	}

	#midokoro h4 {
		font-size: 140%;
		margin-bottom: 5px;
	}

	#midokoro>div p {
		font-size: 110%;
	}

	#staff {
		font-size: 120%;
		background: url(../img/staff_snow_sp.png) no-repeat top center;
		background-size: auto 100%;
		padding-top: 30px;
		height: 1080px;
	}

	#music,
	#staff_data,
	#ticket,
	#sponsor {
		width: 85%;
	}

	#music {
		padding-left: 0;
		margin: 0 auto 5%;
		font-size: 110%;
	}

	#music dl {
		width: 100%;
		margin-bottom: 0;
	}

	#music dt {
		width: 65px !important;
		padding-right: 0 !important;
		font-size: 110% !important;
		font-weight: 700 !important;
	}

	#music dt span {
		letter-spacing: 0.5em;
	}

	#music dd {
		width: calc(100% - 70px) !important;
		font-size: 110% !important;
		font-weight: 700 !important;
	}


	#staff_data h3 img {
		width: 110px;
		margin-bottom: 10px;
	}

	#staff_data h3:before {
		width: calc(100% - 130px);
		top: 7px;
	}

	#staff_data dl dt {
		width: 130px;
		font-size: 95%;
	}

	#staff_data dl dd {
		width: calc(100% - 140px);
		font-size: 105%;
		line-height: 1.5;
	}

	#ticket h3 img {
		width: 190px;
		margin-bottom: 10px;
	}

	#ticket h3:before {
		width: calc(100% - 210px);
		top: 7px;
	}

	#ticket dl dt {
		width: 100px;
		font-size: 95%;
	}

	#ticket dl dd {
		width: calc(100% - 110px);
		font-size: 105%;
		line-height: 1.5;
		position: relative;
	}

	#ticket dl dd span {
		letter-spacing: -0.05em;
	}

	#ticket dl dd.tiket_long {
		width: calc(100% - 110px);
		margin-left: 100px;
	}


	#ticket dl dt:nth-of-type(1) {
		width: 150px;
	}

	#ticket dl dd:nth-of-type(1) {
		width: calc(100% - 160px);
		padding-bottom: 30px;
	}

	#ticket dl dd .btn a {
		position: absolute;
		left: -100px;
		bottom: 10px;
	}

	#sponsor dl dt {
		width: 55px;
	}

	#sponsor dl dd {
		width: calc(100% - 65px);
	}

	ul.foot_sns li:nth-child(1) a {
		width: 50px;
	}

	ul.foot_sns li:nth-child(2) a {
		width: 12px;
	}

	ul.foot_sns li:nth-child(3) a {
		width: 22px;
	}

	ul.foot_sns li:nth-child(4) a {
		width: 25px;
	}

}

@media screen and (max-width: 400px) {
	body {
		font-size: 90%;
	}

	#main_data>img {
		width: 50%;
	}

	.main_cast {
		width: 100%;
		top: 200px;
	}

	.main_snow {
		top: 165px;
	}

	#story {
		height: 2400px;
	}

	#story_in {
		width: 85%;
		height: 2450px;
	}

	#cast p {
		font-size: 70%;
		letter-spacing: -0.1em;
	}

	#midokoro {
		padding: 4% 5%;
	}

	#ticket dl dt {
		width: 90px;
	}

	#ticket dl dt:nth-of-type(1) {
		width: 130px;
	}

	#ticket dl dd,
	#ticket dl dd.tiket_long {
		width: calc(100% - 100px);
	}

	#ticket dl dd.tiket_long {
		margin-left: 90px;
	}

	#ticket dl dd a {
		font-size: 90%;
	}

	#music dt {
		width: 68px;
	}

	#music dd {
		width: calc(100% - 83px);
		font-size: 110%;
	}

	#staff_data dl dt {
		width: 115px;
		letter-spacing: -0.05em;
		font-size: 100%;
	}

	#staff_data dl dd {
		width: calc(100% - 120px);
		letter-spacing: -0.05em;
		font-size: 100%;
	}
}

@media screen and (max-width: 340px) {
	body {
		font-size: 85%;
	}

	#main {
		height: 1010px;
	}

	#main_in {
		height: 980px;
	}


	.bunka {
		background: url(../img/icon_bunka.png) no-repeat left top 10px;
		background-size: 25px auto;
		padding: 7px 0 5px 30px;
		margin-top: 10px;
		letter-spacing: -0.05em;
	}

	#logo {
		width: 75px;
		top: 45px;
	}

	#main_data>img {
		width: 45%;
	}

	.menu_sp {
		font-size: 105%;
	}

	.main_txt_sp {
		width: 100%;
		top: 600px;
	}

	.note {
		font-size: 65%;
	}

	.note ul li {
		letter-spacing: -0.05em;
	}

	#story {
		height: 2300px;
	}

	#story_in {
		height: 2340px;
	}

	#staff_data {
		margin-bottom: 8%;
	}

	#staff_data h3 img {
		width: 100px;
		margin-top: 20px;
	}

	#staff_data h3:before {
		width: calc(100% - 110px);
	}

	#ticket h3 img {
		width: 170px;
		margin-top: 20px;
	}

	#ticket h3:before {
		width: calc(100% - 180px);
	}

	#ticket dl dd .btn a {
		left: -120px;
	}

	#ticket dl dd a {
		letter-spacing: -0.02em;
	}

}


/* スマホのときのみ電話をかける */
@media (min-width: 740px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}