﻿@charset "UTF-8";

/* ヘッダ全体 */
#header_bd {
    border-top: solid 5px #1f38bf;
    z-index:90;
    /* font-size: 16px;   */



}

/* タイトル画像 */
.title_img {
    width: 100%;
    text-align: left;
    background-color: rgba(255,255,255,0.8);
}
.title_img img {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 50%;
}

/* ヘッダ文章：h1タグで制御 */
.title_str {
    text-align: left;
    background-color: rgba(255,255,255,0.8);
}





#header_sp {
    z-index:10;
    top:0;
    left:16px;
    border-bottom : solid 1px #1f38bf;
    margin-top: -10px;
}
#hb h1 {
    /*margin-top: 5px;
    margin-bottom: 10px;*/
   padding: .5em .75em;
   background: -webkit-linear-gradient(top, #2278bf 0%, #0059a8 100%);
   background: linear-gradient(to bottom, #2278bf 0%, #0059a8 100%); 

   color: #fff;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
   font-size: medium;
   text-align: left;
   margin-bottom: 5px;
}

.airimg {
   background-image: url("/obj2/air.png");
   background-size: 30px 30px;
   background-repeat: no-repeat;
   width: auto;
   height: 100%;
   z-index: 100;
   padding-left:35px;
   font-size: large;
   font-weight: bolder;
}

h2 {
   padding: .5em .75em;
   background: -webkit-linear-gradient(top, #2278bf 0%, #0059a8 100%);
   background: linear-gradient(to bottom, #2278bf 0%, #0059a8 100%); 
   /* background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%); */
   color: #fff;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
   font-size: medium;
   text-align: left;
   margin-bottom: 5px;
}




/* ヘッダ上部 */
#header_top {
    position:relative;
    height:80px;
}

/* ヘッダ画像 */
#header_image {
    top:0;
    left:0;
    position:absolute;
    width:218px;
}

/* ヘッダ上部のコメント＆お問い合わせ*/
#title_info {
    width:98%;
    top:0;
    right:0;
    position:absolute;
}

/* お問い合わせ */
a#ask_sp {
	text-indent:-9999px;
	display:block;
	width:108px;
	height:24px;
	background-image: url("images/otoiawase_off.gif");
    position:absolute;
    top:0;
    color:#FFF;
    right:0;
}
/*
a#ask_sp:hover {
	background-image: url("images/otoiawase_on.gif");
}
*/

/* コメント */
#title_comment {
    position:absolute;
    left:25px;
    top:35px;
}

/* ヘッダ下部 */
#header_bottom {
    height:48px;
	width:98%;
    position:relative;
}

/* メニュー部 */

/* メニューアンダーバー */
#menu_underbar_sp {
	z-index:10;
    width:100%;
    height:5px;
    background: url("images/line4.gif") repeat-x top left;
}


/* メニューボタン */

/* トップ */
#home {
    background:transparent url("images/btn_home_off.gif") no-repeat;
    width:150px;
}

#home:active, #home:hover, em#home {
    background:transparent url("images/btn_home_on.gif") no-repeat;
}

/* 東京発 */
#tokyo {
    background:transparent url("images/btn_tokyo_off.gif") no-repeat;
    width:150px;
}

#tokyo:active, #tokyo:hover, em#tokyo {
    background:transparent url("images/btn_tokyo_on.gif") no-repeat;
}

/* 大阪発 */
#osaka {
    background:transparent url("images/btn_osaka_off.gif") no-repeat;
    width:150px;
}

#osaka:active, #osaka:hover, em#osaka {
    background:transparent url("images/btn_osaka_on.gif") no-repeat;
}

/* 名古屋発 */
#nagoya {
    background:transparent url("images/btn_nagoya_off.gif") no-repeat;
    width:150px;
}

#nagoya:active, #nagoya:hover, em#nagoya {
    background:transparent url("images/btn_nagoya_on.gif") no-repeat;
}

/* 九州発 */
#kyushu {
    background:transparent url("images/btn_kyushu_off.gif") no-repeat;
    width:150px;
}

#kyushu:active, #kyushu:hover, em#kyushu {
    background:transparent url("images/btn_kyushu_on.gif") no-repeat;
}

/* 北海道発 */
#hokkaido {
    background:transparent url("images/btn_hokkaido_off.gif") no-repeat;
    width:150px;
}

#hokkaido:active, a#hokkaido:hover, em#hokkaido {
    background:transparent url("images/btn_hokkaido_on.gif") no-repeat;
}

/* その他地域発 */
#sonota {
    width:150px;
    background:transparent url("images/btn_sonota_off.gif") no-repeat;
}

#sonota:active, #sonota:hover, em#sonota {
    background:transparent url("images/btn_sonota_on.gif") no-repeat;
}

/* オプショナルツアー */
#optional {
    width:150px;
    background:transparent url("images/btn_optional_off.gif") no-repeat;
}

#optional:active, #optional:hover, em#optional {
    background:transparent url("images/btn_optional_on.gif") no-repeat;
}

/* 格安ホテル */
#hotel {
    width:85px;
    background:transparent url("images/btn_hotel_off.gif") no-repeat;
}

#hotel:active, #hotel:hover, em#hotel {
    background:transparent url("images/btn_hotel_on.gif") no-repeat;
}

/* ツアー検索 */
#kensaku {
    width:150px;
    background:transparent url("images/btn_kensaku_off.gif") no-repeat;
}

