@charset "Shift_JIS";
/*------------------------------------------------------------------------------
   main.css 画面の横幅が641px以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 641px)
{


/*------------------------------------------------------------------------------
   Beer Cruise CSS
------------------------------------------------------------------------------*/
body
{
   margin: auto;
   width: 960px;
   color: #000000;
   background: #ffffdd;		/* All area background color */
   border: solid 1px #8c8c8c;	/* Border color              */
}

h1				/* Title */
{
   color: #00a100;
   font-size: xx-large;
}

h2				/* Beer Name in Beer Pub Page */
{
   color: #ff0000;
   font-size: x-large;
}

h3				/* Title with Gray Background */
{
   color: #ff3300;
   font-size: xx-large;
}

#header				/* Header for PC */
{
}

#header_image			/* Image Part for PC in Header_Menu.html */
{
   display: block;
   width: 960px;
   height: 100px;
   background: url(../image/header.jpg) no-repeat;
}

#header_menu a			/* Menu Part for PC in Header_Menu.html */
{
   display: block;
   width: 96px;
   height: 24px;
   color: #ffffff;
   background: url(../image/button01.gif) no-repeat;
   line-height: 25px;
   text-decoration: none;
   text-align: center;
}

#header_menu a:hover
{
   color: #ee0000;
   background: url(../image/button02.gif) no-repeat;
}

#header_mobile			/* Header for Mobile */
{
   display: none;
}

#header_mobile_menu		/* Header Menu for Mobile in BreweryList.html */
{
   display: none;
}

#left_side
{
   float: left;
}

#page_top
{
   position: fixed;
   z-index:10;
   bottom: 10px;
   right: 10px;
}

#page_top a
{
   display: block;
   width: 80px;
   height: 80px;
   background: url(../image/pagetop0.png) no-repeat;
}

#page_top a:hover
{
   background: url(../image/pagetop1.png) no-repeat;
}

#bottom
{
   clear: both;
}

#footer
{
}

#footer_menu
{
   color: #ffffff;
   background: #8c8c8c;		/* footer color */
   font-size: small;
   text-align: center;
   line-height: 170%;
   padding-top: 20px;
   padding-bottom: 50px;
}

#footer_menu a
{
   color: #ffffff;
}

#footer_menu a:hover
{
   color: #ffa500;
}

#footer_mobile
{
   display: none;
}

#footer_text			/* Footer_Text.html 用 */
{
   color: #ffffff;
   background: #8c8c8c;
   font-size: small;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
}

/*------------------------------------------------------------------------------
   Top Page CSS
------------------------------------------------------------------------------*/
#top_page
{
   background-image: url(../image/bg01.gif);
   padding-top: 5px;
}

#google_search
{
   padding-right: 20px;
   float: right;
}

/*-----------------------------
   Top Page Main Visual CSS
-----------------------------*/
#imgPhoto
{
   position: relative;
   z-index: 2;
   width: 960px;
   height: 350px;
   overflow: hidden;
}

#imgPhoto ul
{
   position: relative;
   width: 960px;
   height: 350px;
   padding: 0;
   margin: 0;
}

#imgPhoto li
{
   position: absolute;
   display: none;
   left: 0px;
   top: 0px;
}

/*----------------------------
    Changed Main Visual CSS
----------------------------*/
#photoNav
{
   position: relative;
   z-index: 4;
   top: 0px;			/*  ボタン表示位置(上下)  */
   left: 254px;			/*  ボタン表示位置(左右)  */
}

#photoNav ul
{
   position: relative;
}

#photoNav li
{
   float: left;
   margin-right: 15px;		/*  ボタンの間隔  */
}

#photoNav li: hover
{
   cursor: pointer;
}

/*-----------------------------
  Top Page Main CSS
-----------------------------*/
#top_page_main
{
   width: 560px;
   float: left;
   color: #000000;
   font-size: medium;
   padding-left: 20px;
}

.whats_new
{
   color: #555555;
   width: 100%;
   font-size: small;
   line-height: 150%;0
}

