﻿@media screen and (max-width: 640px) {
    /*-- このコメント行の下に、スマートフォン用のCSSを記述 --*/
    /*************************  基本設定 */
    body {
    /* width: 100%; */
    margin: 0px;
    font-size: 1em;
    text-align: center;
    line-height:1.5;
    color:#333;
    font-family:verdana,'MS UI Gothic',sans-serif;
    background:url(img/bg_body.jpg) repeat-x #A2A78E;
    }
    div:after{
    content:"clear";
    height:0px;
    clear:both;
    display: block;
    visibility:hidden;
    }
    div{
    zoom:1;
    }   
    
     /*************************  テキスト装飾 */
    a{color:#5E5E3E;}
    a:hover{color:#333;}
    .small{font-size:1em;}
    .error{color:#ff0000;}
    
    /*************************  レイアウト */
    #layout{
        width:100%;
        text-align:left;
        margin:auto;
        padding:auto;
    }
        

    /*************************  ヘッダ */
    #header{
    position:relative;
    height:120px;
    }
    #header h1{
    font-size:0.8em;
    font-weight:normal;
    color:#A2A78E;
    margin:0;
    padding:15px 0 0 0;
    }
    #logo{
    position:absolute;
    bottom:10px;
    left:0px;
    background:url(img/bg_logo.jpg) no-repeat;
    width:100%;
    height:auto;
    }
    #logo a{
    /* display:block; */
    width:100%;
    height:auto;
    text-decoration:none;
    overflow:hidden;
    color:#fff;
    font-weight:bold;
    }
     /*************************  メインメニュー */
    #mainmenu{
    font-size:14px;
    position:absolute;
    right:0;
    bottom:0px;
    top:-35px;
    }
    #mainmenu ul{
    margin:0;
    padding:0;
    }
    #mainmenu li{
    float:left;
    padding:0;
    margin:0 2px 0 0;
    list-style-type:none;
    }
    #mainmenu li span{
    display:none;
    }
    #mainmenu a{
    display:block;
    text-decoration:none;
    color:#fff;
    text-align:center;
    padding:0 10px;
    }
    #mainmenu a:hover{
    color:#000;
    }
    #mainmenu .active{
    color:#fff;
    text-decoration:underline;
    }
    /*************************  子階層メニュー */
    #childmenu{
    margin:0 0 20px 0;
    padding:0px;
    display: none;
    }
    #childmenu ul{
    margin:0;
    padding:0;
    list-style:none;
    }
    #childmenu li{
    margin:0 0 1px 0;
    padding:0px;
    width:180px;
    border-bottom:1px dotted #999;
    }
    #childmenu a{
    display:block;
    font-size:12px;
    line-height:20px;
    padding:0 0 0 16px;
    text-decoration:none;
    background:url(img/bg_childmenu.gif) no-repeat left center;
    color:#999;
    }
    #childmenu a:hover{
    color:#333;
    }
    #childmenu .active{
    color:#333;
    }

    /*************************  パンくずリスト */
    #pagenavi{
    font-size:0.8em;
    margin:0 0 10px 0;
    color:#666;
    }
    #pagenavi a{
    color:#666;
    }
    
    /*************************  メイン＆サイドコンテンツ領域 */
    #contents{
    padding:15px 0 0 ;
    background:url(img/bg_contents.gif) no-repeat;
    }
    #contents_inner{
    padding:0 15px 0 15px;
    background:#fff;
    }
     /*************************  メインコンテンツ */
    #main{
    float:center;
    width:100%;
    }
    h2#pagetitle{
    font-size:1.6em;
    margin:0 0 20px 0;
    padding:20px 0;
    line-height:1.2;
    color:#333;
    background:url(img/bg_pagetitle.jpg) no-repeat left bottom;
    }
    h2#pagetitle span{
    font-size:10px;
    font-weight:normal;
    line-height:1.0;
    padding:0 0 0 10px;
    margin:0;
    color:#666;
    }
    h3{
    font-size:1em;
    line-height:33px;
    margin:0 0 10px 0;
    padding:0 0 0 15px;
    font-weight:bold;
    color:#fff;
    background:url(img/bg_h3.gif) no-repeat;
    clear:both;
    }

    /*************************  メインコンテンツ入力領域 */
    .page_contents{
        overflow:hidden;
        width:100%;
        margin:0 0 20px 0;
        }
    
   /*************************  サイドバー */
   #side{
    /* float:right; */
    width:180px;
    line-height:1.2;
    }

    #side .sidebox,
    #side .sidebox01,
    #side .sidebox02{
    position: absolute;
    top: 50px;
    width:100%;
    margin:0 0 0 0;
    padding:0;
    overflow:hidden;
    }

    .sidebox02 ul{
        margin:0 0 0 0px;
        padding:0;
        font-size:0.8em;
        color:#999;
        list-style:none;
        }
    
    .sidebox02 li{
        display: inline-block;
    }
    #selected_img{
        border-bottom: 0px solid; 
        border-left: 0px  solid; 
        margin: 2px 0px; 
        width: 80px; 
        float: left; 
        height: 20px; 
        border-top: 0px solid; 
        border-right: 0px solid
    }
    .sidebox02 img{
        border-bottom: 0px solid; 
        border-left: 0px solid; 
        margin-top: 0px; 
        width: 80px; 
        margin-bottom: 0px; 
        float: left;
        height: 20px; 
        border-top: 0px solid; 
        border-right: 0px solid;
    }

    /*************************  ページ最上部移動 */
    #pagetop{
    clear:both;
    text-align:right;
    margin:10px 0 0 0;
    }

    /*************************  フッター */
    #footer{
    text-align:center;
    font-size:0.8em;
    margin:0;
    padding:30px 0 30px 0;
    color:#666;
    font-weight:bold;
    background:url(img/bg_footer.gif) no-repeat;
    }

   /*************************  テーブルセル */
   .left{
    width:40%;
    padding:2px 0 2px 10px;
    border-bottom:1px solid #ddd;
    vertical-align:top;
    background-position:0 8px;
    }
    .right{
    width:60%;
    padding:2px 0 2px 2px;
    border-bottom:1px solid #ddd;
    vertical-align:top;
    background:#fff;
    }

    /*************************  プロフィールページ */
    #table_profile{
    width:100%;
    }
    #img_profile{
    float:left;
    width:240px;
    display:block;
    border:1px solid #999;
    margin:0 20px 20px 0;
    padding:3px;
    text-align:center;
    }
    .map{
    width:648px;
    height:300px;
    border:1px solid #ccc;
    margin:0;
    }

