@charset "utf-8";

/****************************************
          General Setting
*****************************************/
html,body {
	margin: 0;
	padding: 0;
	font-size: 62.5%; /* 10px */
}
body {
	background: #DCEEFC;
	width: 100%;
  color: #000;
	font-size: 1.6rem; /* 16px */
	font-family:  "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height: 1.5;
}

img {
   vertical-align: bottom;
}

#contents > p {
	text-align: justify;
 	text-justify: inter-ideograph;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-block; }

.pc { display: block; }
.sp { display: none; }

@media screen and (max-width: 639px){
	.sp { display: block; }
	.pc { display: none; }
}


/****************************************
          Typography
*****************************************/
.red {color: #ff0000;}
.fs12 {font-size: 1.2rem; /* 12px */ }
.fs14 {font-size: 1.4rem; /* 14px */ }
.fs18 {font-size: 1.8rem; /* 18px */ }

/****************************************
          Link
*****************************************/
a {
	color: #0070CC;
	text-decoration: none;
}
a:hover {
	color: #0070CC;
	text-decoration: none;
	opacity: 0.70;
}
#contents a:hover,
#contents a:hover img {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
}

/****************************************
          共通
*****************************************/
.flR {float: right;}
.flL {float: left;}
.taR {text-align: right !important;}
.taL {text-align: left !important;}
.taC {text-align: center !important;}
.vtA {vertical-align: top;}

.bold {font-weight:bold !important;}

.mgn0 {margin: 0 !important;}
.mt0{margin-top:0px !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt50{margin-top:50px !important;}
.mt100{margin-top:100px !important;}
.ml0{margin-left:0px !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.mr0{margin-right:0px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mb0{margin-bottom:0px !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.pt0{padding-top:0px !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pl0{padding-left:0px !important;}
.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pr0{padding-right:0px !important;}
.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr25{padding-right:25px !important;}
.pr30{padding-right:30px !important;}
.pb0{padding-bottom:0px !important;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.clear {clear:both;}

/****************************************
          Layout
*****************************************/
#container {
	background: #fff;
	width: 980px;
	margin: 0 auto;
}
.header {
	background:#09f;
}
#footer {
	background:#09f;
}

@media screen and (max-width: 639px){
	#container {
		width: 100%;
	}
}


/****************************************
          header
*****************************************/
#header > div {
	background:#09f;
	width:980px;
	margin:auto;
}

@media screen and (max-width: 639px){
	#header > div {
		width: 100%;
	}
}

/****************************************
          footer
*****************************************/
#footer > div {
	background:#09f;
	width:980px;
	margin:auto;
	padding:20px 0;
}
#footer > div > p {
	color:#fff;
	font-family:meiryo;
	line-height:1.4em;
	font-size:12px;
}

@media screen and (max-width: 639px){
	#footer > div {
		width: 100%;
	}
	#footer > div > p {
		margin: 0 5%;
	}
}

/****************************************
          main_area
*****************************************/
#main_area {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 54px;
}
#main_area h1 {
	padding-top: 10px;
}

@media screen and (max-width: 639px) {
	#main_area {
		width: 100%;
	}
}

/****************************************
          contents
*****************************************/
#contents {
	width: 980px;
	margin: 0 auto;
}

@media screen and (max-width: 639px) {
	#contents {
		width: 100%;
	}
}


/****** scroll ******/
#scroll {
	position: fixed;
  z-index: 9999;
  bottom: 10vh;
  left: 90%;
  width: 100%;
  transition: .3s;
}


/****** btn_info ******/
.btn_info {
  margin-top: 20px;
  text-align: right;
}
.btn_info a {
  display: inline-block;
  border-radius: 100vh;
  background-color: #d2ecfc;
  padding: 5px 5px 5px 20px;
  color: #333;
  font-size: 1.4rem;
  text-decoration: none;
  text-align: left;
}
.btn_info a .btn_info_inner {
  display: inline-block;
  vertical-align: middle;
	padding-right: 15px;
}
.btn_info a img {
  width: 30px;
  vertical-align: middle;
}
.btn_info .btn_info_blank {
  display: inline-block;
  border: 1px solid #666;
  width: 60px;
  height: 1em;
  margin: 0 4px;
  vertical-align: middle;
}

@media screen and (max-width: 639px){
  .btn_info a .btn_info_inner {
		width: calc(100% - 30px);
  }
}

#main_area {
  padding-top: 10px;
}

/* 特集タイトル */
.poster_tit {
  background-color: #DCEEFC;
  padding: 10px;
  color: #09f;
  font-size: 1.4rem;
	font-weight: normal;
  text-align: right;
}
.poster_tit .poster_tit_blank {
  display: inline-block;
  border: 1px solid #09f;
  width: 60px;
  height: 1em;
  margin: 0 4px;
  vertical-align: middle;
}
@media screen and (max-width: 639px){
  .poster_tit .poster_tit_blank {
    width: 40px;
  }
}