@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic);

body {
	font-family:"Meiryo","Verdana","ＭＳ Ｐゴシック","MS UI Gothic","MS PGothic","Osaka";
	font-size: 16px;
	font-weight: normal;
	line-height: 1.8;
	color: #52443c;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background:url(img/bg.jpg) repeat-x;
}

h1,h2,h3,p,dl,dt,dd{
	margin: 0px;
	padding: 0px;
}

img {
	border: none;
}

hr {
	border:solid #ffbbd1;
	border-width:1px 0 0 0;
	margin-top: 5px;
	height:1px;/* for IE6 */
	clear:both;/* for IE6 */
}

textarea {
	width: 440px;
	font-family:"Meiryo","Verdana","ＭＳ Ｐゴシック","MS UI Gothic","MS PGothic","Osaka";
	font-size: 16px;
	font-size: 16px;
}

input {
	padding: 5px;
	font-size: 16px;
}
--------------------------------------------------------------------------------

/***** Link styles
*******************************************/
a {
	color: #669933;
	text-decoration: none;
	font-weight: bold;
}
a:link		{color: #669933;}
a:visited {color: #669900;}
a:hover		{color: #99cc99;}

.small {
	font-size : 12px;
	line-height:150%;
}

.big {
	font-size : 20px;
}


/*コンテナー（HP全体を包む枠）
---------------------------------------------------------------------------*/
#container {
	background:#ffffff;
	width:900px;
	margin: 0px auto 0px;
	padding: 0px;
}

/*ヘッダー
---------------------------------------------------------------------------*/
#header {
	background:url(img/bg.jpg) repeat-x;
	margin: 0px auto 0px;
}

#header h1 {
	font-size: 10px;	/*文字サイズ*/
	color: #85786c;		/*文字色*/
	overflow: hidden;
	font-weight: normal;
	text-align: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#header img.logo{
width:330px;
height:115px;
}
#header img.picup{
width:570px;
height:115px;
}


/* ======================== */
/* メニューのロールオーバー */
/* ======================== */
#menu {
	margin: 0px 0px 0px 0px;
}
#menu ul { 
	margin: 0; 
	padding :0; 
	list-style-type : none; 
}
#menu li { 
	float:left;
	padding:0px;
	display : inline; 
}
#menu #menu01 a {
	background-image:url(img/mnu/01.jpg); 
	width:112px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu01 a:hover {
	background-image:url(img/mnu/01_over.jpg);
	width:112px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu02 a{
	background-image:url(img/mnu/02.jpg);  
	width:112px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu02 a:hover {
	background-image:url(img/mnu/02_over.jpg);
	width:112px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu03 a{
	background-image:url(img/mnu/03.jpg);  
	width:113px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu03 a:hover {
	background-image:url(img/mnu/03_over.jpg);
	width:113px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu04 a{
	background-image:url(img/mnu/04.jpg);  
	width:113px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu04 a:hover {
	background-image:url(img/mnu/04_over.jpg);
	width:113px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu05 a{
	background-image:url(img/mnu/05.jpg);  
	width:113px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu05 a:hover {
	background-image:url(img/mnu/05_over.jpg);
	width:113px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu06 a{
	background-image:url(img/mnu/06.jpg);  
	width:113px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu06 a:hover {
	background-image:url(img/mnu/06_over.jpg);
	width:113px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu07 a{
	background-image:url(img/mnu/07.jpg);  
	width:112px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu07 a:hover {
	background-image:url(img/mnu/07_over.jpg);
	width:112px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
#menu #menu08 a{
	background-image:url(img/mnu/08.jpg);  
	width:112px; 
	height:58px; 
	background-repeat:no-repeat; 
	display:block;
}
#menu #menu08 a:hover {
	background-image:url(img/mnu/08_over.jpg);
	width:112px; 
	height:58px; 
	background-repeat:no-repeat;
	display:block;
}
.span1 {display:none;}

/*サブメニュー用(メニュー)*/
#menu #submenu a {
	background: url(none) #fbfefc;
	width:200px; 
	height:30px; 
	display:block;
}
#menu #submenu a:hover {
	background: url(none) #fbfefc;
	width:200px; 
	height:30px; 
	display:block;
}

#nav {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style:none;
}	
#nav li {
	float:left; 
	display:block; 
	position:relative;
	z-index:15; 
	margin: 0px 0px 0px 0px;
}

/* you can make a different style for default selected value */
#nav a.selected {
	color:#f00;
}
/* submenu, it's hidden by default */
#nav ul {
	position:absolute; 
	left:0; 
	display:none; 
	margin:0 0 0 -1px; 
	padding:0; 
	list-style:none;
}

#nav ul li {
	float:left;
	border-bottom:1px dotted #d1ecd9;
}

/* display block will make the link fill the whole area of LI */
#nav ul a {
	display:block;
	padding: 10px 0px 2px 10px; 
	background:#97caf5;
	font-size: 15px;
	text-decoration: none;
}
#nav ul a:link 		{ color: #4c6255;}
#nav ul a:visited	{ color: #4c6255;}
#nav ul a:hover		{
	font-style: normal;
	color: #62ba86;
}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
	margin:0 0 0 -2px;
}


/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	background:#ffffff;
	width: 900px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
}

