@charset "utf-8" ;
* {
margin: 0px ;
padding: 0px ;
border: 0px ;
text-decoration: none ;
line-height: 1em ;
font-size: 1em ;
font-style: normal ;
}
/* 全ページ共通 */
body {
margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
padding: 0;
text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
color: #000000;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
font-size: 13px;
background-image: url(images/back.jpg);
background-repeat: repeat-y;
}
#container {
width: 1000px;  /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */
margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
}
#header {
padding: 0;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 119px;
}
#header h1 {
padding-top: 10px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
margin: 0;
font-size: 70%;
color: #666;
font-weight: normal;
}
#mainContent {
margin-left: 60px;
padding: 0;
margin-right: 60px;
}
#footer {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 40px;
}
#fotter-left {
float: left;
width: 400px;
}
#fotter-right {
float: right;
text-align: right;
padding-right: 30px;
font-size: 90%;
}
#footer p {
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
margin: 0;
line-height: 140%;
color: #3B2213;
}
#container-upper {
background-image: url(images/con-upper.jpg);
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
height: 29px;
}
#container-down {
background-image: url(images/con-under.jpg);
background-repeat: no-repeat;
height: 53px;
}
#container-main {
background-image: url(images/con-main.jpg);
background-repeat: repeat-y;
}

div {
margin: 0px ;
padding: 0px ;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#header-left {
padding-top: 15px;
padding-left: 45px;
width: 250px;
float: left;
}
#header-right {
padding-top: 15px;
padding-left: 10px;
float: left;
}
a:link { 
  text-decoration: underline 
}
a:hover { 
  color: #900;
  text-decoration: underline
}
/* グローバルナビゲーション */
#globalnavi{
width: 790px;
height: 42px;
margin: 0;
padding: 0;
}

#globalnavi ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#globalnavi li{
  text-indent: -9999px;
  float:left;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  display: block;
  width: 100%;
  height: 42px;
  background-image: url(images/gb-navi.png);
  background-repeat: no-repeat;
}

#menu1 a{background-position: 0 0; width:89px;}
#menu2 a{background-position: -89px 0; width:158px;}
#menu3 a{background-position: -247px 0; width:185px;}
#menu4 a{background-position: -432px 0; width:100px;}
#menu5 a{background-position: -532px 0; width:137px;}
#menu6 a{background-position: -669px 0; width:121px;}
#globalnavi a:hover{
  background-image: url(images/gb-navi.png);
  background-repeat: no-repeat;
}

#menu1 a:hover{background-position: 0 -42px;}
#menu2 a:hover{background-position: -89px -42px;}
#menu3 a:hover{background-position: -247px -42px;}
#menu4 a:hover{background-position: -432px -42px;}
#menu5 a:hover{background-position: -532px -42px;}
#menu6 a:hover{background-position: -669px -42px;}
#header-under {
padding-left: 45px;
padding-top: 15px;
}

/* トップページ */
#top-flash {
margin-bottom: 25px;
}
#news-image {
float: left;
}
.news-text {
line-height: 1.5em;
}
#news-image {
float: left;
}
#news-image02 {
float: left;
height: 80px;
}

