/* pop-a.jp: style.css
*/
* { margin: 0; padding: 0; }
body {
	font-family: "SF Pro JP","SF Pro Text","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
	color: #333;
	background-image: linear-gradient(to right, #fc9, #fdb, #fc9);
}
.en {
	font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;	
}
body.en {
	color: white;
/*	background-color: #024;*/
	background-image: linear-gradient(to right, #224, #336, #224);
}
body.en a {color: white;}
body.en a:hover {color: #9cf;}
body.en p {line-height: 1.6;}

* {box-sizing: border-box;} /* width and height include padding */
a {text-decoration: none;} /* No Underline */
ul {list-style: none;} /* No Marker */
a {color:#333;}
a:hover {color:#39f;}

.fw100, .hair {font-weight:100;}
.fs60, .smaller {font-size:60%;}
.fs80, .small {font-size:80%;}

h1,p,div {
	font-weight: bold;
	text-align: center;
}
h1 {font-size: 5vh; margin: 0.2em;}
p {font-size: 3vh;}
a > img {width: 1.5em;}
a > svg {width: 1.2em; margin: 1em;}
a:hover > img, a:hover > svg {opacity: 0.7;}

img {width: 25vh;}
@media screen and ( orientation: portrait ) {
	h1 {font-size:5vw;}
	p {font-size:3vw;}
	img { width: 25vw; }
}