@charset "utf-8";
@import url("html5reset.css");

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

body {
	max-width:980px;
	min-width:320px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-size: 14px;
	line-height: normal;
  background:url(../images/back.gif);
}
#wrapper {
	border: 1px solid #CCC;
  background:#FFFFFF;
}
#header {
  background:url(../images/head.jpg);
  padding-top:60px;
  height:90px;
}
#header h1 {
  font-size:24px;
  padding-left:10px;
}
#header h1 a {
  color:#000099;
}
#header h1 a:hover {
  color:#FFFFFF;
}
#header p {
  padding-left:10px;
  color:#FFFFFF;
}
#container {
	float: left;
	margin: 0 -312px 0 0;
	width: 100%;
}
.content {
	float: right;
	width: 100%;
	margin-left: -312px;
}
.box {
	padding: 5px;
}

#main {
	position: relative;
	margin-right: 310px;
	border-right: 1px solid #CCC;
}

#side {
	float: right;
	width: 310px;
	background-color: #FFF;
	border-left: 1px solid #CCC;
}
#footer {
	clear: both;
	text-align: center;
	border-top: 1px solid #CCC;
}

@media screen and (max-width:900px) {
#container, .content, #main, #side2 {
	float: none;
	margin: 0;
	width: auto;
}
#main {
	border-bottom: 1px solid #CCC;
	border-top-style: none;
	border-right-style: none;
}
#side {
	float: none;
	width: auto;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
}
}



/* menu */
#menu ul {
  background:#67a3e1;
  overflow:hidden;
  padding:2px;
}
#menu li {
  float:left;
}
#menu li a{
	display: block;
  color:#FFFFFF;
  font-size:12px;
  font-weight:bold;
  letter-spacing:1px;
  line-height:20px;
  text-decoration:none;
  padding:5px 8px;
  border-radius:3px;
  text-align:center;
}
#menu a:hover{
  color:#000066;
  background:#FFFFFF;
}
#toggle{ 
	display: none;
}
@media screen and (max-width:780px) {
#menu ul{
	display: none;
  border-top:1px solid #FCFCFC;
}
#menu li{
	width: 100%;
}
#menu li a {
  text-align:left;
}
#toggle{
	display: block;
	position: relative;
	width: 100%;
	background: #67a3e1;
}
#toggle a{
	display: block;
	position: relative;
	padding: 12px 0 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
#toggle:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #fff;
}
#toggle a:before, #toggle a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 4px;
	background: #67a3e1;
}
#toggle a:before{
	margin-top: -6px;
}
#toggle a:after{
	margin-top: 2px;
}
}

a{
  color:#3333cc;
  text-decoration:none;
}
a:hover {
  color:#3399FF;
}
address {
  font-style:normal;
}



#main h1{
	margin:0 0 10px 0;
	padding:2px 5px;
	border-bottom:5px solid #2b86d5;
	background:#fff;
	color:#0000a7;
	line-height:140%;
	font-weight:bold;
  font-size:16px;
}

#side aside {
  margin-bottom:20px;
}
#side h1 {
  color:#0099FF;
  border:1px solid #CCC;
  border-radius:3px;
  padding:5px;
  margin-bottom:10px;
  box-shadow:1px 1px 1px 0 #CCE6FF;
}



/*top*/
#top {
  overflow:hidden;
}
#top li {
  float:left;
  width:50%;
}
	@media screen and (max-width:640px) {
    #top li {
      float:none;
      width:100%;
    }
  }
#top dl {
  border:1px solid #5c7dbe;
  padding:9px;
  overflow:hidden;
  margin:5px;
}
#top dl dt {
  font-weight:bold;
  color:#5c7dbe;
  padding-left:20px;
  margin-bottom:5px;
  background:url(../images/ico_square.gif) no-repeat 5px 4px #e3e9f4;
  
}
#top dl dd em {
  float:left;
  width:100px;
  height:100px;
  margin-right:5px;
}
#top dl dd p{
}
#top dl dd .next{
  height:15px;
  text-align:right;
}
#top dl dd .next a {
  padding-left:15px;
  background:url(../images/ico_arrow.gif) no-repeat 0px 5px;
  text-decoration:underline;
}

#top dl dd.next a:link {
  background:url(../images/ico_arrow.gif) no-repeat left center;
  padding-left:16px;
}
#top dl dd.next a:visited {
  background:url(../images/ico_arrow.gif) no-repeat left center;
  padding-left:16px;
}


/*------------ search ------------ */
#sitebox {
  overflow:hidden;
}
#sitebox li {
  float:left;
  width:50%;
}
	@media screen and (max-width:640px) {
    #sitebox li {
      float:none;
      width:100%;
    }
  }
