html,body{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-size:16px; width: 100%; letter-spacing: 0.1em; text-align: center; color: #2C2C2C;word-break: break-all;}	
h1 {font-size:56px; margin-bottom: 20px;}
h1 span {font-size:22px;}		
h1 span br {display: none;}
h2 {font-size:36px; margin-bottom: 30px;}	
h3 {font-size:36px; margin-bottom: 0px;}	
h3 span {font-size:16px;}		
h4 {font-size:22px; margin-bottom: 20px; text-align: left}	
h5 {font-size:16px; margin-bottom: 20px; padding-left:14px; border-left: 8px solid; text-align: left; }
rt,rp {font-size:10px;}
a {text-decoration: none;font-weight: bold; transition: all 0.4s; }
a:link {color: #3973BE}
p {line-height: 2em;margin-bottom: 1em;}		
.content {padding: 80px 0;}	
.bg_blue {background: #EBF2FC;}
.pnlm-compass{display: none!important;}
.sp {display: none}


#vertical {	-ms-writing-mode: tb-rl;	writing-mode: vertical-rl; 	position:fixed; right: 0; top:20px; 
	border: 2px solid #3973BE; border-right: none; background: #3973BE; color: #fff; font-weight: bold; padding: 20px; letter-spacing: 0.25em;border-radius: 20px 0 0 20px; }
#vertical:hover {background: #fff;border: 2px solid #3973BE; border-right: none;color: #3973BE;}

#main {width: 100%; color: #fff; text-align:left;}
#main .wrap{ height: 700px;display: table;max-width: 1088px; margin: 0 auto;}
#main .inner {display: table-cell; vertical-align: middle; width: 45%; padding-right: 5%;}
#main .inner:nth-child(2) { width: 60%; text-align: center; padding-right:0;}
#main .inner:nth-child(2) a{display:block;position: relative;}
#main .inner img {width: 100%; max-width: 600px}
#main .inner:nth-child(2) span,	#movies li a span{width: 64px; height: 48px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
#main .inner:nth-child(2) a span img,	#movies li a span img{width: 64px; height: 48px; border: none; transition: all 0.4s; }
#main .inner:nth-child(2) a:hover span img,	#movies li a:hover span img, #v360 ul li:hover span img{-moz-transform: scale(1.4); -webkit-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4);}


#v360 .v360 {max-width: 1088px; margin: 0 auto 20px auto;}
#v360 .iframe-responsive { position: relative; width: 100%; padding-top:40%; background: #f5f5f5;}
#v360 .iframe-responsive iframe { position: absolute; top: 0;left: 0;width: 100%;height: 100%;}
#v360 ul {display: table; width: 100%; max-width: 720px; margin: 0 auto;table-layout:fixed; text-align: center;}
#v360 ul li {display: table-cell;position: relative;}
#v360 ul li span {width: 38px; height: 50px; position: absolute; top: 48%;left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
#v360 ul li span img {width: 38px; height: 50px; transition: all 0.4s;}
#v360 ul li img {width: 100%; max-width: 240px;}

#photo .tab {display: table; width: 100%; max-width: 536px; margin: 0 auto;table-layout:fixed; text-align: center; margin-bottom: 40px;}
#photo .tab li {display: table-cell; background: #fff; border: 1px solid #3973BE; padding: 10px; font-size: 26px; font-weight: bold;color: #3973BE; cursor: pointer;}
#photo .tab li.active {background: #3973BE; color: #fff;}
#photo .area ul { display: none; width: 100%; max-width: 1088px; margin: 0 auto;}
#photo .area ul.show { display: block;}
#photo .area ul.show:after {content: "";clear: both;display: block;}
#photo .area li {float: left; width:18%; margin: 1%; overflow:hidden; text-align: center;list-style: none;transition: all 0.4s;}
#photo .area li img {width:100%;}
#photo .area li a {display:block;width:100%;height:100%;}
#photo .area li:hover {-moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}

#movies ul { width: 100%; max-width: 1088px; margin: 0 auto;}
#movies ul.type2 {max-width: 704px; margin: 0 auto;}
#movies ul:after {content: "";clear: both;display: block;}
#movies li {float: left; width:31%; margin: 1%; overflow:hidden; text-align: center;list-style: none;}
#movies ul.type2 li{width:48%;}
#movies li img {width:100%;/* border: 1px solid #ededed;*/}
#movies li a {display:block;width:100%;height:100%;position: relative;}
#movies li.mb100{ margin-bottom: 100px;}
#movies li > div {background: #000; color: #fff; padding: 4px 0;}

#rank h2+p {margin-bottom: 3em;}
#rank h2 span {display: block; font-size: 18px; background:#fff; width: 177px; margin: 0 auto 10px auto; color: #3973BE;border: 2px solid #3973BE;  line-height: 100%; padding: 8px 0;}
#rank h3 + span {display: inline-block; font-size: 16px; background:#FF0000; margin: 0 auto 40px auto; color: #fff; line-height: 100%; padding: 8px 16px; border-radius: 20px}
#rank h3 + span.hiro {background:#fff; color: #FF0000; border: 2px solid #FF0000}
#rank h3 img {width: 140px;}
#rank .box{ display: block; width: 100%; max-width: 1088px; margin: 0 auto; background:#fff; border-radius: 20px 20px 0 0; padding: 2.5em 4em;}
#rank .box p {text-align: left; margin-bottom: 2em;}
#rank .boximg {float:right; margin: 0 0 20px 40px;width: 371px}
#rank .boximg img  {width: 100%;}
#rank .boximg p  {line-height: 150%; }
#rank div p  {line-height: 150%; padding: 0;}
#rank .boximg p span {font-size: 13px}
#rank .box-bottom{ display: block; width: 100%; max-width: 1088px; margin: 0 auto 40px auto; background:#647a99; color: #fff; border-radius:0 0 20px 20px ; padding: 2em 4em; text-align: left;}
#rank .box-bottom img {width: 100px; float: left; margin-right: 40px;}
#rank .box-bottom h5 {margin-bottom: 20px; padding:0 0 10px 0; border-left: none; border-bottom: 2px solid; text-align: left;  overflow: hidden; }
#rank .box-bottom h5 + p {overflow: hidden; }
#rank .box-bottom p + p {text-align: right; margin-bottom: 0;}
#rank .box:after , #rank .box-bottom:after {content: "";clear: both;display: block;}

#report h2 span {display: block; font-size: 16px; background:#FF0000; width: 127px; margin: 0 auto; color: #fff; line-height: 100%; padding: 8px 0; border-radius: 20px}
#report .btn a {background: #3973BE;border: 2px solid #3973BE;color: #fff;font-size: 24px;padding:20px;width: 536px; border-radius: 8px; display: block; margin: 0 auto;}
#report .btn a:hover {background: #fff;border: 2px solid #3973BE;color: #3973BE;}
#report p {margin-bottom: 2em;}

footer > img {margin-bottom:2em;}
footer .btn a {font-size: 14px; text-align: left; padding:20px;color: #2C2C2C; width: 360px; border: 1px solid #707070;border-radius: 8px; display: block; margin: 0 auto; background: url( "../img/arrow.png") no-repeat 96% center #fff;}
footer .btn a:hover {background-color: #f5f5f5;color: #3973BE; border: 1px solid #707070}
footer .btn + p {padding-top: 50px;}

@media print, screen and (max-width: 1100px) {
	h1 {font-size:4.5vw; }
	h1 span {font-size:2vw;}
	h2 {font-size:30px;}	
	#main .wrap{ height: 600px; margin: 0 40px;}
	#main .inner {width: 50%;}
	#main .inner:nth-child(2) { width: 55%; text-align: center; padding-right:0;}
}

@media print, screen and (max-width: 768px) {
	.pc {display: none}
	.sp {display: block}
	html,body{overflow-x: hidden;font-size:14px;}
	h1 {font-size:36px; margin-bottom: 20px;}
	h1 span {font-size:16px;}
	h2 {font-size:22px; margin-bottom: 20px;}	
	h3 {font-size:28px; margin-bottom: 0px;}	
	h4 {font-size:18px; margin-bottom: 10px;}	
	a {transition: none; }
	p {text-align: left; padding: 0 20px;} 	
	.content {padding: 40px 0;}	
	#vertical {	-ms-writing-mode: lr-tb;	writing-mode: horizontal-tb; 	position:fixed; left: 0; right: 0; top:auto; bottom: 0; width: 100%; border: none; padding: 20px 0; border-radius: 0; }
	#vertical:hover {background: #3973BE; color: #fff;border: none;}
	
	#main .wrap{ height:auto;margin: 0 auto;}
	#main .inner {width: 100%;display:block; text-align: center;padding-right: 0;}
	#main .inner:nth-child(2) { width: 100%; text-align: center; padding: 20px;}
	#main .inner:nth-child(2)  p  { text-align: center; }	
	#main .inner:nth-child(2) a:hover span img,	#movies li a:hover span img, #v360 ul li:hover span img{-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
	
	#v360 ul {width: 90%;}
	
	#photo .tab {width: 90%; margin-bottom: 20px;}
	#photo .area ul {padding: 0 16px;}
	#photo .area li {width:31%; margin: 1%;}
	
	#movies ul, #movies ul.type2 {padding: 0 20px; }
	#movies li, #movies ul.type2 li {width:100%; margin: 0%;}
	#movies li p {text-align: center;}
	#movies li.mb100, #movies ul.type2 li.mb100{ margin-bottom: 50px;}
	
	
	#rank{box-sizing: border-box;}
	#rank h2 span {font-size: 16px;}
	#rank h3 + span {font-size: 14px;margin: 0 auto 20px auto;}
	#rank h3 img {width: 100px;}
	#rank .box{ margin: 0 5%; width: 90%; border-radius: 10px 10px 0 0; padding: 20px;}
	#rank .box p {text-align: left; margin-bottom: 2em;}
	#rank .boximg {float:none; margin: 0;width: 100%}
	#rank .boximg img  {width: 100%;margin-bottom: 10px; }
	#rank .boximg img.fm {max-width: 400px; max-height: 300px; width: auto; height: auto;}
	#rank .boximg p  {line-height: 150%}
	#rank .boximg p span {font-size: 13px}
	#rank .box-bottom{  margin: 0 5% 5% 5%; width: 90%; border-radius:0 0 10px 10px ; padding: 20px;}
	#rank .box-bottom img { display: none}
	#rank .box-bottom h5 {margin-bottom: 20px; padding:0 0 10px 0; border-left: none; border-bottom: 2px solid; text-align: left;  overflow: hidden; }
	#rank .box-bottom h5 + p {overflow: hidden; }
	#rank .box-bottom p + p {text-align: right; margin-bottom: 0;}
	#rank .box:after , #rank .box-bottom:after {content: "";clear: both;display: block;}
	
	#report h2 span {font-size: 14px; margin-top: 6px;}
	#report .btn, footer .btn {margin: 0 20px;}
	#report .btn a {font-size: 16px; padding:16px 0; width:100%; box-sizing:border-box;}
	#report .btn a:hover {background: #3973BE;border: 2px solid #3973BE;color: #fff;}
	footer > img {width: 180px;}
	footer .btn a {width: 100%;}
	footer .btn a:hover {background-color: #fff;color: #2C2C2C;}
	footer .btn + p {text-align: center;}
}