@charset "UTF-8";

/*-----------------------------------------------------------------
サイドボタン
-----------------------------------------------------------------*/
.nav_btn{
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
}
.nav_btn ul{
  max-width: 1440px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  zoom: 1;
}
.nav_btn li{
  width: 240px;
  height: 55px;
  position: absolute;
  right: 10px;
  display:block;
}
.nav_btn li{
  background: url(images/tea_premium_btn_bg_off.png ) 0 0 no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
.nav_btn li:hover{
  background: url(images/tea_premium_btn_bg_on.png ) 0 0 no-repeat;
}
.nav_btn li.btn01{
  top: 20px;
}
.nav_btn li.btn02{
  top: 86px;
}
.nav_btn li.btn03{
  top: 152px;
}
.nav_btn li a:hover img {
    opacity: 1;
    filter: alpha(opacity=100);
}

/*タブレットの時*/
@media screen and (max-width: 1180px){
  .nav_btn li{
  width: 210px;
  right: 10px;
  background: url(images/tea_premium_btn_bg_off_rgba.png ) 0 0 no-repeat;
  background-size:100% auto;
  }
  .nav_btn li:hover{
  background: url(images/tea_premium_btn_bg_on.png ) 0 0 no-repeat;
  background-size:100% auto;
}
.nav_btn li a img{
  width: 100%;
  display:block;
}

.nav_btn li.btn02{
  top: 73px;
}
.nav_btn li.btn03{
  top: 126px;
}
}
/*-----------------------------------------------------------------
シャドウの背景
-----------------------------------------------------------------*/
#wrap{
 text-align: center;
 margin: 0 auto;
 background-color: #fff;
 position: relative;
}
/*-----------------------------------------------------------------
コンテンツ
-----------------------------------------------------------------*/
#premium{
  width: 924px;
  margin: 0 auto;
  background-color: #fff;
  background: url(images/main_bg.jpg ) repeat-y;
  padding-bottom: 20px;
}
#premium .inner{
 text-align: left;
 width: 910px;
 margin-left: 7px;
}
/*-----------------------------------------------------------------
おいしさのヒミツ
-----------------------------------------------------------------*/
.point_area .point{
  position: relative;
}
.point_area .p1 .answer{
  position: absolute;
  top: 165px;
  left: 67px;
  animation: fluffy1 3s ease infinite;
}
.point_area .p2 .answer{
  position: absolute;
  top: 192px;
  left: 67px;
}
.point_area .p3 .answer{
  position: absolute;
  top: 181px;
  left: 67px;
}
.point_area .p2 .answer:hover ,.point_area .p3 .answer:hover{
  animation: fluffy2 3s ease infinite;
}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

@keyframes fluffy2 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}
/*-----------------------------------------------------------------
LINE UP
-----------------------------------------------------------------*/
.lineup_area .earlgrey{
  background: url(images/tea_premium_bg_01.jpg) 0 0 no-repeat;
  height: 649px;
  padding: 0 41px 0 33px;
}
.lineup_area .earlgrey .flL.grade{
  padding-top: 272px;
}
.lineup_area .darjeeling{
  background: url(images/tea_premium_bg_02.jpg) 0 0 no-repeat;
  height: 624px;
  padding: 0 41px 0 33px;
}
.lineup_area .darjeeling .flL.grade{
  padding-top: 272px;
}
.lineup_area .assam{
  background: url(images/tea_premium_bg_03.jpg) 0 0 no-repeat;
  height: 649px;
  padding: 0 41px 0 33px;
}
.lineup_area .assam .flL.grade{
  padding-top: 269px;
}
.lineup_area .seylon{
  background: url(images/tea_premium_bg_04.jpg) 0 0 no-repeat;
  height: 644px;
  padding: 0 41px 0 33px;
}
.lineup_area .seylon .flL.grade{
  padding-top: 269px;
}
.lineup_area .flR{
  width: 412px;
}
.lineup_area .flL{
  width: 424px;
}