#sitebox li dl{
  border:1px solid #DDDDDD;
  margin:5px;
  padding:5px;
}

#sitebox li dt {
  padding-left:5px;
  background-color:#5c7dbe;
  border-left: 5px solid #00008f;
  color:#000066;
  margin-bottom:5px;
}
#sitebox li dt a {
  color:#FFFFFF;
}
#sitebox li dt a:hover {
  text-decoration:underline;
}
#sitebox li dd .imgbox {
  float:left;
  width:120px;
  height:120px;
  border:2px solid #E1E1FF;
  margin-right:5px;
}

#sitebox li dd p {
  line-height:20px;
}
#sitebox li dd .btn {
  clear:left;
  text-align:right;
}
#sitebox li dd .btn a {
  display:inline-block;
  font-size:12px;
  padding:3px 8px;
  color:#000099;
  background-color:#d7efff;
  border:1px solid #D2D2D2;
  text-align:center;
}
#sitebox li dd .btn a:hover {
  background-color:#FF3366;
  color:#FFFFFF;
}




/*　サイトインフォ　*/
.siteImg {
  text-align:center;
  margin-bottom:20px;
}
.siteImg img {
  border:1px solid #7b7b7b;
}

#site_contents h2 a:link {
color:#000066;
text-decoration:none;
}
#site_contents h2 a:visited {
color:#000066;
text-decoration:none;
}

/*携帯*/
#mobile {
  width:300px;
  height:110px;
  text-align:center;
  padding-left:180px;
  padding-top:10px;
  background:url(../images/mobile.gif);
  voice-family: "\"}\"";
  voice-family:inherit;
  width:120px;
  height:100px;
}
#mobile img {
  border:1px solid #000000;
}


/*サイトレビュー*/
#site_review {
  padding:10px;
}
#site_review h2 {
  background:url(../images/ico_hito.gif) no-repeat 0px 3px;
  padding-left:26px;
  color:#cc0000;
}

#site_review p{
  background-image:url(../images/line30.gif);
  line-height:30px;
  padding:5px;
  margin-bottom:20px;
}


/*　サイト導き　*/
.guide {
  text-align:center;
  font-weight:bold;
  margin-bottom:20px;
}
.guide a {
  display:inline-block;
  margin:0 auto;
  padding:10px;
}
.guide a {
  color: #040;
  background: #efefef;
  border:1px solid #a6a6a6;
  box-shadow:1px 2px 2px #ccc;
}
.guide a:hover {
  color:#F33;
}

.guide a img {
  vertical-align:middle;
  margin-right:5px;
}
/*------------- スクロールトップ -------------*/
#page-top {
    position: fixed;
    bottom: 35px;
    right: 10px;
    text-align: center;
		_width:30px;
}
#page-top a {
    background: #247fd2;
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    display: block;
    border-radius: 3px;
		padding:5px 10px;
}
#page-top a:hover {
    text-decoration: none;
    background:#58a7df;
		color:#FFFF00;
}



/*------------- リンク -------------*/
#link {
  overflow:hidden;
  margin-left:5px;
}
#link li {
  background:url(../images/ico_dots1.gif) no-repeat 0px 7px;
  padding-left:10px;
}

/*------------- 動画 -------------*/
#video {
	border:1px solid #ff0066;
	margin-bottom:20px;
	overflow:hidden;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
  margin:10px;
}
#video .label {
	background:#f7005a;
	color:#FFF;
	padding:3px 10px;
	text-align:center;
  margin:0 -9px 5px;
}
#video .title1 {
}
#video .movie {
  float:left;
  margin:10px;
}
#video img {
	max-width:100%;
	height:auto;
}

#video ul {
	overflow:hidden;
  margin-top:5px;
}
#video li {
	float:left;
}
#video li a {
  display:block;
  color:#f7005a;
	white-space:nowrap;
  border:1px solid #f7005a;
  padding:2px 5px;
  margin:3px;
  border-radius:3px;
}
#video li a:hover {
  background:#f7005a;
  color:#FFF;
}


@media screen and (max-width:480px) {
	#video {
		text-align:center;
		margin:10px;
	}	
	#video .movie {
    float:none;
		margin: 0 auto 5px;
	}
  #video li {
    text-align:left;
  }
}

/*------------- feed体験談 -------------*/
#feedList {
  margin-bottom:20px;
}
#feedList li {
  line-height:1.3em;
  padding-left:5px;
  margin-bottom:5px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
#feedList li a {
  color:#36F;
}