#bnr_msg{
	background: url(img/top.jpg) no-repeat 0 0;
	width: 900px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
}

.non_slider{
	padding-bottom:20px;
}

#contents h2 {
	background: url(img/top_idx_bg.jpg) repeat-x 0 0;
	font-family: 'Lora', serif;
	font-size: 24px;
	color: #8f694c;
}

#contents h3 {
  margin : 0px 0px 5px 0px ;  /*上下に余白を作る場合１番目（上）３番目（下）の０ｐｘに数値を記述*/
}

#contents h4 {
	background:#543e38;
	font-size: 16px;
	color: #ffffff;
	font-weight: normal;
  padding : 2px 5px 0px 14px;
  margin : 5px 0px 5px 0px ;  /*上下に余白を作る場合１番目（上）３番目（下）の０ｐｘに数値を記述*/
  border : solid 0px #A6D7A1 ;
}

#contents h5 {
	background:#ffe1eb;
	font-size: 14px;
	color: #332a29;
  padding : 4px 5px 2px 5px;
  margin : 5px 0px 0px 0px ;  /*上下に余白を作る場合１番目（上）３番目（下）の０ｐｘに数値を記述*/
  border-left : solid 10px #ffa5c2 ;
}

#contents p {
	padding: 0px 10px 5px 15px;
	line-height: 1.8;
}

#contents strong {
	color: #4a2913;
}

#bnr{
width:900px;
margin:0px auto 5px;
}
#bnr img{
width:50%;
height:auto;
}

#bnr img,
#bnr a{
margin:0px;
padding:0px;
}

#bnr img.all{
width:100%;
height:auto;
}

.covid{
width:100%;
font-size:large;
font-weight:bold;
text-align:center;
}
.covid span{
color:#003399;
font-size:larger;
}
.covid a{
border:2px solid #9999cc;
color:#333;
display:block;
text-decoration:none;
}
.covid a:hover{
opacity:0.5;
}

#pay{
width:100%;
text-align:center;
}
#pay img{
width:60%;
height:auto;}

.demo{
font-size:large;
font-weight:bold;
}
.demo .heading {
  overflow: hidden;
  align-items: center;
  background: #8f3356;
  color: #fff;
  height: 40px;
  line-height: 40px;
  display: flex;
}
.demo .heading:before,
.demo .heading:after {
  content: "";
  flex: 1;
  background: #fff;
  padding: 3px 0;
  height: 0;
  transform: rotate(45deg);
 }

ul#bnrshop{
list-style: none; 
width:100%;
display:inline-flex;
justify-content: space-around;
margin:10px 0;
font-size:large;
font-weight:bold;
}
/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	width: 680px;
	float: left;
	display: inline;
	margin: 5px 0px 0px 20px;
  padding : 0px 0px 0px 0px;
	border: 0px solid #ffbbd1;
}

#main em {
	display:block;
	border:1px solid #c7ead6;
	padding: 10px 10px 7px 10px;
	line-height: 1.6;
	font-style: normal;
	background:url(img/em_bg.jpg) repeat-y;
}
#main em strong {
	color: #1e691a;
	font-size: 16px;
}

/*サブコンテンツ
---------------------------------------------------------------------------*/
#sub {
	width: 200px;
	float: left;
	display: inline;
	margin: 5px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
}
#sub ui {
}
#sub li {
	list-style-type: none;
	font-size: 14px;
	line-height: 1.5;
  margin : 0px 0px 5px 0px ;  /*上下に余白を作る場合１番目（上）３番目（下）の０ｐｘに数値を記述*/
  border : solid 0px #A6D7A1 ;
	background:url(img/sub_bg.jpg) repeat;
}

