@charset "UTF-8";
/* CSS Document */



/* ================= font ====================== */

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700);

/* ============================================= */


/* =======================================================================
                                    RESET
======================================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}

ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline: none;
	vertical-align: top;
	font-size:0;
	line-height: 0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
a {
	overflow:hidden;
}





/* =======================================================================
                                    CONTENTS
======================================================================= */


body{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#000;
	font-size:12px;
	line-height:1.6;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#FFF;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.ie8 body{min-width:800px;}



.title{
	width:60%;
	max-width:350px;
	margin:0 auto;
	padding:50px 0;
}

article{
	width:90%;
	max-width:800px;
	margin:0 auto;
}
h1{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:3.0em;
	font-weight:500;
}
h2{
	font-size:1.7em;
	font-weight:bold;
	text-align:left;
	padding:2.0em 0 0.3em;
}
.copyBox{
	font-size:1.1em;
	text-align:left;
}


.exchange{
	width:100%;
	overflow:hidden;
	margin-top:20px;
	padding-bottom:50px;
}
.exchange h3{
	font-size:1.4em;
	font-weight:bold;
	text-align:left;
	text-indent:-0.3em;
	padding-bottom:0.8em;
}

.exchange ul{
	width:105%;
	font-size:0;
	text-align:left;
}
.exchange ul li{
	width:45%;
	margin-right:5%;
	margin-bottom:30px;
	display:inline-block;
	font-size:12px;
	vertical-align:top;
}
.exchange ul li p{
	font-size:1.1em;
	padding-left:1.6em;
	text-indent:-1.6em;
	box-sizing:border-box;
	line-height:1.4em;
	padding-top:0.5em;
}



ul:after,
dl:after,
.clear:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}




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

.title{
	padding:30px 0;
}
h1{
	font-size:2.5em;
}
h2{
	font-size:1.6em;
	padding:1.5em 0 0.3em;
}

.exchange{
	width:90%;
	margin:40px auto 0;
	padding-bottom:5%;
}
.exchange h3{
	text-align:center;
	padding-bottom:2em;
}

.exchange ul{
	width:100%;
}
.exchange ul li{
	width:100%;
	margin-right:0%;
	margin-bottom:30px;
}


}