@charset "utf-8";
/* CSS Document */
#ttlArea {
  width:100%;
  height:460px;
  background-repeat:no-repeat;
  background-image:url(../images/main.jpg);
  background-size:cover;
  background-position:center top;
  top:0px;
  left:0px;
  z-index:10;
}
.ttlBlock {
  width:1000px;
  height:460px;
  margin:0 auto;
  position:relative;
}
.ttlBox {
  position:absolute;
  top:185px;
  width:200px;
  height:200px;
  display:block;
  background-image:url(../../common/images/bg_murasaki.jpg);
  opacity:0.8;
}
.ttlBlock h1 {
  position:absolute;
  top:245px;
  width:200px;
  height:auto;
  text-align:center;
}

#contentsArea {
  padding:30px 0 0;
}

.drinkIndex p {
	font-size: 1.7em;
	line-height: 200%;
	color: #fff;
	font-family: "hannari";
}
.drinkIndex p a:hover {
	text-decoration: none;
	color: #bd8c74;
}


.drinkIndex {
	text-align: center;
	margin: 0 0 40px;
}
.drinkIndex p {
	display: inline;
}
.drinkIndex p a {
	display: inline-block;
	background: url(../images/drink_icon_menu.png) no-repeat center top;
	margin: 0 12px;
	padding: 10px 0 0;
	letter-spacing: -3px;
}

#contents {
  margin:0 auto;
  width: 900px;

}


.howtoTtlBlock {
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
}
.howtoTtlBlock_h {
  background-color:#9c7882;
  width:50%;
}
.howtoTtlBlock h2 {
  font-family: "hannari";
  font-size:285%;
  line-height:1.2em;
  padding:10px 0 0 100px; 
}
.howtoTtlBlock p {
  background-color:#FFF;
  color:#9c7882;
  text-align:center;
  width:50%;
  font-family: "hannari";
  font-size:108%;
  line-height:1.5em;
  padding:15px 0 20px;
}

.tobiraBlock {
  background-color:#9c7882;
  margin:20px 0 0;
  width:auto;
  padding:10px;
}
.tobiraBlock ul {
  width:auto;
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
}
.tobiraBlock li {
  width:288px;
  padding:
}