#sub a {
	color: #7e6b5a;
	display:block;
  padding : 20px 5px 20px 15px;
	text-decoration: none;
	font-weight: bold;
	background:url(img/sub_bg.jpg) repeat-y;
}
#sub a:hover {
	color: #ffffff;
	display:block;
  padding : 20px 5px 20px 15px;
	font-weight: bold;
	background:#bab19e;
}

/*「トップスライダー」部分
---------------------------------------------------------------------------*/
.top_img {
	width: 370px;
	margin: 0px 0px 0px 530px;
	border: solid 0px #CCC;
	padding: 150px 0px 15px 0px;
}

/*システム
---------------------------------------------------------------------------*/
.system ul{
padding-left:35px;
}
.system ul.sp{
margin-left:5px;
padding-left:30px;
width:90%;
	border:1px solid #c7ead6;
	font-style: normal;
	background:url(img/em_bg.jpg) repeat-y;}
/*「インフォメーション」部分
---------------------------------------------------------------------------*/
.information_space {
	float:left;
	width: 440px;
	margin: 0px 0px 20px 0px;
}

.information {
	background: #ffffff;
	height: 377px;
	overflow: auto;								/*iframe風*/
	color: #52443c;
	margin: 2px 0px 0px 0px;
	padding: 5px 5px 0px 5px;
}

.information dt {
  clear: left;
	background:#543e38;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.5;
  margin: 0px 0px 0px 0px;
	padding: 2px 5px 0px 5px;
}
.information dt a {color: #ffffff; text-decoration: none;;}
.information dt a:hover	 { color: #ff9817;}

.information dd {
	display:block;
	font-size: 15px;
	line-height: 1.5;
  margin: 0px 0px 6px 0px;
	padding: 5px 2px 2px 10px;
}
.information dd a {color: #cf765d; text-decoration: none; font-weight: bold;}
.information dd a:hover	 { color: #332a29;}

.information span {
	color: #52443c;
	font-size: 10px;
	font-weight: bold;
}

/*------------------------------------*/
/*「ツイッター」部分
--------------------------------------*/
.twitter_space {
	float:left;
	width:440px;
	margin: 0px 0px 0px 0px;
}

.twitter_space div{
padding:10px 0 15px 0;
vertical-align: middle;
}

.twitter_space img{
width:24px;
height:auto;
margin-right:5px;
vertical-align: middle;
}

.twitter {
	background: #ffffff;
	height: 408px;
	overflow: auto;								/*iframe風*/
	color: #52443c;
	font-size: 10px;
	margin: 2px 0px 0px 0px;
	padding: 0px 5px 0px 5px;
}

/*------------------------------------*/
/*漫画バナー
--------------------------------------*/
.comic_space{
float:left;
width:440px;
margin: 10px 0px 0px 0px;
}

.comic_space img{
width:440px;
height:auto;
}

/*------------------------------------*/
/*「アクセス」部分
--------------------------------------*/
.access_space {
	float:right;
	width:440px;
	margin: 0px 0px 20px 0px;
}
.access {
	color: ;
	margin: 2px 0px 3px 0px;
	padding: 3px 5px 5px 8px;
	border: 1px solid #cbb99d;	/*What's Newのフチの右ライン*/
}

.access h3 {
	font-size: 20px;
	font-weight: normal;
}

.access h3:before {   
  font-family: 'FontAwesome';
  content: '\f087';
  margin: 0 5px 0 0px;
}

.access dl dt {
  float: left;
  margin: 0 0 0.2em;
  width: 5.0em;
	text-align: center;
  color: #ffffff;
	font-size: 13px;
}
.access dl dd {
  margin-bottom: 5px;
  margin-left: 4.3em;
  padding-left: 5px;
}

.access img {
	margin: 0px 3px 0px 5px;
}

.first h3 {
	color: #008600;
}

.first dl dt {
	background:#008600;
}
.first dl dd {
  border-bottom: 1px dotted #008600;
}

.second h3 {
	color: #EE6D02;
}

.second dl dt {
	background:#EE6D02;
}
.second dl dd {
  border-bottom: 1px dotted #EE6D02;
}

.third h3 {
	color: #DA369B;
}

.third dl dt {
	background:#DA369B;
}
.third dl dd {
  border-bottom: 1px dotted #DA369B;
}


.fourth h3 {
	color: #663399;
}

.fourth dl dt {
	background:#663399;
}

.fourth dl dd {
  border-bottom: 1px dotted #663399;
}


dl dd span{
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
}


/*フッター
---------------------------------------------------------------------------*/
#footer {
	clear: left;
	background: #bab19e;
	margin: 20px auto 10px auto;
	padding:5px 0px 5px 0px;
	border: 0px solid #664b54;
}

#footer p{
	color: #332a29;			/*文字色*/
	font-weight:bold;
	margin: 0px auto 0px auto;
	padding:0px 0px 0px 0px;
}

#footer a {
	color: #009944;
}


/*インフォメーション
---------------------------------------------------------------------------*/
#info h3 {
	background:#543e38;
	font-size: 18px;
	color: #ffffff;
  padding : 10px 5px 5px 15px;
  margin : 0px 0px 5px 0px ;  /*上下に余白を作る場合１番目（上）３番目（下）の０ｐｘに数値を記述*/
}
.info_date {						/*インフォページの日付部分*/
	text-align: right;
	line-height: 100%;
	font-size: 12px;
	font-weight:bold;
	color: #e0dedb;
	margin: -22px 0px 10px 10px;
	padding: 0px 10px 0px 0px;
}
.info_idx {						/*過去ログ表示*/
	background: #ffe8bc;
	line-height: 100%;
	font-size: 11px;
	font-weight:bold;
	color: #52443c;
	margin: 0px 0px 5px 0px;
	padding: 5px 0px 5px 10px;
}
.info_idx a { color: #52443c; }
.info_idx a:hover { color: #a7004f; }

/* イメージパーツ
---------------------------------------------------------------------------*/
.imgtip{
	border:1px solid #ccc;
	margin: 0px 10px 0px 0px;
	padding:0px;
	}

/*「QA」部分
---------------------------------------------------------------------------*/
/*widthは並べたい枚数にあわせて調整*/
#qa {
    margin-top:15px;
    margin-left:15px;
}
/*widthは写真の大きさにあわせて調整
font-sizeは固定した方が良い*/
#qa dl{
    margin:0px;
    margin-right:3px;
    margin-bottom:1em;
    padding:0px;
    float:left;
    width:635px;
    border:1px solid #ada8a2;
}
#qa dt{
		background: url(img/faq_q_back.gif) 0px 0px repeat-y;
		color: #ffffff;
		font-weight:bold;
    height:2em;
    margin:0px;
    padding:7px 0 0 55px;
}
#qa dd{
		background: url(img/faq_a_back.gif) 0px 0px repeat-y;
		line-height: 1.6;
		color:#5a5a5a;
    height:6em;
    margin:0px;
    padding:11px 10px 11px 55px;
}

