@charset "UTF-8";
/* 電気代削減の「LOOK」カラー一括変更 */
.midashi2{
  color: #000066;/* color 一括変更 */
  border-bottom-color: #000066;/* color 一括変更 */
}
.midashi3{
  color: #ff0080;/* color 一括変更 */
  background-color: #ffeeee;/* color 一括変更 */
}
.midashi4{
  color: #ff0080;/* color 一括変更 */
}
.hako{
  border-color: #77e3ff;/* color 一括変更 */
}
.big-table{
  border-color: #77e3ff;/* color 一括変更 */
}
.dtable div.cell-1{
  border-color: #77e3ff;/* color 一括変更 */
  background-color: #cfffff;/* color 一括変更 */
}
.dtable div.cell-2{
  border-color: #77e3ff;/* color 一括変更 */
}
.midashi1{
  color: #008040;/* color 一括変更 */
}
.nav-menu-button{
  border-color: #cccccc;/* color 一括変更 */
}
.nav-menu-button:hover{
  background-color: #eeeeff;/* color 一括変更 */
}
#suma-nav-left{
  background-color: #0000ff;/* color 一括変更 */
}
#suma-nav-right{
  background-color: #0000ff;/* color 一括変更 */
}
#slidetoggle_menu dl dd p{
  border-color: #0000ff;/* color 一括変更 */
}
#top-gazou{
  background-color: #fff;/* color 一括変更 */
}
.top-gazou-hako{
  color: #000066;/* color 一括変更 */
}
#aside dl dt{
  background-color: #000066;/* color 一括変更 */
}
#aside dl dd p{
  border-color: #000066;/* color 一括変更 */
}
#aside dl dd p a:hover{
  color: #ffcc00;/* color 一括変更 */
}
.footer-copy{
  background-color: #008040;/* color 一括変更 */
}
#footer p a:hover{
  color: #000066;/* color 一括変更 */
}
#page-top a{
  background-color: #00cc66;/* color 一括変更 */
}
#page-top a:hover{
  background-color: #ffaaaa;/* color 一括変更 */
}
ul.tab li{
  background-color: #0080ff;/* color 一括変更 */
}
ul.tab li:hover{
  background-color: #0000ff;/* color 一括変更 */
}
ul.tab li.active{
  background-color: #0000ff;/* color 一括変更 */
}
div.tab-content{
  border-color: #0080ff;/* color 一括変更 */
}
#feed-title{
  color: #0000ff;/* color 一括変更 */
}

