@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 店舗紹介 ◇◆◇
  
  
========================================================================================================================*/

#l-pgHeadline .hd { background-image:url(../image/pgHeadline.png); }
#ct { padding-bottom:0; }
  

/*----------------------------------------------------------------------------------------------------

  ツチヤについて
  
----------------------------------------------------------------------------------------------------*/

.about-warp {
  background:url(../../image/pattern1.gif) repeat center top;
}

.about-hd {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

.about {
  position:relative;
  box-sizing:border-box;
}

.about:before,
.about:after {
  content:"";
  display:block;
  width:100%;
  position:absolute;
  left:0;
}

@media print,screen and (min-width:641px) {
  .about-warp {
    padding-top:50px;
  }
  
  .about-hd {
    background:url(../image/about_hd_pc.png) no-repeat center center;
    height:71px;
    margin-bottom:50px;
  }
  
  .about {
    height:420px;
    padding-top:235px;
    margin-bottom:60px;
  }

  .about:before {
    height:202px;
    background:url(../image/about_photo1_pc.png) no-repeat center top;
    top:0;
  }
  
  .about:after {
    height:271px;
    background:url(../image/about_photo2_pc.png?v=2) no-repeat center top;
    bottom:0;
  }
  
  .about p { line-height:2.2; }
}

@media screen and (max-width:640px) {
  .about-warp {
    padding-top:2.25rem;
  }
  
  .about-hd {
    background:url(../image/about_hd_sp.png) no-repeat center center;
    background-size:contain;
    padding-top:10%;
    margin-bottom:1.75rem;
  }
  
  .about { margin-bottom:2.25rem; }

  .about:before {
    background:url(../image/about_photo1_sp.png) no-repeat center top;
    background-size:contain;
    top:0;
    padding-top:30%;
  }
  
  .about:after {
    background:url(../image/about_photo2_sp.png?v=2) no-repeat center top;
    background-size:contain;
    bottom:0;
    padding-top:34%;
  }
  
  .about p {
    padding-top:33%;
    padding-bottom:30%;
    line-height:2;
  }
}


/*-----------------------------------------------------------------------------------
  写真
-----------------------------------------------------------------------------------*/

.about-warp:after {
  content:"";
  display:block;
  width:100%;
  margin-top:0;
  background:url(../image/photoGallery.jpg) repeat-x center top;
  background-size:cover;
  -moz-animation:loop 60s linear infinite;
  animation:loop 60s linear infinite;
}

@media print,screen and (min-width:641px) {
  .about-warp:after {
    height:150px;
  }
}

@media screen and (max-width:640px) {
  .about-warp:after {
    height:0;
    padding-top:22.2%;
    margin-top:0;
    padding-top:-webkit-calc(200/1200*100%);
    padding-top:calc(200/1200*100%);
  }
}


/*----------------------------------------------------------------------------------------------------

  ご案内図
  
----------------------------------------------------------------------------------------------------*/

.map_hd {
  background-image:url(../image/map_hd.png);
}

@media print,screen and (min-width:641px) {
  .map {
    padding-top:70px;
  }
}

@media screen and (max-width:640px) {
  .map {
    padding-top:2.5rem;
  }
}


/*-----------------------------------------------------------------------------------
  Google map
-----------------------------------------------------------------------------------*/

#gmap iframe { width:100%; height:600px; vertical-align:bottom; }

@media print,screen and (min-width:641px) {
  #gmap { margin-top:2rem; }
}

@media screen and (max-width:640px) {
  #gmap { margin-top:1.75rem; }
  #gmap iframe { height:500px; }
}

@media screen and (max-width:500px) {
  #gmap iframe { height:400px; }
}

@media screen and (max-width:420px) {
  #gmap iframe { height:350px; }
}


/*-----------------------------------------------------------------------------------
  floor map
-----------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  #floormap { margin-top:2.5rem; }
}

@media screen and (max-width:640px) {
  #floormap { margin-top:2rem; }
}


/*----------------------------------------------------------------------------------------------------

  店舗案内
  
----------------------------------------------------------------------------------------------------*/

.shop-warp {
  background-color:#e2f3f8;
}

.shop-warp:after {
  content:"";
  display:block;
  width:100%;
  background-color:#e2f3f8;
}

@media print,screen and (min-width:641px) {
  .shop-warp {
    margin-top:70px;
    padding-top:70px;
    padding-bottom:70px;
  }
  
  .shop-warp:after { height:41px; }
}

@media screen and (max-width:640px) {
  .shop-warp {
    margin-top:2rem;
    padding-top:1.25rem;
    padding-bottom:1.5rem;
  }
  
  .shop-warp:after { padding-top:4%; }
}


/*-----------------------------------------------------------------------------------
  写真
-----------------------------------------------------------------------------------*/

.shop_photo {
  list-style:none;
  margin-left:auto;
  margin-right:auto;
}

.shop_photo li {
  float:left;
  box-sizing:border-box;
}

@media print,screen and (min-width:641px) {
  .shop_photo {
    width:1200px;
    margin-bottom:40px;
  }
  
  .shop_photo li {
    width:380px;
    margin-left:10px;
    margin-right:10px;
  }
}

@media screen and (max-width:640px) {
  .shop_photo {
    padding-left:0.375rem;
    padding-right:0.375rem;
    margin-bottom:1rem;
  }
  
  .shop_photo li {
    width:33.333333%;
    padding-left:0.375rem;
    padding-right:0.375rem;
  }
}


/*-----------------------------------------------------------------------------------
  概要
-----------------------------------------------------------------------------------*/

.shop_guide dt,
.shop_guide dd {
  box-sizing:border-box;
  padding:0.75rem;
  line-height:1.6;
}

.shop_guide dt {
  width:25%;
  background-color:#4bb4d7;
  color:#fff;
  text-align:center;
  float:left;
  border-top:1px solid #87cde4;
}

.shop_guide dd {
  margin-left:25%;
  border-top:1px solid #4bb4d7;
  border-right:1px solid #4bb4d7;
  background-color:#fff;
  text-align:left;
}

@media print,screen and (min-width:641px) {
  .shop_guide dl {
    width:50%;
    float:left;
  }
  
  .shop_guide dl:nth-child(-n+2) dt { border-top:0; }
  .shop_guide dl:last-child dd,
  .shop_guide dl:nth-last-child(2) dd { border-bottom:1px solid #4bb4d7; }
}

@media screen and (max-width:640px) {
  .shop_guide dl:first-child dt { border-top:0; }
  .shop_guide dl:last-child dd { border-bottom:1px solid #4bb4d7; }
}