@charset "utf-8";


ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/*===============================================
●共通設定
===============================================*/
body {
    font: 14px/1.5 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%;
}

h1,h2,h3,h4,h5,h6,div,p,ul,ui{
    font-size: 100%;
    margin: 0;outline: 0;padding: 0;
    vertical-align: baseline;
}

a{
    text-decoration:none;
}

a:link {
    color:000000;
    outline:0;
}

a:visited {
    color:#4a4a4a;
}

a:hover, a:active{
color:#dc143c;
}

/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after, ul.post li:after,nav#mainNav .inner:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post, ul.post li,nav#mainNav .inner{zoom: 1;}


/* コンテンツレイアウト設定*/
#wrapper, .inner{
margin:0 auto;
width:900px;
}

#content{
float:right;
width:550px;
padding:22px 0 0px;
}

#sidebar{
float:left;
width:330px;
padding:22px 0 0px;
}

#footer{
clear:both;
} 

/*ヘッダートップ設定*/
#header{
width:900px;
margin:0 auto;
background:#ffffff url(images/footer2.gif) repeat-x;
margin-top:0px;
text-align:left;
}

#header_inner{
width:900px;
margin:0 auto;
padding:30px 0 35 20px;
color:#ffffff
}

#rogo{
font-size:24px;
font-weight:bold;
}
.logo span{
font-size:12px;
font-weight:normal;
}

#header h1{
font-size:11px;
color:#ffffff;
}


.post{
margin:0 0 20px 0;
padding:20px 10px 20px 20px;
border:1px solid #000000;/*お知らせ下部ライン色*/
background: #ffffff;
}

/* メインコンテンツ枠
*****************************************************/
h2.title{
clear:both;
margin: 0;
padding:1px 10px 7px 10px;
height: 25px;
line-height: 35px;
font-size:140%;
color:#ffffff;
border:1px solid #000000;/*メインコンテンツ上部ライン色*/
border-bottom:0;
text-align: center;
background:#ffffff url(images/titleback.gif) repeat-x 0 100%;
}


/* サイドバー全体枠点線
-------------*/
section.widget ul, .widget_search, #calendar_wrap, .textwidget{
margin:0 0 20px 0;
padding:10px 10px 10px 17px;
border:1px solid #000000;/*その他下部ライン色*/
background: #ffffff;
}

section.widget ul ul{
border:0;
margin:0;
padding:0 0 0 10px;
}

section.widget h3{
clear:both;
margin:0;
padding:7px 10px 7px 10px;
font-size:110%;
border:1px solid #000000;/*その他上部ライン色*/
border-bottom:0;
color:#ffffff;
background:#ffffff url(images/titleback.gif) repeat-x 0 100%;
}

section.widget li a{
display:block;
padding:7px 0 7px 15px;
background:url(images/appleaikon.jpg) no-repeat 0 12px;
border-bottom:1px dashed #000000;
}

section.widget li:last-child a{border:0;}

#searchform input[type="text"]{
line-height:1.7;
height:24px;
width:90px;
vertical-align:bottom;
}


/* Wath new書式設定
-------------*/
.news p{
clear:both;
padding-bottom:2px;
border-bottom:1px dashed #000000;
}


.news p:last-child{border:0;}

.news p a{
display:block;
padding:5px 0;
color:#000000;
}

.news a span{
color:#000000;
font:normal 90% Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}

.news span{padding-left:10px;}

.news a:hover span{color:#dc143c;}


/* メインコンテンツ書式設定
------------------------------------------------------------*/
ul.post{
padding:0;
}

ul.post li{
margin:0 10px;
padding:20px 0 15px;
border-bottom:1px dashed #000000;
}

ul.post li:last-child{border:0;}

ul.post img{
float:left;
margin:0 15px 5px 10px;
}

ul.post h3{
margin:0 0 10px 10px;
font-size:14px;
font-weight:normal;
color:#333333;
border:0;
}

/*フッター設定*/
#footer{
width:900px;
margin:0 auto;
background:#ffffff url(images/footerber.gif) repeat-x;
text-align:left;
}

#footer_inner{
width:900px;
margin:0 auto;
padding:15px 0 50 20px;
color:#ffffff
}

#address{
padding:0px 0 5 40px
}

/* 注文ボタン位置
------------------------------------------------------------*/
tyuumonbotan {
              margin-left: auto;
              margin-right: auto;
              width: 90%; padding: 10px;
}

/* TOPへ戻る▲
------------------------------------------------------------*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 50px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.8;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/* メールフォーム設定
------------------------------------------------------------*/
form {
    /* フォームをページの中央に置く */
    margin-right: auto;
    width: 80%;
     /* フォームの範囲がわかるようにする */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;

}

label {
    /* すべてのラベルを同じサイズにして揃える */
    display: inline-block;
    width: px;
    text-align: left;
    background-color: #eeeeee;
}

textarea {
    /* 複数行のテキストフィールドをラベルに揃える */
    vertical-align: top;

    /* テキスト入力に十分な領域を与える */
    height: 10em;
    width: 22em;

    /* ユーザが textarea を垂直方向にリサイズできるようにする*/
    resize: vertical;
}
.button {
    /* ボタンを他のテキストフィールドと同じ場所に置く */
    padding-left: 170px; /* label 要素と同じサイズ */
}
button {
    /* このマージンは、ラベルとテキストフィールドの間のスペースと
       おおよそ同じスペースを表す */
    margin-left: .5em;
}

/*-------- order.htm用に追加 --------*/
form p {
    position: relative;
    margin: 0;
}

