@charset "utf-8";
@import "https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700)";

/***************************************************************/
/* -- S-studio2 Site Revision 5.01 common CSS               -- */
/***************************************************************/
/*
**  FONT SIZE CHART
**
**  18px : 150%
**  17px : 141.7%
**  16px : 133.4%
**  15px : 125%
**  14px : 116.7%
**  13px : 108.4%
**  12px : 100%
**  11px : 91.7%
**  10px : 83.4%
**
*/

/*-----------------------------------------*/
/*css reset*/
/*-----------------------------------------*/
body,div,span,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,tr,th,td,embed,object {
margin: 0;
padding: 0;
vertical-align: baseline;
}
/*-----------------------------------------*/


/*-----------------------------------------*/
/*common*/
/*-----------------------------------------*/
html {
	/* ページに常にスクロールバーを表示 */
	overflow-y: scroll;
}
body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #EFEFEF;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(../img/common/bg_stripe1.jpg);
	background-repeat: repeat;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	color: #333;
}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}
h1 {
	font-size: 1.4em;
	font-weight: bold;
	line-height: 150%;
	margin-top: 0;
	margin-left: 12px;
	margin-right: 12px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
h2 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 150%;
	margin-top: 0;
	margin-left: 12px;
	margin-right: 12px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
h3 {
	font-size: 1.1em;
	font-weight: bold;
	line-height:150%;
	margin-top: 0;
	margin-left: 12px;
	margin-right: 12px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
h4 {
	font-size: 1em;
	font-weight: bold;
	line-height:150%;
	margin-top: 0;
	margin-left: 12px;
	margin-right: 12px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
h5 {
	font-size: 0.9em;
	font-weight: bold;
	line-height:150%;
	margin-top: 0;
	margin-left: 12px;
	margin-right: 12px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
p {
	font-size: 0.85em;
	line-height:150%;
	margin-top: 12px;
	margin-bottom: 12px;
}
/*-----------------------------------------*/
/*大枠*/
/*-----------------------------------------*/
#main_contain {
	width: 980px;
	background-color: #FFFFFF;
	margin: 0 auto;
}
.container {
	width: 980px;
	background-color: #FFFFFF;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
}
/*-----------------------------------------*/
/*header area*/
/*-----------------------------------------*/
.header_area {
	height: 70px;
	background-image: url(../img/common/bg_stripe2.gif);
	background-repeat: repeat;
	padding-bottom: 10px;
}
.header_l { /*ロゴ部・ヘッダー左-*/
	background-color: #414042;
	height: 70px;
	width: 350px;
	float: left;
}
.header_r { /*ヘッダー右-*/
	background-color: #414042;
	height: 70px;
	width: 630px;
	float: right;
}
.header_rt { /*ヘッダー右上（RightTop)・サイトマップガイド-*/
	background-color: #414042;
	height: 30px;
	width: 630px;
}
.head_subnav ul {
	text-align: right;
	padding-top: 4px;
	padding-right: 10px;
}
.head_subnav li {
	color: #FFF;
	font-size: 0.7em;
	margin-right: 25px;
	text-decoration: none;
	display: inline;
}
.head_subnav ul li a {
	color: #FFF;
	text-decoration: none;
}
.head_subnav ul li a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: underline;
}


/*sns area*/
.head_sns_area ul {
	height: 35px;
	text-align: right;
	padding-top: 8px;
	padding-right: 28px;
}
.head_sns_area li {
	font-size: 1.0em;
	text-decoration: none;
	display: inline;
	background-color: #0a090b;
	border: 2px solid #989898;
	padding-top: 5px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
	margin-right: 10px;
}
.head_sns_area li span {
	border: 1px solid #989898;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	margin-right: 1px;
	margin-left: 1px;
}
.head_sns_area ul li a {
	text-decoration: none;
}
.snsicon-alt { /*シェアアイコンCSS無効時用代替文字*/
	text-decoration: none;
	display:none;
}




/*-----------------------------------------------------------*/
/*2024フォントベースSNS系ボタン*/
/*-----------------------------------------------------------*/

/*icomoon*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ygylbm');
  src:  url('fonts/icomoon.eot?ygylbm#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ygylbm') format('truetype'),
    url('fonts/icomoon.woff?ygylbm') format('woff'),
    url('fonts/icomoon.svg?ygylbm#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  voice-volume: silent;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-hatebu:before {
  content: "\e900";
}
.icon-pocket:before {
  content: "\e901";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-twitter:before {
  content: "\e903";
}



.icon-twitter {
	color: #989898;
	margin-left: 3px;
	margin-top: 2px;
}
.icon-facebook {
	color: #989898;
	margin-left: 3px;
	margin-top: 2px;
}
.icon-hatebu {
	color: #989898;
	margin-left: 3px;
	margin-top: 2px;
}
.icon-google-plus {
	color: #989898;
	margin-left: 3px;
	margin-top: 2px;
}
.icon-pocket {
	color: #989898;
	margin-left: 3px;
	margin-top: 2px;
}

.twitter-fore-color span:hover {
	color: #fff;
	background-color: #00a8e8;
}
.facebook-fore-color span:hover {
	color: #fff;
	background-color: #445FAC;
}
.hatena-fore-color span:hover {
	color: #fff;
	background-color: #2C6EBD;
}
.google-fore-color span:hover {
	color: #fff;
	background-color: #DE5644;
}
.pocket-fore-color span:hover {
	color: #fff;
	background-color: #EE4256;
}

ul li .twitter-fore-color {

}

/*-----------------------------------------*/
/*mainnavi area*/
/*-----------------------------------------*/
#mainnavi_area {
	width: 980px;
	height: 34px;
	background-color: #FFFFFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #BBB;
	border-bottom-color: #BBB;
	text-align: center;
	clear: both;
}
/*-----------------------------------------*/
/*topicpath area パンくず*/
/*-----------------------------------------*/
#topicpath_area {
	width: 980px;
	background-color: #DDD;
	height: 30px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#topicpath_area .breadcrumb {
	padding-left: 16px;
}
#topicpath_area .breadcrumb li {
	float: left;
	text-shadow: 1px 1px 0px #fff;
	font-size: 0.75em;
	padding-left: 4px;
	padding-right: 1px;
	padding-top: 7px;
	list-style-type: none;
	color: #000;
}
#topicpath_area .breadcrumb li a {
	text-decoration: none;
	padding-left: 4px;
	padding-right: 1px;
	color: #000;
}
#topicpath_area .breadcrumb li a:hover, a:active, a:focus {
	text-decoration: underline;
}
/*-----------------------------------------*/
/*footer*/
/*-----------------------------------------*/
.footer {
	background-color: #dedede;
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
	margin-bottom: 15px;
	width: auto;
	height: 65px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666;
}
.footer_area {
	height: 40px;
	width: 980px;
	margin: 0 auto;
	padding-top: 20px;
}
#footerbanner_contain h3 {
	border-bottom-style: none;
	padding-top: 15px;
	padding-left: 22px;
	margin-bottom: -10px;
}
.footer .footer_nav {
	margin-left: 30px;
	height: 15px;
	width: 530px;
	float: left;
}
.footer ul li {
	float: left;
	font-size: 0.7em;
	text-align: left;
	margin-right: 30px;
	text-decoration: none;
	list-style-type: none;
}
.footer ul li a {
	text-decoration: none;
}
.footer ul li a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: underline;
}
.footer .footer_copy {
	width: 400px;
	float: left;
	height: 15px;
	font-size: 0.7em;
	text-align: right;
}
.footer_copy p {
	margin: 0px;
	padding: 0px;
	font-size: 0.9em;
}
/*-----------------------------------------*/
/*上に戻るスクロールボタン*/
/*-----------------------------------------*/
.pageback_btn_area {
	background-color: #FFF;
	width: 980px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.btn_column {
	width: 67px;
	height: 24px;
	float: right;
	margin-top: -25px;
}
.page-back_btn {
/*
	margin-left: 36px;
*/
}
.page-back_btn a:hover img {
  opacity: 0.3;
/*
  filter: alpha(opacity=40);
*/
}

/*-----------------------------------------*/
/*float/clear*/
/*-----------------------------------------*/
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 15px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 15px;
}
.clearflt { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
}
.main_cont .img_right {
	float: right;
	margin-left: 15px;
	margin-right: 10px;
}
.main_cont .img_left {
	float: left;
	margin-right: 15px;
}