.htcatBlock {
  background-image:url(../images/bg_htcat.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  width: 900px;
  margin:0 auto;
}
.htImg {
  padding:30px 0 20px 30px;
}
.htImg_mi {
  padding:50px 10px 40px 40px;
}
.htcatTxt {
  padding:50px 10px 0;
  width:520px;
}
.htcatTxt h2 {
  font-family: "hannari";
  font-size:300%;
  line-height:1.2em;
  color:#9c7882;
  background-image:url(../images/bg_line.jpg);
  background-repeat:repeat-x;
  background-position:bottom;
  text-align:center;
  margin:0 0 20px;
}
.htttlen {
  color:#000;
  font-size:20px;
  letter-spacing:0.3em;
  margin:0 0 0 30px;
}
.osusumehaTtl {
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
}
.osusumeha {
  background-color:#9c7882;
  border-radius:8px;
  font-size:116%;
  padding:10px 0 8px;
  width:180px;
  text-align:center;
  border-radius:8px;
}
.kome {
  font-size:93%;
  width:80%;
  padding:0 0 0 8px;
  color:#000;
}
.htplanTtl a {
  font-size:197%;
  color:#000;
  background:#FFF;
  display:block;
  line-height:1.3em;
  border-radius:8px;
  padding:10px 10px 10px 50px;
  background-image:url(../../common/images/arrow03.png);
  background-repeat:no-repeat;
  background-position:20px 17px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.htplanTtl a:hover {
  text-decoration:none;
  background-color:#FBC78D;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.htplanTxt {
  padding:20px 0 0;
}
.htplanTxt p{
  color:#000;
  font-size:139%;
  line-height:1.4em;
  text-align:center;
}
.htplanTxts {
  padding:20px 0 0;
}
.htplanTxts p{
  color:#000;
  font-size:116%;
  line-height:1.4em;
}
.table_mi {
  background-color:#ededed;
  padding:5px;
  margin:8px 0;
}


.timetable {
  padding:10px 0 0;
}
.timetable table {
  width:100%;
}
.timetable th {
  font-size: 189%;
  line-height: 1.4em;
  width: 150px;
  padding: 10px;
  
}
.timetable td {
  font-size:123%;
  line-height:1.4em;
  padding:10px 20px;
  color:#333;
  position:relative;
}
.oddTh {
  background:url(../images/bg_time01.jpg);
}
.evenTh {
  background:url(../images/bg_time02.jpg);
}
.oddTd {
  background:#CCC;
}
.evenTd {
  background:#e6e6e6;
}
.arrowTh {
  position:absolute;
  text-align:center;
  z-index:100;
  bottom:-9px;
  left:75px;
  line-height:0em;
}
.img_f01 {
  position: absolute;
  z-index: 100;
  right: 0px;
  top: 160px;
}
.img_f02 {
  position: absolute;
  z-index: 100;
  top: 0px;
  right: 10px;
}
.img_f03 {
  position:absolute;
  z-index:100;
  top:-20px;
  right:10px;
}
.img_f04 {
  position:absolute;
  z-index:100;
  top:80px;
  right:10px;
}
.img_f05 {
  position: absolute;
  z-index: 100;
  top: 45px;
  right: 10px;
}

.family_bnr {
  text-align: center;
  padding: 5px 0;
}



/* SmartPhone用設定
------------------------------------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 767px) {

  #ttlArea {
    height:200px;
  }
  .ttlBlock {
    width:100%;
    height:200px;
    margin:0 auto;
    position:relative;
  }
  
  .ttlBox {
    display:none;
  }
  .ttlBlock h1 {
    top:85px;
    width:100%;
  }
  

  #contentsArea {
    padding:30px 0 0;
  }
  
  .drinkIndex p {
    font-size: 1.7em;
    line-height: 200%;
    color: #fff;
    font-family: "hannari";
  }
  .drinkIndex p a:hover {
    text-decoration: none;
    color: #bd8c74;
  }
  
  
  .drinkIndex {
    text-align: center;
    margin: 0 0 10px;
  }
  .drinkIndex p {
    display: inline;
  }
  .drinkIndex p a {
    display: inline-block;
    background: url(../images/drink_icon_menu.png) no-repeat center top;
    margin: 0 12px;
    padding: 10px 0 0;
    letter-spacing: -3px;
  }
  
  #contents {
    margin:0 10px;
    width: auto;
  
  }
  
  
  .howtoTtlBlock {
    display: block;
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
  }
  .howtoTtlBlock_h {
    background-color:#9c7882;
    width:50%;
  }
  .howtoTtlBlock h2 {
    font-family: "hannari";
    font-size:197%;
    line-height:1.2em;
    padding:10px 0 10px 10px; 
  }
  .howtoTtlBlock p {
    background-color:#FFF;
    color:#9c7882;
    text-align:left;
    width:50%;
    font-family: "hannari";
    font-size:108%;
    line-height:1.5em;
    padding:10px 10px 10px 10px;
  }
  
  .tobiraBlock {
    background-color:#9c7882;
    margin:20px 0 0;
    width:auto;
    padding:5px 10px;
    margin: 10px 0 10px;
  }
  .tobiraBlock ul {
    width:auto;
    display: block;
  }
  .tobiraBlock li {
    width:auto;
    line-height: 0em;
    padding: 5px 0;
  }
  .tobiraBlock li img {
    width: 100%;
    height: auto;
  }
  
  
  .htcatBlock {
    background-image:url(../images/bg_htcat.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    display: block;
    width: auto;
    margin:0 auto;
  }
  .htImg {
    display:none;
  }
  .htImg_mi {
    display:none;
  }
  .htcatTxt {
    padding:20px 30px 30px;
    width:auto;
  }
  .htcatTxt h2 {
    font-family: "hannari";
    font-size:285%;
    line-height:1.2em;
    color:#9c7882;
    background-image:url(../images/bg_line.jpg);
    background-repeat:repeat-x;
    background-position:bottom;
    text-align:center;
    margin:0 0 20px;
  }
  .htttlen {
    color:#000;
    font-size:20px;
    letter-spacing:0.3em;
    margin:0 0 0 30px;
  }
  
  .osusumehaTtl {
    display: block;
  }
  .osusumeha {
    background-color:#9c7882;
    border-radius:8px;
    font-size:116%;
    padding:10px 0 8px;
    width:auto;
    text-align:center;
    border-radius:8px;
  }
  .kome {
    font-size:93%;
    width:auto;
    padding:5px 0 5px 8px;
    color:#000;
  }
  .htplanTtl a {
    font-size:154%;
    color:#000;
    background:#FFF;
    display:block;
    line-height:1.3em;
    border-radius:8px;
    padding:5px 10px 5px 50px;
    background-image:url(../../common/images/arrow03.png);
    background-repeat:no-repeat;
    background-position:20px 17px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .htplanTxt {
    padding:5px 0 0;
  }
  .htplanTxt p{
    color:#000;
    font-size:108%;
    line-height:1.4em;
    text-align:center;
  }
  .htplanTxts {
    padding:5px 0 0;
  }
  .htplanTxts p{
    color:#000;
    font-size:108%;
    line-height:1.4em;
  }
  .table_mi {
    background-color:#ededed;
    padding:5px;
    margin:8px 0;
  }
  
  
  .timetable {
    padding:10px 0 20px;
  }
  .timetable table {
    width:100%;
  }
  .timetable th {
  font-size: 108%;
  line-height: 1.4em;
  width: 70px;
  padding: 10px;
    
  }
  .timetable td {
    font-size:108%;
    line-height:1.4em;
    padding:10px 20px;
    color:#333;
    position:relative;
  }
  .oddTh {
    background:url(../images/bg_time01.jpg);
  }
  .evenTh {
    background:url(../images/bg_time02.jpg);
  }
  .oddTd {
    background:#CCC;
  }
  .evenTd {
    background:#e6e6e6;
  }
  .arrowTh {
    position:absolute;
    text-align:center;
    z-index:100;
    bottom:-9px;
    left:75px;
    line-height:0em;
  }
  .img_f01 {
    display:none;
  }
  .img_f02 {
    display:none;
  }
  .img_f03 {
    display:none;
  }
  .img_f04 {
    display:none;
  }
  .img_f05 {
    display:none;
  }

  .family_bnr img {
    width: 100%;
    height: auto;
  }
  
}