/* index.htmlの店舗紹介整形用 */
    .div_top1 {
    /* display: table-cell; */
    vertical-align: top;
    text-align: center;
    }
    .div_top2 {
        display: table-cell;
        vertical-align: top;
    }
    
    .shop_img {
        border-bottom: 0px solid; 
        border-left: 0px solid; 
        margin: 0px 10px; 
        width: 200px;
        float: center; 
        height: 200px;
        border-top: 0px solid; 
        border-right: 0px solid
    }

/* Googlemap表示用のiframe */
    .access_map {
        width:100%;
        height:auto;
    }
/* 各ページのタイトル画像用 */
    .title_img{
        border-bottom: 0px solid;
        border-left: 0px solid;
        margin: 0px;
        float: left;
        border-top: 0px solid;
        border-right: 0px solid; 
    }

/*　画面下部の店名、住所など */
    .shop_info{
        width: 95%;
        font-size:75%;
    }
}
    
@media screen and (min-width: 641px) {
    /*-- このコメント行の下に、既存のPC用のCSSを全て入れる --*/
    

    /*************************  基本設定 */
    body{
    margin:0;
    padding:0;
    font-size:85%;
    text-align:center;
    line-height:1.5;
    color:#333;
    font-family:verdana,'MS UI Gothic',sans-serif;
    background:url(img/bg_body.jpg) repeat-x #A2A78E;
    }
    div:after{
    content:"clear";
    height:0px;
    clear:both;
    display: block;
    visibility:hidden;
    }
    div{
    zoom:1;
    }

    /*************************  テキスト装飾 */
    a{color:#5E5E3E;}
    a:hover{color:#333;}
    .small{font-size:1em;}
    .error{color:#ff0000;}

    /*************************  レイアウト */
    #layout{
    width:880px;
    text-align:left;
    margin:auto;
    padding:auto;
    }

    /*************************  ヘッダ */
    #header{
    position:relative;
    height:130px;
    }
    #header h1{
    font-size:0.8em;
    font-weight:normal;
    color:#A2A78E;
    margin:0;
    padding:15px 0 0 0;
    }
    #logo{
    position:absolute;
    bottom:10px;
    left:0px;
    background:url(img/bg_logo.jpg) no-repeat;
    width:499px;
    height:50px;
    }
    #logo a{
    display:block;
    width:499px;
    height:50px;
    text-decoration:none;
    overflow:hidden;
    color:#fff;
    font-weight:bold;
    }

    /*************************  メインメニュー */
    #mainmenu{
    font-size:14px;
    position:absolute;
    right:0;
    height:10px;
    bottom:20px;
    }
    #mainmenu ul{
    margin:0;
    padding:0;
    }
    #mainmenu li{
    float:left;
    padding:0;
    margin:0 2px 0 0;
    list-style-type:none;
    }
    #mainmenu li span{
    display:none;
    }
    #mainmenu a{
    display:block;
    text-decoration:none;
    color:#fff;
    text-align:center;
    padding:0 15px;
    }
    #mainmenu a:hover{
    color:#000;
    }
    #mainmenu .active{
    color:#fff;
    text-decoration:underline;
    }

    /*************************  サブメニュー */
    #submenu{
    position:absolute;
    right:240px;
    top:10px;
    margin:0;
    font-size:10px;
    }
    #submenu ul{
    margin:0;
    padding:0;
    }
    #submenu li{
    margin:0 0 0 10px;
    padding:0;
    float:left;
    list-style-type:none;
    }
    #submenu a{
    display:block;
    padding:0 0 0 10px;
    line-height:30px;
    color:#A2A78E;
    background:url(img/bg_submenu.gif) no-repeat left center;
    text-decoration:none;
    }
    #submenu a:hover{
    text-decoration:underline;
    }

    /*************************  子階層メニュー */
    #childmenu{
    margin:0 0 20px 0;
    padding:0px;
    }
    #childmenu ul{
    margin:0;
    padding:0;
    list-style:none;
    }
    #childmenu li{
    margin:0 0 1px 0;
    padding:0px;
    width:180px;
    border-bottom:1px dotted #999;
    }
    #childmenu a{
    display:block;
    font-size:12px;
    line-height:20px;
    padding:0 0 0 16px;
    text-decoration:none;
    background:url(img/bg_childmenu.gif) no-repeat left center;
    color:#999;
    }
    #childmenu a:hover{
    color:#333;
    }
    #childmenu .active{
    color:#333;
    }

    /*************************  パンくずリスト */
    #pagenavi{
    font-size:0.8em;
    margin:0 0 10px 0;
    color:#666;
    }
    #pagenavi a{
    color:#666;
    }

    /*************************  メイン＆サイドコンテンツ領域 */
    #contents{
    padding:15px 0 0 ;
    background:url(img/bg_contents.gif) no-repeat;
    }
    #contents_inner{
    padding:0 15px 0 15px;
    background:#fff;
    }

    /*************************  メインコンテンツ */
    #main{
    float:left;
    width:650px;
    }
    h2#pagetitle{
    font-size:1.6em;
    margin:0 0 20px 0;
    padding:20px 0;
    line-height:1.2;
    color:#333;
    background:url(img/bg_pagetitle.jpg) no-repeat left bottom;
    }
    h2#pagetitle span{
    font-size:10px;
    font-weight:normal;
    line-height:1.0;
    padding:0 0 0 10px;
    margin:0;
    color:#666;
    }
    h3{
    font-size:1em;
    line-height:33px;
    margin:0 0 10px 0;
    padding:0 0 0 15px;
    font-weight:bold;
    color:#fff;
    background:url(img/bg_h3.gif) no-repeat;
    clear:both;
    }

    /*************************  メインコンテンツ入力領域 */
    .page_contents{
    overflow:hidden;
    width:650px;
    margin:0 0 30px 0;
    }

    /*************************  サイドバー */
    #side{
    float:right;
    width:180px;
    line-height:1.2;
    }

    #side h4{
    font-size:0.8em;
    line-height:22px;
    margin:0 0 10px 0;
    padding:0;
    color:#333;
    border-bottom:1px solid #ccc;
    }

    #side .sidebox,
    #side .sidebox01,
    #side .sidebox02{
    width:180px;
    margin:0 0 15px 0;
    padding:0;
    overflow:hidden;
    }

    .sidebox01 ul,
    .sidebox02 ul{
    margin:0 0 0 5px;
    padding:0;
    font-size:0.8em;
    color:#999;
    list-style:none;
    }
    
    .sidebox01 li{
    margin:0 0 5px 0;
    padding:0 0 0 12px;
    background:url(img/icon_list.gif) no-repeat left center;
    }
    .sidebox01 li a{
    color:#666;
    }
    .sidebox01 li a:hover{
    color:#333;
    }
    .sidebox02 img{
        border-bottom: 0px solid; 
        border-left: 0px solid; 
        margin-top: 0px; 
        width: 180px; 
        margin-bottom: 0px; 
        float: left; 
        height: 50px; 
        border-top: 0px solid; 
        border-right: 0px solid;
    }

    /*************************  ページ最上部移動 */
    #pagetop{
    clear:both;
    text-align:right;
    margin:10px 0 0 0;
    }

    /*************************  フッター */
    #footer{
    text-align:center;
    font-size:0.8em;
    margin:0;
    padding:30px 0 30px 0;
    color:#666;
    font-weight:bold;
    background:url(img/bg_footer.gif) no-repeat;
    }

    /************************* フッターメニュー */
    #footermenu{
    margin:0 0 10px 0;
    font-weight:normal;
    }
    #footermenu ul{
    margin:0;
    padding:0;
    list-style-type:none;
    }
    #footermenu li{
    margin:0 10px 0 0;
    display:inline;
    }
    #footermenu a{
    padding:0;
    text-decoration:underline;
    color:#333;
    }
    #footermenu a:hover{
    color:#000;
    text-decoration:none;
    }
    #copyright{
    }

    /*************************  ページ移動リンク */
    .page_move{
    text-align:center;
    margin:5px 0;
    }

    /*************************  テーブルセル */
    .left{
    width:30%;
    padding:2px 0 2px 10px;
    border-bottom:1px solid #ddd;
    vertical-align:top;
    background-position:0 8px;
    }
    .right{
    width:70%;
    padding:2px 0 2px 2px;
    border-bottom:1px solid #ddd;
    vertical-align:top;
    background:#fff;
    }

    /*************************  プロフィールページ */
    #table_profile{
    width:100%;
    }
    #img_profile{
    float:left;
    width:240px;
    display:block;
    border:1px solid #999;
    margin:0 20px 20px 0;
    padding:3px;
    text-align:center;
    }
    .map{
    width:648px;
    height:300px;
    border:1px solid #ccc;
    margin:0;
    }

    /*************************  フォームページ */
    form{
    margin:0;
    }
    #table_form{
    width:100%;
    margin:0 0 20px 0;
    }
    #captcha{
    border:1px solid #ccc;
    background:#ddd;
    margin:0 0 0 10px;
    padding:5px 10px;
    }

    /*************************  ブログ */
    .blog{
    border:1px solid #ccc;
    padding:0px;
    margin:0 0 20px 0;
    position:relative;
    }
    .blog_title{
    margin:0;
    padding:0 10px;
    line-height:24px;
    font-weight:bold;
    border:none;
    background:#eee;
    color:#333;
    }
    .blog_cnt{
    }
    .blog_date{
    margin:0 0 10px 0;
    padding:3px 10px;
    color:#666;
    font-size:0.8em;
    background:#f7f7f7;
    }
    .blog_body{
    overflow:hidden;
    width:630px;
    margin:0 9px 20px 9px;
    }
    .blog_bottom{
    padding:10px 5px;
    font-size:0.8em;
    text-align:right;
    }
    #entory_preview{
    float:left;
    margin:0 0 5px 0;
    padding:0 0 0 12px;
    text-align:left;
    width:45%;
    background:url(img/icon_arrow_left.gif) left no-repeat;
    }
    #entory_next{
    float:right;
    margin:0 0 5px 0;
    padding:0 12px 0 0;
    text-align:right;
    width:45%;
    background:url(img/icon_arrow_right.gif) right no-repeat;
    }

    /*************************  掲示板 */
    .bbs{
    border:1px solid #ccc;
    padding:0px;
    margin:0 0 20px 0;
    position:relative;
    }
    .bbs_title{
    margin:0;
    padding:0 10px;
    line-height:24px;
    font-weight:bold;
    border:none;
    background:#eee;
    color:#333;
    }
    .bbs_cnt{
    }
    .bbs_body{
    margin:5px 10px 20px 10px;
    }
    .bbs_bottom{
    padding:10px 5px;
    font-size:0.8em;
    text-align:right;
    }
    #table_bbs{
    width:100%;
    margin:0 0 30px 0;
    }
    #table_bbs td{
    border-bottom:1px dotted #ccc;
    padding:4px 0;
    vertical-align:top;
    }
    #table_bbs .theme{
    padding:4px 0 4px 20px;
    background:url(img/icon_theme.gif) left top no-repeat;
    background-position:0 5px;
    }
    #table_bbs .thread{
    padding:4px 0 4px 20px;
    background:url(img/icon_thread.gif) left top no-repeat;
    background-position:0 5px;
    }
    #table_bbs .res{
    padding:4px 0 4px 20px;
    background:url(img/icon_comment.gif) left top no-repeat;
    background-position:0 5px;
    }
    #table_bbs .c1{
    font-size:0.8em;
    text-align:right;
    }
    #table_bbs .theme a{
    font-weight:bold;
    }
    #table_bbs .tr{
    text-align:right;
    font-size:0.8em;
    margin:10px 0;
    color:#666;
    }

    /*************************  コメント＆TB投稿 */
    .post{
    border:none;
    background:#f1f1f1;
    color:#666;
    font-size:1em;
    padding:2px 5px;
    line-height:1.2;
    }
    .post_com{
    margin:20px 0 10px 0;
    padding:10px 0 0 24px;
    border-top:1px solid #ddd;
    background:url(img/icon_comment.gif) left top no-repeat;
    background-position:0 12px;
    }
    .post_tb{
    margin:20px 0 10px 0;
    padding:10px 0 0 24px;
    border-top:1px solid #ddd;
    background:url(img/icon_tb.gif) left top no-repeat;
    background-position:0 12px;
    }
    .post_bottom{
    margin:0 0 20px 0;
    padding:5px 0;
    font-size:0.8em;
    text-align:right;
    }


    /*************************  カレンダー */
    #calendar{
    width:160px;
    margin:0 10px;
    text-align:center;
    }
    #calendar tr td{
    padding:0 2px 5px 2px;
    font-size:0.8em;
    }
    #calendar caption{
    padding:0 5px 8px 5px;
    text-align:right;
    font-size:0.8em;
    }
    .cal_sun{color:#FF0000;}
    .cal_day{color:#333333;}
    .cal_sat{color:#006699;}


    /*************************  検索窓＆検索結果ページ */
    #search{
    position:absolute;
    width:200px;
    right:0px;
    top:15px;
    text-align:right;
    } 
    #search .search{
    width:130px;
    height:14px;
    font-size:1em;
    border:1px solid #666;
    background:#ccc;
    color:#000;
    }
    .result_title{
    margin:0 0 10px 0;
    font-size:1.2em;
    }
    .result_body{
    margin:0 0 20px 30px;
    padding:0 0 20px 0;
    border-bottom:1px solid #ddd;
    }
    .highlight{
    font-weight:bold;
    background:#ff9900;
    color:#fff;
    }

    /*************************  クローラー */
    #crawler{
    position:relative;
    width:180px;
    height:200px;
    }
    #crawler h4{
    padding:5px 0 5px 8px;
    margin:0;
    color:#333;
    border:1px solid #ccc;
    background-image:none;
    background-color:#eee;
    line-height:1.0;
    }
    .crawler_body{
    padding:5px 10px;
    font-size:10px;
    line-height:1.3;
    height:150px;
    border:1px solid #ccc;
    border-top:none;
    background:#fff;
    }
    #crawler img{
    margin:0 10px 10px 0;
    }

    /*************************  カウンタ */
    #counter{
    font-size:0.8em;
    text-align:center;
    color:#666;
    }

    /*************************  QRコード */
    #qr{
    position:relative;
    margin:0 0 20px 0;
    width:180px;
    height:100px;
    }
    #qr a{
    position:absolute;
    display:block;
    width:100px;
    height:18px;
    left:74px;
    top:69px;
    text-indent:-10000px;
    overflow:hidden;
    }

    /*************************  RSSフィードボタン */
    #rss{
    position:absolute;
    top:16px;
    right:175px;
    text-align:right;
    } 




    /*************************　RSSフィードパーツ用 */

    /*************************  RSS NEWS */
    /*タイトル*/
    #rss_news{
    }
    /*コンテンツ領域*/
    .rss_news_contents{
    overflow:hidden;
    width:650px;
    margin:0 0 20px 0;
    }
    /*日付部分*/
    .rss_news_date{
    width:20%;
    font-size:0.8em;
    color:#666;
    padding:3px 0 2px 16px;
    border-bottom:1px dotted #ccc;
    vertical-align:top;
    background:url(img/icon_clock.gif) no-repeat left top;
    background-position:0 5px;
    }
    /*本文部分*/
    .rss_news_body{
    overflow:hidden;
    padding:2px 0 5px 0;
    border-bottom:1px dotted #ccc;
    vertical-align:top;
    }

    /*************************  RSS PHOTO */
    /*タイトル*/
    #rss_photo{
    }
    /*コンテンツ領域*/
    .rss_photo_contents{
    margin:0 0 20px 0;
    }
    /*td設定*/
    .rss_photo_td{
    font-size:0.8em;
    text-align:center;
    padding:0 0 10px 0;
    }


    /************************* RSS SITE */
    /*タイトル*/
    #rss_site{
    }
    /*コンテンツ領域*/
    .rss_site_contents{
    margin:0 0 20px 0;
    }
    /*td設定*/
    .rss_site_td{
    padding: 5px 15px 5px 0;
    border-bottom:1px dotted #ddd;
    }


    /************************* RSS SEARCH */
    /*td設定*/
    .rss_search_td{
    padding: 5px 15px 5px 0;
    border-bottom:1px dotted #ddd;
    }


    /*************************  PHOTO＆THUMBNAIL */

    /*共通設定*/
    .rss_thumb{
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #ccc;
    background-color:#eee;
    font-size:10px;
    }
    /*写真+説明文（大）*/
    .type1_big{
    float: left;
    width: 110px;
    height:110px;
    padding: 5px;
    margin-right:10px;
    margin-left:auto;
    }
    /*写真+説明文（小）*/
    .type1_small{
    float: left;
    width: 65px;
    height:65px;
    padding: 3px;
    margin-right:10px;
    margin-left:auto;
    }
    /*写真のみキャプション付（大）*/
    .type2_big{
    width: 110px;
    height: 122px;
    padding: 5px;
    margin-right:auto;
    margin-left:auto;
    }
    /*写真のみキャプション付（小）*/
    .type2_small{
    width: 55px;
    height: 67px;
    padding: 3px;
    margin-right:auto;
    margin-left:auto;
    }
    /*サーチ用*/
    .type3{
    float:left;
    width: 80px;
    height:80px;
    padding: 5px;
    margin:0 10px 10px 0;
    }

    /* index.htmlの店舗紹介整形用 */
    .div_top1,
    .div_top2{
        display: table-cell;
        vertical-align: top;
    }
    .shop_img {
        border-bottom: 0px solid; 
        border-left: 0px solid; 
        margin: 0px 10px; 
        width: 200px; 
        float: left; 
        height: 200px; 
        border-top: 0px solid; 
        border-right: 0px solid
    }
    
    /* Googlemap表示用のiframe */
    .access_map {
        width:650px;
        height:300px;
    }
    /* 各ページのタイトル画像用 */
    .title_img{
        border-bottom: 0px solid;
        border-left: 0px solid;
        margin: 0px;
       /* width: 650px;　 */
        float: left;
        /* height: 200px; */
        border-top: 0px solid;
        border-right: 0px solid; 
    }
    /*　画面下部の店名、住所など こっちは特にいらない*/
    .shop_info{
     
    }

}