@charset "utf-8";

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

  地下倶楽部

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

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

  ページタイトル
  
----------------------------------------------------------------------------------------------------*/

.s-pgTtl__hdline {
  background-color:#7a6858;
}

@media print,screen and (min-width:641px) {
  .s-pgTtl__hdline {
    padding-left:100px;
  }
  
  .s-pgTtl__hdline img {
    width:300px;
  }
}

@media screen and (max-width:640px) {
  .s-pgTtl__hdline img {
    max-width:280px;
    width:51%;
  }
}


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

  地下倶楽部について
  
----------------------------------------------------------------------------------------------------*/

.about-lo {
  background-color:rgba(70,65,55,0.08);
}

.about-lo:before {
  content:"";
  display:block;
  width:100%;
  background:url(../image/bClub/gallery.jpg) repeat-x center top;
  background-size:cover;
  -moz-animation:gallery-slide 70s linear infinite;
  animation:gallery-slide 70s linear infinite;
}

.about {
  text-align:left;
}

.about__hdline img {
  width:100%;
  max-width:420px;
}
  
.about__txt p:not(:first-child) {
  padding-top:1.5em;
}

@keyframes gallery-slide {
  0% { background-position:2000px 0; }
  25% { background-position:1500px 0; }
  50% { background-position:1000px 0; }
  75% { background-position:500px 0; }
  100% { background-position:0 0; }
}
 
@-moz-keyframes gallery-slide {
  0% { background-position:2000px 0; }
  25% { background-position:1500px 0; }
  50% { background-position:1000px 0; }
  75% { background-position:500px 0; }
  100% { background-position:0 0; }
}

@media print,screen and (min-width:641px) {
  .about-lo {
    margin-top:90px;
  }
  
  .about-lo:before {
    height:260px;
  }
  
  .about {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-left:500px;
    padding-top:90px;
    padding-bottom:90px;
    position:relative;
  }
  
  .about__hdline {
    position:absolute;
    left:0;
    top:90px;
  }
  
  .about__txt p {
    line-height:2;
  }
}

@media screen and (max-width:640px) {
  .about-lo {
    margin-top:10%;
  }
  
  .about-lo:before {
    height:-webkit-calc(200 / 640 * 100vw);
    height:calc(200 / 640 * 100vw);
  }
  
  .about {
    padding:10% 6%;
  }
  
  .about__hdline {
    text-align:center;
    padding-bottom:8%;
  }
}


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

  メリット
  
----------------------------------------------------------------------------------------------------*/

.meritList {
  list-style:none;
  text-align:left;
}

.meritList li {
  line-height:1.5;
  counter-increment:s-number;
  position:relative;
  padding-left:2em;
  font-size:1.1em;
}

.meritList li:before {
  font-size:0.8em;
  content:counter(s-number);
  font-style:normal;
  text-align:center;
  display:inline-block;
  position:absolute;
  left:0;
  top:0;
  background-color:#f6a53e;
  border:1px solid #f6a53e;
  color:#fff;
  line-height:1.65em;
  width:1.8em;
  height:1.8em;
  z-index:2;
}

.merit {
  text-align:left;
}

.merit dt {
  font-weight:700;
  line-height:1.5;
}

.merit dd {
  background-color:rgba(70,65,55,0.08);
}

@media print,screen and (min-width:641px) {
  .merit-lo {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-top:90px;
  }
  
  .merit-photo {
    padding-top:70px;
  }

  .merit-p01 {
    float:left;
  }
  
  .merit-p02 {
    float:right;
  }
  
  .meritList {
    margin-left:500px;
    margin-top:-108px;
  }
  
  .meritList li {
    float:left;
    width:50%;
  }

  .meritList li:nth-child(n+3) {
    margin-top:0.5em;
  }
  
  .merit {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-top:70px;
  }

  .merit dt,
  .merit dd {
    padding:35px;
  }

  .merit dt {
    padding-top:30px;
    font-size:1.3em;
    width:300px;
    float:left;
    clear:both;
    text-align:center;
    padding-left:0;
  }
  
  .merit dt.merit02 {
    padding-top:45px;
  }

  .merit dt .f-nowrap {
    display:block;
  }

  .merit dd {
    padding-left:300px;
    position:relative;
  }

  .merit dd:not(:last-child) {
    margin-bottom:20px;
  }

  .merit dd:before {
    content:"";
    width:1px;
    height:52%;
    display:inline-block;
    position:absolute;
    left:260px;
    top:50%;
    transform:translateY(-50%);
    background-color:rgba(50,45,35,0.15);
  }
}

@media screen and (max-width:640px) {
  .merit-lo {
    padding-top:10%;
    padding-left:6%;
    padding-right:6%;
  }
  
  .merit-photo {
    padding-top:8%;
  }

  .merit-p01 {
    width:35%;
    float:right;
  }
  
  .merit-p02 {
    width:60%;
    float:left;
  }
  
  .meritList {
    padding-top:8%;
    margin-top:-8%;
  }

  .meritList li:not(:first-child) {
    margin-top:0.5em;
  }
  
  .merit {
    padding-left:6%;
    padding-right:6%;
    padding-top:10%;
  }

  .merit dt,
  .merit dd {
    padding:2.7rem;
  }

  .merit dt {
    font-size:1.5em;
    background-color:rgba(70,65,55,0.08);
    padding-bottom:0 !important;
  }
  
  .merit dd {
    padding-top:0.5em !important;
  }

  .merit dd:not(:last-child) {
    margin-bottom:4%;
  }
}

@media screen and (max-width:500px) {
  .merit dt,
  .merit dd {
    padding:6%;
  }
}


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

  設置タイプ 
  
----------------------------------------------------------------------------------------------------*/

.typeList {
  list-style:none;
}

.typeList li p {
  text-align:left;
  padding-top:1em;
}

@media print,screen and (min-width:641px) {
  .type-lo {
    padding-top:90px;
    padding-bottom:115px;
  }
  
  .typeList {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .typeList li {
    width:50%;
    float:left;
    padding-top:80px;
  }
  
  .typeList li:nth-child(odd) {
    padding-right:40px;
  }
  
  .typeList li:nth-child(even) {
    padding-left:40px;
  }
}

@media screen and (max-width:640px) {
  .type-lo {
    padding:10% 6%;
  }
  
  .typeList li {
    padding-top:10%;
  }
}