/*表(tbl)の文字見出し
---------------------------------------------------------------------------*/
.idx {
	background: url(img/ic_list.gif) 0px 6px no-repeat;
	margin: 0px 10px 0px 10px;
	font-size: 14px;
	padding: 5px 5px 5px 20px;
	color: #583f2f;
}

/*汎用テーブル
---------------------------------------------------------------------------*/
.tbl {
	margin: 0px auto 5px auto;
	padding: 0px;
	border: 0px solid #7ba2ca;
}


.tbl th {
	background: url(img/ic_list.gif) 5px 8px no-repeat #ffffff;
	text-align: center;
	line-height: 1.0;
	font-size: 16px;
	font-weight: bold;
	color: #766454;
	margin: 0px 0px 0px 0px;
	padding: 2px 5px 2px 5px;
	border-bottom: 1px dotted #c7bbb1;
	font-size: 13px;
}

.tbl td {
	background-color: #fffde9;
	font-size: 18px;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 10px;
	border-bottom: 1px solid #c7bbb1;
}

.tbl .small {
	line-height: 1.5;
	font-family:"Meiryo","Verdana","ＭＳ Ｐゴシック","MS UI Gothic","MS PGothic","Osaka";
	font-size: 14px;
}


.go_to_top {
	text-align: right;
	padding: 10px 0px 40px 0px;
}

.clear {
	clear: both; 
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
/*トップへ戻るボタン
---------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 100%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 50px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

/*テキスト装飾
---------------------------------------------------------------------------*/
.catch {
font-weight:bold;
  display: flex;
  align-items: center; /* 垂直中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 1em; /* 線の長さ */
}
.catch:before {
  margin-right: 0.5em; /* 文字の右隣 */
}
.catch:after {
  margin-left: 0.5em; /* 文字の左隣 */
}