.ja_map
{
   width: 560px;
}

.beerblog
{
   width: 575px;
   position: relative;
   left: -8px;
}

#right_side
{
   width: 180px;
   float: right;
}

#kokuzeicho a
{
   color: #0000FF;
}

#kokuzeicho a:hover
{
   color: #ff0088;
}

/*------------------------------------------------------------------------------
   List Page CSS
------------------------------------------------------------------------------*/
#beer_list
{
   background-image: url(../image/bg02.gif);
}

#beer_list_main
{
   font-size: small;
}

#list_change_menu a
{
   position: relative;
   left: 90px;
   display: block;  
   width: 700px;
   height: 60px;
   color: #676767;
   background: url(../image/ListChangeMenu0.gif) no-repeat;
   font-size: medium;
   text-align: center;
   line-height: 60px;
}

#list_change_menu a:hover
{
   height: 80px;
   background: url(../image/ListChangeMenu1.gif) no-repeat;
   font-size: x-large;
   line-height: 80px;
}

/*------------------------------------------------------------------------------
   Brewery List Page CSS
------------------------------------------------------------------------------*/
#brewery_list
{
   background-image: url(../image/bg02.gif);
   padding-bottom: 60px;
}

#brewery_list_main
{
   font-size: small;
}

#brewery_menu a
{
   display: block;
   width: 96px;
   height: 24px;
   color: #000000;
   line-height: 25px;
   text-decoration: none;
   text-align: center;
}

#brewery_list_footer
{
   position: fixed;
   bottom: 0px;
}

/*------------------------------------------------------------------------------
   Beer Name & Brewery Name Index Page CSS
------------------------------------------------------------------------------*/
#beer_index
{
   background-image: url(../image/bg02.gif);
}

#beer_index_main
{
   width: 739px;
   float: right;
   color: #555555;
   font-size: medium;
   font-weight: bold;
   line-height: 150%;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}

#beer_index_btn a
{
   display: block;
   width: 50px;
   height: 50px;
   color: #555555;
   background: url(../image/button6.png) no-repeat;
   line-height: 43px;       /*  ボタン内の文字の上下位置の調整値    */
   text-decoration: none;
   text-align: center;
   text-indent: -0.5em;     /*  ボタン内の文字のセンタリング調整値  */
}

#beer_index_btn a:hover
{
   color: #f39800;
   background: url(../image/button7.png) no-repeat;
}

#beer_index_list
{
   color: #555555;
   background-image: url(../image/bg02.gif);
   font-size: small;
   width: 700px;
   height: 970px;
   overflow: auto;
   line-height: 130%;
   text-align: left;
}


/*------------------------------------------------------------------------------
   Brewery Map Page CSS
------------------------------------------------------------------------------*/
#beer_map
{
   background-image: url(../image/bg02.gif);
}

#beer_map_main
{
   width: 739px;
   float: right;
   color: #555555;
   line-height: 150%;
}

#BeerMapField
{
   width: 100%;
   height: 700px;
   /* google マイマップ表示時のヘッダーの黒い帯を隠す                         */
   overflow: hidden;
}

#BeerMapField iframe
{
   /* google マイマップ表示時のヘッダーの黒い帯を隠すため、上方向へずらす     */
   margin-top: -60px;
}


/*------------------------------------------------------------------------------
   Beer Pub Page CSS
------------------------------------------------------------------------------*/
#beer_page
{
   background-image: url(../image/bg03.gif);
}

#beer_page_top
{
   width: 779px;
   float: right;
}

#beer_page_main
{
   width: 739px;
   float: right;
   color: #000000;
   font-size: medium;
   line-height: 150%;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}

/*-----------------------------
  Google Map CSS
-----------------------------*/
#GoogleMapField
{
   width: 600px;
   height: 400px;
}

/*------------------------------------------------------------------------------
   Overview Page CSS
------------------------------------------------------------------------------*/
#overview
{
   background-image: url(../image/bg02.gif);
}

