@font-face {
   font-family: Sawarabi Gothic;
   src: url('fonts/sawarabi-gothic/sawarabi-gothic.ttf') format("truetype");
}

A:link { color: #e67a7a; text-decoration:none; }
A:visited { color: #e67a7a; text-decoration:none; }
A:active { color: #e67a7a; text-decoration:none; }
A:hover { color : #999999; text-decoration: none; }
a:hover img {
     opacity: 0.7;
     filter: alpha(opacity=70);
}

BODY,html { background-image: url(bg.gif); background-attachment: fixed; color: #222222; width:100%; height:100%; min-width: 320;}
BODY,td { font-size : 13px; font-family : "メイリオ"; "Verdana"; line-height : 1.7em; letter-spacing: 1px; padding: 3px; }
BODY,th { font-size : 13px; font-family : "メイリオ"; "Verdana"; line-height : 1.7em; letter-spacing: 1px;}
BODY,ul,li { margin: 0; padding: 0; border: 0; }

.wrap {
	overflow: hidden;
}

p.indent-1 { 
	padding-left:1em;
	text-indent:-1em; 
}

p.big { 
font-size: 15px;
font-weight: bold; }

hr { 
	border: none;
	border-top: dashed 1px #cccccc;
	height: 1px;
	color: #cccccc;
	margin: 0 0 0 0; 
}

.button { 
	color:#000000;
	background-color:#ffffff;
	border-top:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000; 
}
.Pbutton { 
	color:#ffffff;
	background-color:#000000;
	border-top:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000; 
}

.form { 
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999; 
}

/* フォーム（基本サイズ） */
@media (max-width: 320px) {
div#formWrap { width: 100%; }
table.formTable { width: 100%; }
textarea.form { 
	width: 100%;
	height: 100px; }
input.form { width: 250px; }
}
@media (min-width: 800px) {
table.formTable { width: 600px; }
textarea.form { 
	width: 600px;
	height: 150px; }
input.form { width: 300px; }
}

/* フォーム（小サイズ） */
@media (max-width: 320px) {
div#formWrap { width: 100%; }
table.formTable { width: 100%; }
textarea.form_small { 
	width: 100%;
	height: 50px; }
input.form_small { width: 100px; }
}
@media (min-width: 800px) {
table.formTable { width: 600px; }
textarea.form_small { 
	width: 300px;
	height: 50px; }
input.form_small { width: 100px; }
}

.text {	background-color:#ffffff;
	border:solid 1px #E9B2AC;
	text-align : left;
	margin:0;
	padding:10px;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px; }

@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用するスタイル */
   div#text { width: 100%; 
	text-align: left; }
}
@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
   div#text { width: 776px;
	text-align: left; }
}

/* 2カラム用（Twitter兼用300px指定） */
@media (min-width: 800px) {
   /* レイアウト全体領域 */
   .page-cover {
      display: table;
      width: 100%; }
   /* メインカラムの装飾 */
   .main-column {
      display: table-cell;
      vertical-align:top; }
   /* サイドカラムの装飾 */
   .side-column {
      display: table-cell;
      vertical-align:top;
      width: 300px; }
}

/* 2カラム用 */
@media (min-width: 800px) {
   /* レイアウト全体領域 */
   .page-column2 {
      display: table;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
 }
   /* カラム1の装飾 */
   .side-column2-1 {
      display: table-cell;
      vertical-align:top;
      width: 50%; }
   /* カラム2の装飾 */
   .side-column2-2 {
      display: table-cell;
      vertical-align:top;
      width: 50%; }
}

/* 3カラム用 */
@media (min-width: 800px) {
   /* レイアウト全体領域 */
   .page-column3 {
      display: table;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
 }
   /* カラム1の装飾 */
   .side-column3-1 {
      display: table-cell;
      vertical-align:top;
      width: 33%; }
   /* カラム2の装飾 */
   .side-column3-2 {
      display: table-cell;
      vertical-align:top;
      width: 33%; }
   /* カラム3の装飾 */
   .side-column3-3 {
      display: table-cell;
      vertical-align:top;
      width: 33%; }
}

.update-scroll {
	overflow: auto;
	width: 300px;
	height:60px;
	padding:5px;
	margin:0px; 
	background-color: #F5E5DE;
	border: 1px #E9B2AC solid;
	scrollbar-base-color: #F5E5DE;
	scrollbar-arrow-color: #E9B2AC; 
}

.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; }


