@charset "utf-8";
#special #mainArea .mainAreaBox {
    background: #002E4B;
    height: 84px
}
#special .mainConArea .mainConTit {
    background: url(/star/images/tit_deco_dark.png) left top no-repeat, url(/star/images/mainConTit_borderDark_pc.png) left bottom 10px no-repeat;
    background-size: 60px, contain;
    position: relative
}

@media only screen and (max-width:768px) {
	#special .mainConArea .mainConTit {
		background: url(/star/images/tit_deco_dark.png) left top no-repeat, url(/star/images/mainConTit_borderDark_sp.png) left bottom 1.6vw no-repeat;
		background-size: 10.6vw, contain
	}
}
html#special {
    background-image: url(/star/images/contentsBg_middle_pc.png);
    background-repeat: repeat
}
#special #parchmentBg {
    background-image: url(/star/images/contentsBg_top_pc.png);
    background-position: top left;
    background-repeat: repeat-x;
    padding: 45px 0 0;
    position: relative;
    z-index: 10;
    margin-top: -30px
}
#special .mainConArea {
    margin: 0 auto
}
#special .mainTitle {
    color: #002E4B
}
#special #parchmentBg .innerBox {
    width: 930px;
    margin: auto;
    overflow: hidden
}
#special .innerBoxL, #special .innerBoxR {
    width: 456px
}
#special .innerBoxL img, #special .innerBoxR img {
    width: 100%
}

@media only screen and (max-width:768px) {
	html#special {
		background-image: url(/star/images/contentsBg_middle_sp.png);
		background-size: contain
	}
	#special #parchmentBg {
		background-image: url(/star/images/contentsBg_top_sp.png);
		background-size: contain;
		padding: 6vw 0 0;
		margin-top: -3.33vw
	}
	#special #parchmentBg .innerBox, #special .innerBoxL, #special .innerBoxR, #special .innerBoxR img {
		width: 100%
	}
	#special .innerBoxL, #special .innerBoxR {
		float: none;
		overflow: hidden
	}
}
ul.verticalUl {
    margin-top: 35px
}
ul.verticalUl li {
	position: relative;
    cursor: pointer;
    border: 2px solid #002E4B;
    color: #002E4B;
    width: 200px;
    /*height: 40px;*/
    margin-bottom: 15px;
    font-size: 1.8rem;
        line-height: 2em;
    padding-right: .25em;
}
ul.verticalUl li:before {
    content: "▶";
    left: 11px;
    position: absolute;
    font-size: 1.2rem;
    vertical-align: middle;
}

ul.verticalUl li a{
	width: calc(100% - (11px + 1em));
    display: inline-block;
    margin-left: calc(11px + 1em);
    /*vertical-align: middle;*/
}
ul.verticalUl a:link, ul.verticalUl a:visited {
    color: #002E4B!important
}

ul.verticalUl a:visited,
ul.verticalUl a:link{ text-decoration:none;}

ul.verticalUl li:hover {
    color: #fff;
    background: #002E4B;
    opacity: .7
}
ul.verticalUl li:hover a:link, ul.verticalUl li:hover a:visited {
    color: #fff!important
}

ul.verticalUl.longUl li { width: 420px}


@media only screen and (max-width:768px) {
	ul.verticalUl {
		letter-spacing: -.4em;
		line-height: 1;
		margin-top: 8vw;
		width: 108%
	}

	ul.verticalUl li {
		width: 1.71rem;
		width: 45.6vw;
		height: auto;
		margin-right: 2.66vw;
		margin-bottom: 2.66vw;
		font-size: 4vw;
		font-weight: 700;
		display: inline-block;
		letter-spacing: normal;
		padding-bottom: 0;
	}
	ul.verticalUl li:before { left: 2.66vw; font-size: 3.2vw;}
	ul.verticalUl li a{
		width: calc(100% - (3.86vw + .75em));
		margin-left: calc( 3.86vw + .75em);
	}

	.android ul.verticalUl li a{ margin-top: 2px;}
	.android ul.verticalUl li:before{ top: 2px;}

	ul.verticalUl.longUl{ width: 100%}
	ul.verticalUl.longUl li { width: 100%}
}

	@media only screen and (min-width: 768px) {
		.full_box img { width: 800px;}
	}