#overview_main
{
   width: 739px;
   float: right;
   color: #555555;
   font-size: medium;
   font-weight: bold;
   line-height: 180%;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}

/*------------------------------------------------------------------------------
   Glossary CSS
------------------------------------------------------------------------------*/
#beer_glossary
{
   background-image: url(../image/bg02.gif);
}

#beer_glossary_main
{
   width: 739px;
   float: right;
   color: #555555;
   font-size: medium;
   font-weight: bold;
   line-height: 150%;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}

#beer_glossary_btn a
{
   display: block;
   width: 50px;
   height: 50px;
   color: #555555;
   background: url(../image/button4.png) no-repeat;
   line-height: 43px;       /*  ボタン内の文字の上下位置の調整値    */
   text-decoration: none;
   text-align: center;
   text-indent: -0.5em;     /*  ボタン内の文字のセンタリング調整値  */
}

#beer_glossary_btn a:hover
{
   color: #f39800;
   background: url(../image/button5.png) no-repeat;
}

#beer_glossary_dictionary
{
   color: #555555;
   background-image: url(../image/bg02.gif);
   width: 600px;
   height: 600px;
   overflow: auto;
   line-height: 130%;
   text-align: left;
}

/*------------------------------------------------------------------------------
   New Brewery Page CSS
------------------------------------------------------------------------------*/
#new_brewery
{
   background-image: url(../image/bg01.gif);
}

#new_brewery_main
{
   width: 739px;
   float: right;
   color: #555555;
   font-size: small;
   font-weight: bold;
   line-height: 130%;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}


}				/* main.css 画面の横幅が641px以上 */

/*------------------------------------------------------------------------------
   Left Side Menu CSS
------------------------------------------------------------------------------*/
#left_side_menu
{
   background: #8c8c8c;
   width: 180px;
}

#side_menu a
{
   display: block;
   height: 45px;
   color: #ffffff;
   background: url(../image/button03.png) no-repeat;
   font-size: medium;
   font-weight: bold;
   line-height: 45px;
   text-align: center;
}

#side_menu a:hover
{
   color: #ffa500;
   background: url(../image/button04.png) no-repeat;
}

/*------------------------------------------------------------------------------
   Rollover CSS
------------------------------------------------------------------------------*/
/* Ａタグにclass設定 */
.rollover0:hover
{
   opacity:0.6;
   filter:alpha(opacity=60);
   -ms-filter:"alpha( opacity=60 )";
   -moz-opacity:0.6;
   background:#fff;
}

/* imgタグにclass設定 */
a:hover img.rollover1
{
   opacity:0.6;
   filter:alpha(opacity=60);
   -ms-filter:"alpha( opacity=60 )";
   -moz-opacity:0.6;
   background:#fff;
}

/* divにclass設定 */
.rollover2 a:hover img
{
   opacity:0.6;
   filter:alpha(opacity=60);
   -ms-filter:"alpha( opacity=60 )";
   -moz-opacity:0.6;
   background:#fff;
}

/*------------------------------------------------------------------------------
   もっとみる CSS
------------------------------------------------------------------------------*/
.readmore{
   position: relative;
   box-sizing: border-box;
}

.readmore-content{
   position: relative;
   overflow: hidden;
/* 高さの初期値 ⇒ ビールの種類で、７番目のビールまで表示 */
   height: 230px;
}
.readmore-content::before {
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   content: "";
/* グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
   height: 100px;
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
   background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}

/* もっと見るボタン */
.readmore-label{
   display: table;
   position: absolute;
   bottom: 0px;
   margin: 0 auto;
   z-index: 2;
   padding: 0 10px;
   background-color: #ffffff;
   color: #000000;
}
.readmore-label:before{
   content: '... もっと見る';
}

.readmore-check{
   display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
   position: static;
/* 「... もっと見る」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
/* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
   content: '... 元に戻す';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
   height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
   display: none;
}

/*------------------------------------------------------------------------------
   画面の横幅サイズを基準に、画像サイズを自動で合わせる
------------------------------------------------------------------------------*/
#resizeimage img
{
   width: 100%;
}