/*-----------------------------------------------------------------
カートボタン
-----------------------------------------------------------------*/
.cart_btn{
  width: 260px;
  text-align: center;
  margin: 0 auto;
  background-color: #d3a100;
  border-radius: 25px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.cart_btn a{
  padding: 16px 0 16px 50px;
  text-align: left;
  line-height: 1;
  font-size: 21px;
  font-weight: 500;
  color: #fff;
  font-family: "游明朝",Yu Mincho,YuMincho,Hiragino Mincho ProN,"HG明朝E","HGS明朝E","メイリオ",Meiryo,serif;
  text-decoration: none;
  background: url(images/tea_premium_icon_01.png) 220px 12px no-repeat;
  display: block;
}
.cart_btn:hover{
  background-color: #f4c43d;
  }

/*-----------------------------------------------------------------
他商品リンクボタン
-----------------------------------------------------------------*/
.item_link_area{
  margin: 0 30px 30px;
}
.item_link_area li{
  width: 270px;
  height: 90px;
  text-align: center;
  float: left;
  margin-right: 18px;
  background-color: #7a0000;
  border-radius: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
  display: block;
}
.item_link_area li:last-child{
  float: right;
  margin-right: 0;
}
.item_link_area li:hover{
  background-color: #ce4646;
  }
  .item_link_area li a{
  padding: 22px 15px 16px 0;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  font-family: "游明朝",Yu Mincho,YuMincho,Hiragino Mincho ProN,"HG明朝E","HGS明朝E","メイリオ",Meiryo,serif;
  text-decoration: none;
  background: url(images/tea_premium_icon_01.png) 240px 30px no-repeat;
  display: block;
}
.item_link_area li:nth-child(2) a{
  padding: 12px 15px 16px 0;
}

/*-----------------------------------------------------------------
紅茶のグレードって何？
-----------------------------------------------------------------*/
.grade_area{
  background-color: #e7e2cd;
  width: 824px;
  padding: 26px 28px;
  text-align: center;
  margin: 0 auto;
}
.grade_area .grade_area_inner{
  border: 3px solid #7a0000;
  padding: 4px;
}
.grade_area .inner_contents{
  border: 6px solid #7a0000;
}
.leaf_grade{
  padding: 0 24px 15px;
}
.leaf_grade .ttl{
  margin-bottom: 10px;
}
.leaf_grade .ttl li{
  float: left;
  background-color: #7a0000;
  margin-right: 4px;
  line-height: 1em;
  font-size: 14px;
  color: #fff;
  font-family: "游明朝",Yu Mincho,YuMincho,Hiragino Mincho ProN,"HG明朝E","HGS明朝E","メイリオ",Meiryo,serif;
  font-weight: bold;
  text-align: center;
  height: 56px;
 display: -webkit-flex;
  -js-display: flex;
  display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
.leaf_grade .ttl li:last-child{
  float: right;
  margin-right: 0;
}
.leaf_grade .ttl li.form{
  width: 150px;
}
.leaf_grade .ttl li.grade{
  width: 410px;
}
.leaf_grade .ttl li.size{
  width: 79px;
  line-height: 1.2;
}
.leaf_grade .ttl li.time{
  width: 99px;
  line-height: 1.2;
}
.leaf_grade .type .hight_grade{
  background: url(images/tea_premium_bg_05.png) 0 0 no-repeat;
  height: 575px;
  padding-left: 10px;
}
.leaf_grade .type .hight_grade .full{
  padding: 14px 0 17px 0;
}
.leaf_grade .leaf_type{
  width: 146px;
  float: left;
  text-align: left;
}
.leaf_grade .grade_name{
  width: 410px;
  float: left;
  text-align: left;
}
.leaf_grade .grade_name li .bg{
  background-color: #7a0000;
  padding: 8px;
  color: #fff;
  font-size: 16px;
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
  font-weight: bold;
  display: inline-block;
}
.leaf_grade .grade_name li .italic{
  font-style: italic;
  font-size: 12px;
  vertical-align: text-bottom;
  padding-left: 3px;
}
.leaf_grade .hight_grade .grade_name li{
  margin-bottom: 18px;
}
.leaf_grade .hight_grade .grade_name li:last-child{
  margin-bottom: 0;
}
.leaf_grade .type .low_grade{
  background: url(images/tea_premium_bg_06.png) 0 0 no-repeat;
  height: 423px;
  padding-left: 10px;
}
.leaf_grade .type .low_grade .fannings{
  padding: 20px 0 0;
}
.leaf_grade .grade_name li.txt{
  font-size: 14px;
  color: #333;
}
.leaf_grade .type .low_grade .fannings .grade_name{
  padding-top: 47px;
}
.leaf_grade .type .low_grade .dust .grade_name{
  padding-top: 72px;
}
.leaf_grade .ctc_grade{
  background-color: #fff;
  padding: 0 0 25px;
  text-align: center;
}
.leaf_grade .ctc_grade .ctc{
  margin-left: 180px;
  text-align: left;
}
.leaf_grade .ctc_grade .leaf_type{
  width: 133px;
  float: left;
  text-align: left;
}
.leaf_grade .ctc_grade .grade_name{
  width: 400px;
  float: left;
  text-align: left;
}
.leaf_grade .ctc_grade .grade_name li{
  margin-bottom: 10px;
}
.leaf_grade .txt_azuki{
  font-size: 14px;
  color: #7a0000;
  text-align: center;
}
/*-----------------------------------------------------------------
あなたのお好みのテイストは？
-----------------------------------------------------------------*/
.taste_area{
  background-color: #e7e2cd;
  width: 824px;
  padding: 26px 28px;
  text-align: center;
  margin: 0 auto;
}
.taste_area .taste_area_inner{
  background: url(images/tea_premium_bg_07.jpg) 0 bottom no-repeat;
  border: 3px solid #876e07;
  padding: 4px;
  background-color: #fff;
}
.taste_area .inner_contents{
  border: 6px solid #876e07;
  position: relative;
  height: 1425px;
}
.taste_area .chart_area{
  position: relative;
  background: url(images/tea_premium_bg_08.png) center top no-repeat;
  height: 700px;
  text-align: left;
}
.taste_area .chart_area dd{
  padding-left: 15px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.taste_area .chart_area .taste_ttl_01{
  position: absolute;
  top: 0;
  left: 221px;
}
.taste_area .chart_area .taste_ttl_02{
  position: absolute;
  top: 220px;
  left: 39px;
}
.taste_area .chart_area .taste_ttl_03{
  position: absolute;
  top: 648px;
  left: 300px;
}
.taste_area .chart_area .taste_ttl_04{
  position: absolute;
  top: 195px;
  left: 709px;
}
.taste_area .chart_area .brand_name_01{
  position: absolute;
  top: 53px;
  left: 333px;
}
.taste_area .chart_area .brand_name_01 dd{
  margin-left: 79px;
  background: url(images/tea_premium_icon_02.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_01 dd:hover{
  background: url(images/tea_premium_icon_07.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_02{
  position: absolute;
  top: 209px;
  left: 183px;
}
.taste_area .chart_area .brand_name_02 dd{
  margin-left: 15px;
  background: url(images/tea_premium_icon_03.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_02 dd:hover{
  background: url(images/tea_premium_icon_08.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_03{
  position: absolute;
  top: 431px;
  left: 200px;
}
.taste_area .chart_area .brand_name_03 dd{
  margin-left: 4px;
  background: url(images/tea_premium_icon_04.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_03 dd:hover{
  background: url(images/tea_premium_icon_09.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_04{
  position: absolute;
  top: 343px;
  left: 430px;
}
.taste_area .chart_area .brand_name_04 dd{
  margin-left: 14px;
  background: url(images/tea_premium_icon_05.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_04 dd:hover{
  background: url(images/tea_premium_icon_10.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_05{
  position: absolute;
  top: 449px;
  left: 473px;
}
.taste_area .chart_area .brand_name_05 dd{
  background: url(images/tea_premium_icon_03.png) 0 0 no-repeat;
}
.taste_area .chart_area .brand_name_05 dd:hover{
  background: url(images/tea_premium_icon_08.png) 0 0 no-repeat;
}
/*-----------------------------------------------------------------
紅茶のおしいい淹れ方
-----------------------------------------------------------------*/
.method_area{
  background-color: #e7e2cd;
  width: 824px;
  padding: 26px 28px;
  text-align: left;
  margin: 0 auto;
}
.method_area .method_area_inner{
  border: 3px solid #876e07;
  padding: 4px;
  background-color: #fff;
}
.method_area .inner_contents{
  border: 6px solid #876e07;
  padding: 0 0 30px;
}
.method_area .btm_line{
  background: url(images/tea_premium_bg_14.png) center bottom no-repeat;
}
.method_area .bag_hot{
  background: url(images/tea_premium_bg_09.jpg) right top no-repeat;
  height: 332px;
  position: relative;
  margin-bottom: 16px;
}
.method_area .bag_cold{
  background: url(images/tea_premium_bg_10.jpg) right top no-repeat;
  height: 261px;
  position: relative;
  margin-bottom: 26px;
}
.method_area .leaf_hot{
  background: url(images/tea_premium_bg_11.jpg) right top no-repeat;
  height: 451px;
  position: relative;
  margin-bottom: 28px;
}
.method_area .leaf_cold{
  background: url(images/tea_premium_bg_12.jpg) right top no-repeat;
  height: 387px;
  position: relative;
}
.method_area h4{
  position: absolute;
  top: 0;
  left: 0;
}
.method_area .bag_hot ol{
  padding-top: 50px;
}
.method_area .bag_cold ol{
  padding-top: 41px;
}
.method_area .leaf_hot ol{
  padding-top: 32px;
}
.method_area .leaf_cold ol{
  padding-top: 22px;
}
.method_area ol li{
  list-style: none;
  text-indent: 35px;
  margin: 0 0 20px 33px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
.method_area li:first-child{
  background: url(images/tea_premium_icon_11.png) left top no-repeat;
}
.method_area li:nth-child(2){
  background: url(images/tea_premium_icon_12.png) left top no-repeat;
}
.method_area li:nth-child(3){
  background: url(images/tea_premium_icon_13.png) left top no-repeat;
}
.method_area li:nth-child(4){
  background: url(images/tea_premium_icon_14.png) left top no-repeat;
}
.method_area .bag_hot li:first-child{
  margin: 0 0 50px 221px;
  width: 360px;
}
.method_area .bag_cold li:first-child{
  margin: 0 0 60px 221px;
  width: 380px;
}
.method_area .leaf_hot li:first-child{
  margin: 0 0 60px 221px;
  width: 412px;
}
.method_area .leaf_hot li:nth-child(2){
  margin: 0 0 60px 35px;
}
.method_area .leaf_hot li:nth-child(3){
  margin: 0 0 40px 35px;
  width: 569px;
}
.method_area .leaf_hot li:nth-child(4){
  width: 615px;
}
.method_area .leaf_cold li:first-child{
  margin: 0 0 60px 221px;
  width: 407px;
}
.method_area .leaf_cold li:nth-child(2){
  margin: 0 0 50px 35px;
}
.method_area .leaf_cold li:nth-child(3){
  margin: 0 0 50px 35px;
}
.method_area .milk_tea{
  background: url(images/tea_premium_bg_13.jpg) 0 0 no-repeat;
  height: 280px;
}
.method_area .milk_tea h4{
  text-align: center;
  margin: 0 auto 25px;
  padding-top: 20px;
  position: relative;
}
.method_area .milk_tea ul{
  width: 535px;
  float: left;
  margin-left: 59px;
}
.method_area .milk_tea ul li{
  background: url(images/tea_premium_icon_15.png) left top no-repeat;
  list-style: none;
  text-indent: 32px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.method_area .milk_tea .recmd{
  width: 148px;
  float: right;
  margin-right: 50px;
  padding-top: 10px;
}