.full_box video {
    margin: auto;
    display: block
}
.mainTitleSubAreaL, .mainTitleSubAreaR {
    margin-bottom: 30px;
    margin-top: -35px;
    font-weight: 700;
    overflow: hidden
}
.mainTitleSubAreaL {
    text-align: left
}
.mainTitleSubAreaR {
    text-align: right
}

@media only screen and (max-width:768px) {
	.full_box img {
		width: 100%
	}
	.mainTitleSubAreaL, .mainTitleSubAreaR {
		margin-bottom: 4vw;
		margin-top: -3.33vw;
		text-align: left
	}
}
.returnIndex {
    font-size: 1.5rem
}
.returnIndex:before {
    content: "▶";
    margin: 0 5px 0 0
}

.returnIndex a:visited,
.returnIndex a:link{ text-decoration:none;}

@media only screen and (max-width:768px) {
	.returnIndex {
		font-size: 1.6rem;
		font-size: 4.26vw;
		text-align: right
	}
	.returnIndex:before {
		margin: 0 .8vw 0 0
	}
}
ul.specialNavi {
	letter-spacing: -.4em;
	line-height: 1;
}
ul.specialNavi li {
	display: inline-block;
	font-size: 1.6rem;
	text-align: center;
	margin-left: 10px;
	border: 1px solid #002E4B;
	line-height: 1;
	letter-spacing: normal;
	word-wrap: break-word
}

/*ul.specialNavi li:first-child { margin-left: 0;}*/

ul.specialNavi li.on {
	pointer-events: none
}
ul.specialNavi li.hoverClass,
ul.specialNavi li.on {
    background: #002E4B;
    color: #fff
}
ul.specialNavi li span.nav {
    padding: 5px 14px;
    display: inline-block
}
#special .select_div {
    width: 800px;
    text-align: center
}
#special .select_inner {
    display: inline-block;
    /*text-align: left*/
}
ul.specialNavi li.on a:active, ul.specialNavi li.on a:link, ul.specialNavi li.on a:visited, ul.specialNavi li:hover a:active, ul.specialNavi li:hover a:link, ul.specialNavi li:hover a:visited {
    color: #fff!important
}
.special_date {
    text-align: right;
    font-weight: 700;
    font-size: 1.4rem
}

@media only screen and (min-width:768px) {
	ul.specialNavi {
		margin-top: -8px;
		margin-left: -10px;
	}
	ul.specialNavi li {
		margin-top: 8px
	}
	ul.specialNavi li:hover {
		background: #002E4B;
		color: #fff!important;
		opacity: .7;
		cursor: pointer
	}
	ul.specialNavi li.hoverClass {
		opacity: .7
	}
}

@media only screen and (max-width:768px) {
	.special_date {
		font-size: 4.26vw
	}
	ul.specialNavi {
		width: 100%
	}
	ul.specialNavi li {
	width:-webkit-calc((100% - (1.9vw * 4))/ 5);
	width:calc((100% - (1.9vw * 4))/ 5);
		margin-left: 0;
		margin-right: 1.9vw;
		margin-bottom: 1.33vw;
		font-size: 3vw;
		border: .15rem solid #002E4B;
		border: .4vw solid #002E4B
	}
	ul.specialNavi li:nth-child(5n) {
		margin: 0
	}
	ul.specialNavi li span.nav {
		padding: 2vw 1vw
	}
	#special .select_div {
		width: 100%
	}
}

@media only screen and (device-height:568px) {
	ul.specialNavi li {
	width:-webkit-calc((100% - (1.2vw * 4))/ 5);
		margin-right: 1.2vw
	}
}
#special #footer {
    background: #002e4b;
    color: #B3B3B3
}