.errorMsg {
    position: absolute;
    top: 3px;
    left: 430px;/*元345*/
    color: red;
    font-size: 12px;
}

.okMsg {
    position: absolute;
    top: 3px;
    left: 430px;/*元345*/
    color: green;
    font-size: 12px;
}

.haveTo {
    color:red;
    font-size: 9px;
}

.post-msg {
    font-size: 10px;
}

.adressMsg {
    font-size: 12px;
}

.lastErrorMsg {
    color: red;
}

.lastOkMsg {
    color: green;
}

/*===============================================
●style.css 画面の横幅が769px以上(PC用
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
}

/* PC・タブレット用メインメニュー設定 */
div.menubar {
   background-color: #ffffff; /* バーの背景色 */
   border-top: 0px double #800000; /* バーの上端線 */
   border-bottom: 0px double #800000; /* バーの下端線 */
   min-width: ; /* メインメニュー全部が収まる最低横幅 */
   width: 900px;
   margin: auto;
}

div.menubar ul#menu {
   margin: 0px 0px 0px 0px; /* メニューバー外側の余白 */
   padding: 0px; /* メニューバー内側の余白 */
   height: 40px; /* メニューバーの高さ */
}
div.menubar ul#menu li {
   width: 128px; /* メニュー項目の横幅 */
   height: 40px; /* メニュー項目の高さ(「メニューバーの高さ」と一致させる) */
   float: left;
   list-style-type: none;
   position: relative;
}
div.menubar ul#menu a {
   background-color: #ffffff; /* メニュー項目の背景色 */
   color: #ffffff; /* メニュー項目の文字色 */
   line-height: 40px; /* メニュー項目のリンクの高さ(「メニュー項目の高さ」と一致させる) */
   text-align: center; /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none; /* メニュー項目の装飾(下線を消す) */
   display: block;
   border: 0px #000000 solid; /* 枠線 */
   background-image:url(images/menubotton.gif);/*背景イメージ*/
   width: 100%;
   height: 100%;
}
div.menubar ul#menu a:hover {
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色 */
   color: #cc0000; /* メニュー項目にマウスが載ったときの文字色 */
   background-image:url(images/menubottonover.gif);/*背景イメージ*/
}
/* メニューバー直後のClearfix */
div.menubar ul#menu { zoom:1; }
div.menubar ul#menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }

div.menubar ul#menu ul.sub {
   background-color: #cc0000; /* サブメニュー全体の背景色 */
   border-width: 1px 1px 0px 1px; /* サブメニュー全体の枠線の太さ */
   border-style: solid; /* サブメニュー全体の枠線の線種 */
   border-color: #ffffff; /* サブメニュー全体の枠線の色 */
   margin: 0px;
   padding: 0px;
   display: none;
   position: absolute;
}
div.menubar ul#menu ul.sub li {
   width: 126px; /* サブメニュー1項目の横幅 */
   height: 35px; /* サブメニュー1項目の高さ */
   border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */
   border-style: solid; /* サブメニュー1項目の枠線の線種 */
   border-color: #ffffff; /* サブメニュー1項目の枠線の色 */
}
div.menubar ul#menu ul.sub li a {
   line-height: 35px; /* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */
   text-align: left;  /* サブメニュー1項目の項目名の配置(左寄せ) */
   text-indent: 5px;  /* サブメニュー1項目の項目名前方の余白 */
}
div.menubar ul#menu ul.sub li a:hover {
   background-color: #ffdddd; /* サブメニュー項目にマウスが載ったときの背景色 */
   color: #cc0000; /* サブメニュー項目にマウスが載ったときの文字色 */
}

/*===============================================
●smart.css 画面の横幅が768px以下(スマホ用
===============================================*/
@media screen and (max-width:768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
}
/* レイアウト１カラムへ変更 */
@media only screen and (max-width: 768px){
 #wrapper, .inner{width:100%;}

    #header{width:96%;padding:0 2%;margin-top:0px;}

    .contact{padding:10px 0 10px;}

  nav#mainNav{width:95%;}

    nav#mainNav ul{margin:0 auto;}
    nav#mainNav ul ul{padding:0;}

    nav div.panel{float:none;}

    #mainImg img{width:98%;height:auto;}

    #content, #sidebar{clear:both;width:95%;float:none;margin:0 auto;padding:10px 0;}

    .banner{width:100%;margin:0 auto;text-align:center;}
  p.banner img{width:100%;height:auto;}
    section.widget_search{text-align:center;}
    #calendar_wrap table{width:260px;}
    #footer {width:96%;padding:0 2%}
    #footer li{;margin-bottom:10px;}
    
}

/* スマホ用・PC用メニュー表示非表示設定 */
#menu {
  display: none;
}

@media screen and (min-width : 768px) {
  #menu {
    display: block;
  }
  .slicknav_menu {
    display: none;
  }

 @media only screen and (max-width: 768px){
  #wrapper, .inner{width:100%;}

    #header{width:96%;padding:0 2%;}

    .contact{padding:10px 0 10px;}

   nav#mainNav{width:95%;}

    nav#mainNav ul{margin:0 auto;}
    nav#mainNav ul ul{padding:0;}

    nav div.panel{float:none;}

    #mainImg img{width:98%;height:auto;}

    #content, #sidebar{clear:both;width:95%;float:none;margin:0 auto;padding:10px 0;}

    .banner{width:100%;margin:0 auto;text-align:center;}
  p.banner img{width:100%;height:auto;}
    section.widget_search{text-align:center;}
    #calendar_wrap table{width:260px;}

    #footer li{margin-bottom:10px;}

}