/* ピンク　一括変更 */
.hako-pink .midashi2{
  color: #ff3377;/* color 一括変更 */
  border-bottom-color: #ff5577;/* color 一括変更 */
}
.hako-pink .midashi3{
  color: #ff5577;/* color 一括変更 */
  background-color: #ffeeee;/* color 一括変更 */
}
.hako-pink .midashi4{
  color: #ff7777;/* color 一括変更 */
}
.hako-pink .hako{
  border-color: #ffcce6;/* color 一括変更 */
}
.hako-pink .big-table{
  border-color: #ffcce6;/* color 一括変更 */
}
.hako-pink .dtable div.cell-1{
  border-color: #ffcce6;/* color 一括変更 */
  background-color: #ffeaf4;/* color 一括変更 */
}
.hako-pink .dtable div.cell-2{
  border-color: #ffcce6;/* color 一括変更 */
}
.hako-pink hr{
  border-color: #ff0080;
}
/* グリーン　一括変更 */
.hako-green .midashi2{
  color: #00773c;/* color 一括変更 */
  border-bottom-color: #00773c;/* color 一括変更 */
}
.hako-green .midashi3{
  color: #00773c;/* color 一括変更 */
  background-color: #eeffee;/* color 一括変更 */
}
.hako-green .midashi4{
  color: #008040;/* color 一括変更 */
}
.hako-green .hako{
  border-color: #00aa55;/* color 一括変更 */
}
.hako-green .big-table{
  border-color: #00aa55;/* color 一括変更 */
}
.hako-green .dtable div.cell-1{
  border-color: #00aa55;/* color 一括変更 */
  background-color: #aaffaa;/* color 一括変更 */
}
.hako-green .dtable div.cell-2{
  border-color: #00aa55;/* color 一括変更 */
}
/* オレンジ　一括変更 */
.hako-orange .midashi2{
  color: #ff5500;/* color 一括変更 */
  border-bottom-color: #ff5500;/* color 一括変更 */
}
.hako-orange .midashi3{
  color: #ff5500;/* color 一括変更 */
  background-color: #ffffaa;/* color 一括変更 */
}
.hako-orange .midashi4{
  color: #ff6600;/* color 一括変更 */
}
.hako-orange .hako{
  border-color: #ffef80;/* color 一括変更 */
}
.hako-orange .big-table{
  border-color: #ffef80;/* color 一括変更 */
}
.hako-orange .dtable div.cell-1{
  border-color: #ffef80;/* color 一括変更 */
  background-color: #fff9cc;/* color 一括変更 */
}
.hako-orange .dtable div.cell-2{
  border-color: #ffef80;/* color 一括変更 */
}
.hako-orange ul.tab li{
  background-color: #ff8000;/* color 一括変更 */
  color: #fff;
}
.hako-orange ul.tab li:hover{
  background-color: #ff5500;/* color 一括変更 */
}
.hako-orange ul.tab li.active{
  background-color: #ff5500;/* color 一括変更 */
}
div.tab-content{
  border-color: #ff5500;/* color 一括変更 */
}

/* カスタム */
/* same-1:ご利用の流れ */

/* カスタムドロップ(PC用メニュー-アニメーション部分)：メニュー５→６ */
/* ドロップ(PC用メニュー) */
.dropmenu li{
  width: 16.666%;
}
/* トップ画像 */
#top-gazou{
  background-size: 100%;
  background-attachment: fixed;
  background-position: 50% 0%;
  border-bottom: 0px solid #008040;
}
#inner{
  background-attachment: scroll;
}
#footer{
  background-attachment: scroll;
}
/* 箱 */
.hako{
  border-width: 5px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
.midashi3{
  font-size: 28px;
}
/* ＝＝＝＝＝＝＝＝＝＝カスタムスマホ用＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width:768px){
/* スマホ時のIDリンクの調整 */
.suma-link{
  margin-top: -50px;/* スマホ時のヘッダー固定分のリンクへのずれをなくす */
  padding-top: 50px;/* スマホ時のヘッダー固定分のリンクへのずれをなくす */
}
/* スマホ時のカスタムトップ画像の調整 */
#top-gazou{
  background-size: 100% auto;
  background-attachment: scroll;
}

/* トグル(スマホ用メニュー)=メニューの数が6つ以上なら、使わずに#aside-linkにリンク */
/* HTMLですること１：スマホメニューのMENU部分、スマホメニュー右側の<dt>の直後に<a href="#aside-link"><img src="suma-nav-menu-button-right.png" width="68" height="25" alt="menu" class="suma-nav-menu-button-right"></a>入れて、<dd>消えないように<p></p>は消して代わりに<div></div>（中身入れないdiv）を入れる。 */
/* HTMLですること２：#asideの下に<div id="aside-link" class="suma-link"></div>を設置 */
/* #aside-linkを設定するのは、#asideを指定すると#aside本来のmarginとpaddingが塗り替えられてしまうため */
/* CSSでは以下の2項目を設定。 */
#slidetoggle_menu dl dt{
  cursor: default;
}
#slidetoggle_menu dl dt.active{
  background:url("toggle_open.png") 10px 50% no-repeat;
}
/* トグル(スマホ用メニュー)=メニューの数が6つ以上なら、使わずに#aside-linkにリンク 以上 */

/* スマホ時だけasideを表示する */
#aside{
  display: block;
}

}
/* ＝＝＝＝＝＝＝＝＝＝カスタムスマホ用ここまで＝＝＝＝＝＝＝＝＝＝ */