/* @override 
	http://www.7th-arts.co.jp/css/style.css
	http://www.7th-arts.co.jp/css/normalize.css
*/

@charset "UTF-8";

/* Micro clearfix */

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* 必要要素の初期設定 */

html {
  font-size: 62.5%;
}

body {
 width: 100%;
 margin: 0 0 1em;
 padding: 0;
 color:#222;
 font-family: sans-serif;
}

#logo {
	width:120px;
	height:43px;
	margin: 10px 0 0 30px;
	padding:0;
	text-align: center;
	display:block;
}

#logo h1 {
	text-indent: -9999px;
}

a {
 text-decoration:none;
 color:#e4007f;
}

a:link {
	color: #e4007f;
	text-decoration: none;
}

a:visited {
	color: #e4007f;
	text-decoration: none;
}

a:hover {
	color: #FF0000;
	text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
 margin: 0 0 0.5em;
 line-height: 1.1;
 font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", serif;
 letter-spacing:-1px;
}
p {
 margin: 0 0 1em;
 color: #444;
 font-family: 'Asap', sans-serif;
 font-size: 12px;
 font-size: 1.2rem;
 line-height: 1.3;
 text-align: left;
}
ul {
 margin: 0 0 2em;
 padding: 0;
 list-style-position: inside;
}

/* ベースレイアウト */

#wrapper {
 width: 100%;
}
header {
 padding: 0;
 background-color: #3971c8;
 color: #fff;
 overflow: hidden;
}
nav {
 background-color: #c7d6ee;
}
#common-contents {
 width: 88%;
 margin: 2em auto 1em;
}
article.main {
 width: 100%;
}
section {
 margin: 0;
 font-size: 12px;
 font-size: 1.2rem;
line-height:1.5em;
}
section p {
padding:0;
 margin: 0 0 1em 0;
 font-size: 12px;
 font-size: 1.2rem;
line-height:1.6em;
}
aside.side {
 width: 100%;
}
footer {
 width: 100%;
 text-align: center;
 margin:50px 0 0 0;
 padding:0;
 display:block;
}
aside.column.side.cf{
	height:auto;
	margin:0;
	padding:0;
}

/* 画像のスタイル指定 */
 
 #common-banner {
  margin: 0 0 0.5em 0;
  padding:0;
 }
 img {
  width: 100%;
  max-width:100%;
}


 /** Outline **/
#outline {
	float: left;
	width:100%;
	margin: 0 0 1em 0;
	padding: 0;
	text-align: left;
	 font-size: 12px;
 font-size: 1.2rem;
line-height:2em;
}

#outline dl {
	margin: 0;
	padding: 0;
}

#outline dd.syamei {
	float: left;
	width: 6em;
	margin: 0;
	padding: 1em 0 1em 0;
}

#outline dt.name {
	float: left;
	margin: 0;
	padding: 1em 0 1em 0;
}

/* 各要素のデザイン、レイアウト */

header h1 {
 font-family: 'Lora', serif;
 font-weight: 400;
 font-style: italic;
 font-size: 20px;
 font-size: 2.0rem;
 text-align: center;
 margin: 0.5em 0 0.2em 0%;
}
p.tagline {
 font-size: 1.2rem;
 text-align: left;
 color:#fff;
 margin:4px 0 10px 30px;
}
nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 background-color: #c7d6ee;
}
nav ul li {
 display: block;
 width: 100%;
 text-align: center;
 font-size: 16px;
 font-size: 1.6rem;
 line-height: 2.5em;
 color:#f0f0f0;
 border-bottom: 1px solid #000;
}
article {
 margin: 0 0 2em;
 border-bottom: 1px solid #f0f0f0;
}
article.main h1 {
 font-size: 16px;
 font-size: 1.6rem;
}
article.main h2 {
 font-size: 16px;
 font-size: 1.6rem;
 margin-top: 1.5em;
}
aside.side h1 {
 margin-bottom: 0.5em;
 font-size: 12px;
 font-size: 1.2rem;
 color: #333;
 border-bottom: 1px dotted #c0c0c0;
}
aside.side ul {
 margin: 0 0 2.5em;
}
aside.side ul li {
 font-size: 12px;
 font-size: 1.2rem;
 line-height: 1.5;
 color: #555;
}
aside.side ul li ul {
 margin: 0 0 0.3em 1.0em;
}
aside.side ul li ul li {
 color: #666;
}
small {
 font-size: 10px;
 font-size: 1.0rem;
 text-transform: uppercase;
 line-height: 1.5;
}

section#sidebar1 p{
	display:block;
	width:250px;
	text-align:center;
	margin:10px auto;
	padding:0;
}
section#sidebar2 p{
	display:block;
	width:250px;
	text-align:center;
	margin:10px auto;
	padding:0;
}


/* Media Queries による切り替え */

@media only screen and (min-width: 481px) {

 header h1, p.tagline {
 text-align: left;
 }
 p {
  font-size: 12px;
  font-size: 1.2rem;
 }
 nav {
  padding: 0 20px 0 20px;
  margin:0;
 }
 nav ul {
   width: auto;
   padding: 0 20px;
   background-color: #c7d6ee;
 }
 nav ul li {
   float:left;
   width: 90px;
   margin: 0;
   text-align: center;
   font-size: 14px;
   font-size: 1.4rem;
   line-height: 2.4em;
   border-bottom: none;
 }
 article.main blockquote p {
   margin: 0;
   font-size: 0.9em;
 }
 article {
  margin: 0 0 2em;
  border-bottom: none;
}
 article {
  margin: 0 0 2em;
  border-bottom: none;
}
 #sidebar1 {
   width: 47%;
   height:auto;
   padding-right: 3%;
   float: left;
    margin:0 auto;
    text-align:center;
     display:block;
 }
 #sidebar2 {
   width: 47%;
   height:auto;
   padding-left: 3%;
   float: right;
   margin:0 auto;
   text-align:center;
   display:block;
 }
 
}

@media only screen and (min-width: 961px) {

 p {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.4;
 }
 #wrapper {
  width: 958px;
  margin: 0 auto;
  padding: 0 0 20px 0;
  border: 1px solid #f0f0f0;
  border-top: none;
 }
 header {
  padding: 0px;
 }
 nav {
  padding: 0;
 }
 #common-contents {
  width: auto;
  margin: 2em 0 1em;
  padding: 0 30px;
 }
 article {
  border-bottom: none;
 }
 article.main {
  float: left;
  width: 600px;
  padding: 0 30px 0 0;
  margin-right: 29px;
  border-right: 1px solid #f0f0f0;
 }
 aside.side {
  float: left;
  width: 218px;
  margin: 0 auto;
  padding: 10px;
 }
 #sidebar1, #sidebar2 {
  width: 100%;
  padding:0;
  float: none;
 }
 aside.side ul li {
  font-size: 12px;
  font-size: 1.26rem;
  line-height: 1.8;
 }


}