html { -webkit-text-size-adjust: 100%; }

#header { width:100%; margin:0 auto; padding:0; }
#header img { width:100%; max-width:1920px; vertical-align:middle; }

div.setpac { width:100%; height:40px; background-color:#ed6c00; color:#FFF; padding-top:10px; font-size:1.4vw; }

#snav { position:fixed; z-index:1500; bottom:115px; right:0;}
#snav img { width:100%; }
#snav li { width:90px;}
#snav li a { position:relative; display:block; color:#fff; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center;}
#snav li a:hover { -webkit-transition:opacity 300ms ease-in-out 0s; transition:opacity 300ms ease-in-out 0s;}
#snav li a:hover:hover { opacity:0.8;}
#snav li span { display:inline-block; min-height:90px; margin:0 auto; -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl;letter-spacing:-1px;}

#character-title { width:100%; margin:60px auto; }
#character-title p { margin:0 0 2px 0; font-size:1.5vw; color:#595757; font-family:'Helvetica'; letter-spacing: -1px; }
#character-title h1 { font-size:2.5vw; color:#000; letter-spacing: -1px; }
#character-title h1 span { font-weight:bold; }

#character { margin:0; padding:60px 0; background-image:url("../images/grid_back.jpg"); }
#character div:nth-of-type(1) { position:absolute;width:100%; text-align:center; z-index:1100; }
#character div:nth-of-type(1) img { padding:0 700px 0 0; width:12%; max-width:155px; max-height:1000px; }
#character div:nth-of-type(2) { position:relative; margin:0 auto; }
#character p { margin:0 0 20px 0; font-size:1.8vw; color:#00AFEC; }
#iframe_player_api { margin:0 0 60px 0; }

#character ul { max-width:900px; margin:0 auto; padding:60px 0; }
#character ul li:nth-of-type(odd) { margin-bottom:1px; min-height:120px; background-image:url("../images/chara_back1.png"); background-repeat:no-repeat; background-size:100% auto; }
#character ul li:nth-of-type(even) { margin-bottom:1px; min-height:120px; background-image:url("../images/chara_back2.png"); background-repeat:no-repeat; background-size:100% auto; }

_::-webkit-full-page-media, _:future, :root #character ul li:nth-of-type(odd) { margin-bottom:-25px; min-height:120px; background-image:url("../images/chara_back1.png"); background-repeat:no-repeat; background-size:100% auto; }
_::-webkit-full-page-media, _:future, :root #character ul li:nth-of-type(even) { margin-bottom:-25px; min-height:120px; background-image:url("../images/chara_back2.png"); background-repeat:no-repeat; background-size:100% auto; }

#character ul li p { padding:3.5% 0 0 230px; text-align:left; font-size:1.6vw; font-weight:bold; color:#FFF; }
#character ul li p.hosoku { margin-top:-5%; text-align:left; font-size:1.0vw; font-weight:normal; color:#FFF; }

#nayami-title { width:100%; background-image:url("../images/nayami_image.jpg"); background-repeat:no-repeat; background-size:100% auto; }
#nayami-title p { padding-top:16.8%; margin:0 0 2px 0; font-size:1.5vw; color:#FFF; font-family:'Helvetica'; letter-spacing: -1px; }
#nayami-title h2 { padding-bottom:18.8%; font-size:2.5vw; color:#FFF; letter-spacing: -1px; }

#nayami { list-style:none; font-size:0; margin:0; background-image:url("../images/grid_back.jpg"); }
#nayami div { padding:25px 80px; margin:0; }
#nayami div:first-child { padding-top:100px; }
#nayami div:last-child { padding-bottom:100px; }

#nayami div ul { border:solid 1px #00AFEC; }
#nayami div ul li { display:inline-block; text-align:left; vertical-align:middle; }
#nayami div ul li:nth-of-type(1) { width:30%; }
#nayami div ul li:nth-of-type(2) { width:70%; }
#nayami div ul.rightblock li:nth-of-type(1) { width:70%; }
#nayami div ul.rightblock li:nth-of-type(2) { width:30%; }

#nayami div ul li img { width:100%; max-width:640px; }
#nayami div ul li p:nth-of-type(1) { font-size:1.2vw; color:#595757; padding-left:35px; margin:0 20px 5px; background-image:url("../images/hatena_icon.png"); background-repeat:no-repeat; background-size:auto 100%; }
#nayami div ul li p:nth-of-type(2) { font-size:2.5vw; font-weight:bold; line-height:1.2em; color:#00AFEC; margin:0 20px; }
#nayami div ul li p:nth-of-type(3) { font-size:1.3vw; color:#000; line-height:1.8em; margin:40px 20px 20px; }
#nayami div ul li p:nth-of-type(3) span { color:#00AFEC; }

#installation-title { width:100%; background-image:url("../images/installation600_image.jpg"); background-repeat:no-repeat; background-size:100% auto; }
#installation-title h3 { padding:18.8% 0 18%; font-size:3vw; font-weight:bold; color:#FFF; letter-spacing: 7px; }

#installation { margin:60px 10px; }
#installation ul li { display: inline-block; margin:5px; width:32%; text-align:left; vertical-align:top; font-size:1.2vw; color:#595757; }
#installation ul li img { width:100%; }

#spec { margin:0 auto; }
#spec p { margin:0 0 1px 0; font-size:1.4vw; color:#595757; font-family:'Helvetica'; letter-spacing: -1px; }
#spec h3 { font-size:2.4vw; color:#000; letter-spacing: -1px; }

#spec div { margin:40px; }
#spec div p.china { margin:10px 0; font-size:1.1vw; color:#000; letter-spacing: -1px; line-height:1.6em; text-align:left; }
#spec table { width:100%; font-size:1.2vw; border-collapse: collapse; border:1px solid #CCC; }
#spec table tr:first-child { font-size:1.5vw; background-color:#00AFEC; color:#FFF; }
#spec table th { border-right:solid 1px #CCC }
#spec table th,td { padding:10px 0; border-bottom:dotted 1px #CCC }
#spec table tr:nth-child(3),
#spec table tr:nth-child(5),
#spec table tr:nth-child(7),
#spec table tr:nth-child(9),
#spec table tr:nth-child(11),
#spec table tr:nth-child(13) { background-color:#F5FBFE; }


@media screen and (max-width: 750px) {

	#header { width:100%; }
	
	div.setpac { width:100%; height:30px; background-color:#ed6c00; color:#FFF; padding-top:10px; font-size:3.4vw; }
	
	#snav { position:fixed; z-index:1100; bottom:15px; right:0;}
	_::-webkit-full-page-media, _:future, :root #snav { position:fixed; z-index:1100; bottom:0; right:0;}
	#snav img { width:70%; }
	#snav li { width:90px; height:63px;}
	_::-webkit-full-page-media, _:future, :root #snav li { width:90px; height:100%; }
	#snav li a { position:relative; display:block; color:#fff; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center;}
	#snav li a:hover { -webkit-transition:opacity 300ms ease-in-out 0s; transition:opacity 300ms ease-in-out 0s;}
	#snav li a:hover:hover { opacity:0.8;}
	#snav li span { display:inline-block; min-height:90px; margin:0 auto; -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl;letter-spacing:-1px;}
	
	#character-title { width:100%; margin:20px auto; }
	#character-title p { margin:0 0 2px 0; font-size:3vw; color:#595757; font-family:'Helvetica'; letter-spacing: -1px; }
	#character-title h1 { margin:0 0 20px 0; font-size:5vw; color:#000; letter-spacing: -1px; }
	#character-title h1 span { font-weight:bold; }
	
	#character { margin:0; padding:20px 0; background-image:url("../images/grid_back.jpg"); }
	#character div:nth-of-type(1) { position:absolute;width:100%; text-align:left; z-index:1100; }
	#character div:nth-of-type(1) img { padding:0 0 0 10px; width:12%; max-width:155px; max-height:1000px; }
	#character div:nth-of-type(2) { position:relative; margin:0 auto; }
	#character p { margin:0 0 20px 0; font-size:4.8vw; color:#00AFEC; }
	#iframe_player_api { width:100%; }
	
	#character ul { max-width:100%; margin:0 auto; padding:20px 0; }
	#character ul li:nth-of-type(odd) { margin-bottom:1px; min-height:80px; background-image:url("../images/chara_back1_sp.png"); background-repeat:no-repeat; background-size:100% auto; }
	#character ul li:nth-of-type(even) { margin-bottom:1px; min-height:80px; background-image:url("../images/chara_back2_sp.png"); background-repeat:no-repeat; background-size:100% auto; }
	
	_::-webkit-full-page-media, _:future, :root #character ul li:nth-of-type(odd) { margin-bottom:-25px; min-height:80px; background-image:url("../images/chara_back1_sp.png"); background-repeat:no-repeat; background-size:100% auto; }
	_::-webkit-full-page-media, _:future, :root #character ul li:nth-of-type(even) { margin-bottom:-25px; min-height:80px; background-image:url("../images/chara_back2_sp.png"); background-repeat:no-repeat; background-size:100% auto; }
	
	#character ul li p { margin-right:20px; padding:2% 0 0 90px; text-align:left; font-size:4vw; font-weight:bold; color:#FFF; line-height:1.2em; }
	#character ul li p.hosoku { margin-top:-20px; text-align:left; font-size:2.5vw; font-weight:normal; color:#FFF; }
	
	#nayami-title { width:100%; background-image:url("../images/nayami_image.jpg"); background-repeat:no-repeat; background-size:100% auto; }
	#nayami-title p { padding-top:11.8%; margin:0 0 2px 0; font-size:3vw; color:#FFF; font-family:'Helvetica'; letter-spacing: -1px; }
	#nayami-title h2 { padding-bottom:10.8%; font-size:5vw; color:#FFF; letter-spacing: -1px; }
	
	#nayami { list-style:none; font-size:0; margin:0; background-image:url("../images/grid_back.jpg"); }
	#nayami div { padding:25px 20px; margin:0; }
	#nayami div:first-child { padding-top:40px; }
	#nayami div:last-child { padding-bottom:40px; }

	#nayami div ul { border:solid 1px #00AFEC; }
	#nayami div ul li { display:inline-block; text-align:left; vertical-align:middle; }
	#nayami div ul li:nth-of-type(1) { width:30%; }
	#nayami div ul li:nth-of-type(2) { width:70%; }
	#nayami div ul.rightblock li:nth-of-type(1) { width:70%; }
	#nayami div ul.rightblock li:nth-of-type(2) { width:30%; }

	#nayami div ul li img { width:100%; max-width:640px; }
	#nayami div ul li p:nth-of-type(1) { font-size:2.5vw; color:#595757; padding-left:35px; margin:20px 20px 5px 10px; background-image:url("../images/hatena_icon.png"); background-repeat:no-repeat; background-size:auto 100%; }
	#nayami div ul li p:nth-of-type(2) { font-size:4.5vw; font-weight:bold; line-height:1.2em; color:#00AFEC; margin:0 20px; }
	#nayami div ul li p:nth-of-type(3) { font-size:3vw; color:#000; line-height:1.8em; margin:20px 20px 20px; }
	#nayami div ul li p:nth-of-type(3) span { color:#00AFEC; }
	
	#installation-title { width:100%; background-image:url("../images/installation600_image.jpg"); background-repeat:no-repeat; background-size:100% auto; }
	#installation-title h3 { padding:18.8% 0 18%; font-size:5.5vw; font-weight:bold; color:#FFF; letter-spacing: 7px; }
	
	#installation { margin:60px 10px; }
	#installation ul li { display:block; margin:5px 0 20px 0; width:100%; text-align:left; vertical-align:top; font-size:4vw; color:#595757; }
	#installation ul li img { width:100%; }
	
	#spec { margin:0 auto; }
	#spec p { margin:0 0 1px 0; font-size:3vw; color:#595757; font-family:'Helvetica'; letter-spacing: -1px; }
	#spec h3 { font-size:5vw; color:#000; letter-spacing: -1px; }
	
	#spec div { margin:40px 20px; }
	#spec div p.china { margin:10px 0; font-size:3vw; color:#000; letter-spacing: -1px; line-height:1.6em; text-align:left; }
	#spec table { width:100%; font-size:3vw; border-collapse: collapse; border:1px solid #CCC; }
	#spec table tr:first-child { font-size:3vw; background-color:#00AFEC; color:#FFF; }
	#spec table th { border-right:solid 1px #CCC }
	#spec table th,td { padding:10px 0; border-bottom:dotted 1px #CCC }
	#spec table tr:nth-child(3),
	#spec table tr:nth-child(5),
	#spec table tr:nth-child(7),
	#spec table tr:nth-child(9),
	#spec table tr:nth-child(11),
	#spec table tr:nth-child(13) { background-color:#F5FBFE; }
	
}