/* ハブ酒ページ */
#page-main {
padding-right: 10px;
padding-left: 10px;
line-height: 140%;
padding-bottom: 15px;
}
#pan {
font-size: 85%;
color: #999;
padding-bottom: 15px;
}
#sabmenu {
padding-bottom: 25px;
}
#pm-left {
float: left;
padding-right: 30px;
}
#pm-right {
width: 210px;
float: left;
}
#pm-right p {
line-height: 150%;
}
.brtext {
font-size: 125%;
color: #960;
padding-bottom: 8px;
}
#pm-main {
padding-bottom: 20px;
}
#pm-sab {
}
/* ハブ酒特長ページ */
#feature-main {
background-image: url(https://www.nantosyuzo.com/habu/feature/feature-back.jpg);
background-repeat: repeat;
width: 840px;
padding-top: 20px;
padding-left: 15px;
padding-bottom: 20px;
}
/* ハブ酒味のみ方ページ */
#taste-habu {
background-image: url(https://www.nantosyuzo.com/habu/taste/book-habu_01.jpg);
background-repeat: no-repeat;
width: 642px;
padding-top: 65px;
padding-left: 120px;
margin-left: 20px;
height: 500px;
line-height: 140%;
float: left;}
#aji {
background-image: url(https://www.nantosyuzo.com/habu/taste/book-aji_01.jpg);
background-repeat: no-repeat;
width: 642px;
padding-top: 65px;
padding-left: 120px;
margin-left: 20px;
height: 500px;
line-height: 140%;
float: left;
}
#aji p {
line-height: 150%;
}
#aji-titlle {
font-size: 140%;
color: #914E24;
padding-bottom: 15px;
line-height: 150%;
}
#aji-image img {
float: left;
padding-right: 15px;
}
.aji-midashi {
padding-bottom: 5px;
color: #914E24;
}
#aji-menu {
float: left;
height: 564px;
width: 78px;
}
.resipi-image {
float: left;
padding-right: 10px;
}
/* ビール特長ページ */
.toku-text {
color: #666;
width: 185px;
padding-top: 8px;
padding-right: 5px;
padding-left: 5px;
text-align: left;
line-height: 130%;
}
/* ビール味のみ方ページ */
#taste-beer {
background-image: url(https://www.nantosyuzo.com/beer/taste/book-beer_01.jpg);
background-repeat: no-repeat;
width: 642px;
padding-top: 65px;
padding-left: 120px;
margin-left: 20px;
height: 500px;
line-height: 140%;
float: left;
}
#awaard {
background-image: url(https://www.nantosyuzo.com/beer/images/awaard-back.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 500px;
margin-left: 40px;
}
#awaard-right {
padding-left: 290px;
padding-top: 20px;
padding-right: 15px;
}
.ad-midashi {
font-size: 120%;
padding-top: 4px;
padding-bottom: 4px;
line-height: 130%;
font-weight: bold;
}
.award-text {
font-size: 110%;
color: #000;
line-height: 130%;
padding-bottom: 20px;
padding-top: 8px;
}
/* 珈琲リキュール味のみ方ページ */
#taste-coffee {
background-image: url(https://www.nantosyuzo.com/coffee/taste/book-coffee_01.jpg);
background-repeat: no-repeat;
width: 642px;
padding-top: 65px;
padding-left: 120px;
margin-left: 20px;
height: 500px;
line-height: 140%;
float: left;
}
#shien {
line-height: 140%;
padding-top: 5px;
}
#pinktape {
background-image: url(https://www.nantosyuzo.com/coffee/images/pink.gif);
background-repeat: no-repeat;
background-position: left top;
height: 23px;
padding-left: 15px;
padding-top: 17px;
}
/* 取扱店ページ */
#shop {
width: 765px;
margin-left: 30px;
margin-top: 10px;
}
.nomeru {
font-size: 120%;
background-color: #EDEDED;
padding: 7px;
margin-top: 15px;
margin-left: 30px;
width: 785px;
}
.aria {
margin-top: 15px;
margin-left: 50px;
font-size: 110%;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
padding-bottom: 4px;
width: 750px;
margin-bottom: 10px;
}
.aria-p {
width: 750px;
margin-left: 50px;
line-height: 22px;
margin-bottom: 15px;
}
/* 単発ページ エリアセンター揃え用*/
#center {
padding-left: 115px;
}


div.qstns {
margin: 10px 20px 0px 0px ;
padding: 0px 0px 3px 0px ;
border-bottom: 1px solid #777 ;
}
div.qstns a {
text-decoration: none ;
}

div#as1_1, div#as1_2, div#as1_3, div#as1_4, div#as1_5, div#as1_6, div#as1_7, div#as1_8, div#as1_9,
div#as2_1, div#as2_2, div#as2_3, div#as2_4, div#as2_5, div#as2_6, div#as2_7,
div#as3_1, div#as3_2, div#as3_3 {
margin: 0 3px 5px ;
padding: 10px 20px 10px;
line-height: 125% ;
color: #777 ;
display: none ;
line-height: 2em ;
}





.floating-banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 0;
}
.floating-banner:hover {
    opacity: .9;
}
.banner {
    width: 300px;/* バナーの横幅 */
    padding: 40px 10px;
    background: linear-gradient(86.13deg, #7080F7 -3.42%, #3E9ED9 59.59%);/* バナーの背景色 */
    color: #fff;/* バナー内の文字色 */
    font-weight: bold;
    text-align: center;
  width: 200px; padding: 20px 10px;
}
.floating-banner a {
    text-decoration: none;/* リンクに下線が入らないように */
}
.copy {
    font-size: 20px;
    margin: 0 auto 20px;
    line-height: 1.5;
  font-size: 17px; margin: 0 auto 15px;
}
.cta {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    background: linear-gradient(270deg, #F4A240 0%, #E3A608 100%);/* ボタンの背景 */
    box-shadow: 0px 0px 30px #2984BA;/* ボタンの影 */
    border-radius: 25px;
    margin: 0;
  width: 150px; height: 40px; line-height: 42px;
}

@media screen and (max-width: 560px) {
    .floating-banner {
        display: inline-block;
    }
    .banner {
        width: 100vw;
        padding: 8px;
    }
    .sp {
        display: none;
    }
    .copy {
        font-size: 18px;
        margin: 0 auto 6px;
      font-size: 15px;
    }
    .cta {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
    }
}