#kensaku:active, #kensaku:hover, em#kensaku {
    background:transparent url("images/btn_kensaku_on.gif") no-repeat;
}

/*** 以下、その他発のサブメニュー表示対応分　（2010.05.10 追加）***/

/* IE6対策 */
.menu_list table
{
  border-collapse: collapse;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* IE6以下ならメインタブの a:hover でサブメニュー表示 */
.menu_list a:hover
{
  visibility: visible;
  position: relative;
  z-index: 200;
}

/* IE7以上ならメインタブの li:hover でサブメニュー表示 */
.menu_list li:hover
{
  position: relative;
  z-index: 200;
}

/* 非hover時はサブメニューを表示させない */
.menu_list ul
{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 以下はサブメニューのスタイル定義 */
.menu_list ul.sub1
{
  width: 95px;
}
.sub1 li a
{
text-indent:0px;
}
.sub1 span
{
font-size: 13px;
color:gray;
}
.sub1 :hover span
{
color:#2550B9; 
font-weight:bold;
}
.menu_list :hover ul
{
  left: -23px;
  top: 28px;
  background: #fafafa;
  padding: 3px;
  border: 1px solid #3a93d2;
  border-width: 0 1px 1px;
  white-space: nowrap;
  height: auto;
  z-index: 300;
}
.menu_list :hover ul li
{
  display: block;
  height: 20px;
  position: relative;
  font-weight: normal;
  width: auto;
}
.menu_list :hover ul li a
{
  display: block;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
  width: auto;
  padding: 0 10px;
  color: #000;
  text-decoration: none;
}
.menu_list :hover ul li a:hover
{
  background: #3a93d2;
  color: #fff;
}

      body {
         font-family: 'メイリオ';
      }

      h1 {
         padding: .5em .75em;
         /*background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
         background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
         */
         font-size: x-small;
      }

      .menu {
         width: 100%;
         padding: 0;
         margin: 0;
         list-style-type: none;
      }

         .menu li {
            width: 25%;
            float: left;
            padding: 0;
            margin: 0;
            text-align: center;
         }

            .menu li a {
               width: auto;
               /* color: #00a0a0; */
               color: #006699;
               Font-size: 14px;
               font-weight: bold;
               /* text-shadow:0 -1px 0px #333,0 1px 0px #555; */
               padding: 10px 0;
               text-decoration: none;
               display: block;
               background: #666;
               background-image: -moz-linear-gradient(top, #F2F9FE 0%, #d6f0fd 50%, #c3e3fa 50%, #d6f0fd 100%);
               background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F9FE), color-stop(0.50, #d6f0fd), color-stop(0.50, #d6f0fd), color-stop(1, #d6f0fd));
               border-left: 1px solid #444;
               box-shadow: 1px 0px 0px rgba(120,120,120,0.3) inset, -1px 0px 0px rgba(120,120,120,0.3) inset, 0px 1px 1px rgba(0,0,0,0.1) inset, 0px -1px 1px rgba(0,0,0,0.3) inset, 0px 1px 3px #666;
            }

               .menu li a:hover {
                  background: #555;
                  background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
                  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
                  box-shadow: 1px 0px 0px rgba(225,225,225,0) inset, -1px 0px 0px rgba(225,225,225,0) inset, 0px 1px 1px rgba(0,0,0,0.1) inset, 0px -1px 1px rgba(0,0,0,0.3) inset, 0px 1px 3px #666;
               }

            .menu li ul {
               list-style: none;
               position: relative;
               top: 100%;
               left: 0;
               margin: 0;
               padding: 0;
               border-radius: 0 0 3px 3px;
            }

            .menu li:last-child ul {
               left: -100%;
               width: 100%;
            }

            .menu li ul li {
               overflow:hidden;
               width: 200%;
               height: 0;
               color: #20b2aa;
               -moz-transition: .2s;
               -webkit-transition: .2s;
               -o-transition: .2s;
               -ms-transition: .2s;
               transition: .2s;
            }

               .menu li ul li a {
                  padding: 13px 15px;
                  background: #666;
                  background-image: -moz-linear-gradient(top, #F2F9FE 0%, #d6f0fd 50%, #c3e3fa 50%, #d6f0fd 100%);
                  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F9FE), color-stop(0.50, #d6f0fd), color-stop(0.50, #d6f0fd), color-stop(1, #d6f0fd));
                  text-align: center;
                  font-size: 14px;
                  font-weight: bold;
               }

            .menu li:hover > a {
               background: #006699;
               color: #ffffff;
            }

         .menu > li:hover > a {
            border-radius: 3px 3px 0 0;
         }

         .menu li:hover ul li {
            overflow: visible;
            height: 38px;
            border-top: 1px solid #7c8c0e;
            border-bottom: 1px solid #616d0b;
         }

            .menu li:hover ul li:first-child {
               border-top: 0;
            }

            .menu li:hover ul li:last-child {
               border-bottom: 0;
            }

               .menu li:hover ul li:last-child a {
                  border-radius: 0 0 3px 3px;
               }

      .menu2 {
         width: 100%;
         padding: 0;
         margin: 0;
         list-style-type: none;
            text-align: center;
      }

         .menu2 li {
            width: 100%;
            float: left;
            padding: 0;
            margin: 0;
            text-align: center;
         }