h1 {	font-family: 'Dancing Script';
	padding-bottom: 0.5em;
	border-bottom: 1px solid #000000; }
h1:first-letter {
	margin-right: .1em;
	font-size: 1.5em; }
h2 {	font-family: 'Dancing Script','Sawarabi Gothic';
	text-align : left;
	position: relative;
	padding: 10px 15px;
	color: #ffffff;
	background-color: #000000;
	border-radius: 7px; }


@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用するスタイル */
   h2 { width: 100%; 
	text-align: left; }
}

@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
   h2 { width: 770px;
	text-align: left; }
}

   h3 { font-family: 'Dancing Script','メイリオ';
	color: #666666;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #cccccc; }
   h3:first-letter { 
	margin-right: 0.1em;
	font-size: 1.5em; }
   h4 { font-family: 'Dancing Script','メイリオ';
	color: #666666;
	padding-bottom: 0.5em;
	font-size: 15px;
	border-bottom: 1px dashed #cccccc; }


/* トップ絵のレスポンシブ対応 */
.topimg { display: block !important; }
.topimg_small { display: none !important; }

@media only screen and (max-width: 800px) {
    .topimg { display: none !important; }
    .topimg_small { display: block !important; }
}


IMG.link { 
	margin: 1px;
}

/* サンプル画像のレスポンシブ対応 */
.img_sample { display: block !important; }
.img_sample_small { display: none !important; }

@media only screen and (max-width: 800px) {
    .img_sample { display: none !important; }
    .img_sample_small { display: block !important; }
}

#hr_line {
    border-top : dashed 1px #cccccc;
    margin: 0em; padding: 0em; 
}

.page-top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 30px;
}
.page-top a {
    display: block;
    background-color: #666666;
    border-radius: 10%; 
    text-align: center;
    color: #FFFFFF;
    font-size: 30px;
    text-decoration: none;
    padding: 20px 20px;
    filter:alpha(opacity=80);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.page-top a:hover {
    display: block;
    background-color: #000000;
    border-radius: 10%; 
    text-align: center;
    color: #FFFFFF;
    font-size: 30px;
    text-decoration: none;
    padding: 20px 20px;
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

#navi-option {  /* ナビゲーションによる位置ずれ調整用 */
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
#navi {
  position: relative;
  width: 800px;
  margin: 0;
  padding: 0;
}
#container {
  position: relative;
  width: 800px;
  margin: 0;
  padding: 0;
}

#menu {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
}
#menu li {
  float: left;
  width: 20%;
  text-align: center;
  background-color: #000000;
  border-radius: 0 0 30px 30px;
  list-style-type: none;
  position: relative;  /* z-indexの指定や子要素の基準とするために指定 */
  z-index: 100;  /* ドロップダウンしたメニューが隠れないように */
}
#menu li a {
  padding: 5px 0 5px;
  border-top: none;
  border-right: none;
  background: none;
  color: #ffffff;
  font-family: 'Dancing Script','メイリオ';
  font-weight: bold;
  font-size: 15px;
  display: inline-block;
  margin: auto;
}
#menu li a:hover {
  background: none;
  color: #808080;
}
#menu li a:active {
  color: #808080;
}
#menu li ul.sub-menu {
  display: none;  /* サブメニューは最初は非表示にしておく */
  position: absolute;  /* 絶対配置にしておかないとうまくいかない */
  top: 2em;
  left: 30%;
}
#menu li:hover ul.sub-menu {
  display: block;    /* マウスオーバー時にサブメニューを表示する */
}
#menu li ul.sub-menu li {
  float: none;  /* サブメニューはフロートさせないので解除 */
}