@charset "utf-8";
/* common
------------------------------------------------*/

body {
  width: 100%;
}

body.noscroll {
  position: fixed;
  overflow-y: scroll;
}

h2 {
  padding: 65px 0;
}

h2 img {
  width: 359px;
}

section {
  padding-bottom: 60px;
}

section h3 {
  padding: 60px 0 50px 0;
}

.gray {
  background: #f4f4f4;
}

img {
  max-width: 100%;
}

/* staff
----------------------*/

#staff h3 img {
  width: 287px;
}

/* age
----------------------*/

#age h3 img {
  width: 359px;
}

#age .box {
  width: 882px;
  margin: 0 auto;
  overflow: hidden;
}
#age dl {
  float: left;
}
#age dl dt {
  width: 212px;
  padding-bottom: 20px;
}
#age dl dd {
  width: 218px;
  padding-bottom: 30px;
}

#age p {
  width: 621px;
  float: right;
}

/* job
----------------------*/

#job h3 img {
  width: 82px;
}

#job ul {
  font-size: 0;
}

#job ul li {
  width: 261px;
  display: inline-block;
  padding-right: 49.5px;
}

#job ul li:last-child {
  padding-right: 0;
}
/* fashion
----------------------*/
#fashion h3 img{
width:285px;
}
#fashion ul li {
    width: 261px;
    display: inline-block;
    padding-right: 49.5px;
}
/* work
----------------------*/

#work {
  background: #fff;
}

#work h3 img {
  width: 225px;
}

#work ul {
  width: 882px;
  margin: 0 auto;
  background: #efefef;
  padding: 50px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
}

#work ul:after {
  content: '';
  display: block;
  background: url(../img/img_work.gif) no-repeat;
  width: 178px;
  height: 90px;
  position: absolute;
  right: 140px;
  bottom: 40px;
}

#work ul li {
  width: 365px;
  float: left;
}

#work ul li img {
  padding-bottom: 40px;
}

#work ul li img:last-child {
  padding-bottom: 0;
}

#work ul li:nth-child(odd) {
  padding: 0 50px 0 0;
}
/* origin
----------------------*/
#origin h3 img{
  width:105px;
}
#origin h3{
  padding-bottom: 35px;
}
#origin ul{
  width:882px;
  overflow: hidden;
  margin:0 auto;
background: url('../img/origin_map.png') no-repeat right bottom;
background-size: 392px 383px;
padding-bottom: 50px;
}
#origin ul li{
  width:297px;
  float: left;
}
#origin ul li:first-child{
  margin:0 43px 0 10px;
}
#origin ul li img{
  margin-bottom: 23px;
}
/* blood
----------------------*/

#blood h3 img {
  width: 285px;
}

/* study
----------------------*/

#study h3 img {
  width: 251px;
}

#study ul {
  font-size: 0;
}

#study ul li {
  width: 232px;
  display: inline-block;
  padding-right: 105px;
}

#study ul li:nth-child(3) {
  width: 207px;
}

#study ul li:last-child {
  padding-right: 0;
}

/* lunch
----------------------*/

#lunch {
  width: 50%;
  float: left;
  background: #eaeaea;
}

#lunch h3 {
  text-align: right;
}

#lunch h3 img {
  width: 352px;
  padding-right: 65px;
}

#lunch p {
  width: 391px;
  float: right;
  padding-right: 50px;
}

/* alcohol
----------------------*/

#alcohol {
  width: 50%;
  float: right;
}

#alcohol h3 {
  text-align: left;
}

#alcohol h3 img {
  width: 316px;
  text-align: right;
  padding-left: 85px;
}

#alcohol p {
  width: 390px;
  padding-left: 50px;
}

/* drink
----------------------*/

#drink {
  clear: both;
  background: url(../img/bg_drink.png) repeat-x center bottom;
  padding-bottom: 165px;
}

#drink h3 img {
  width: 323px;
}

#drink ul {
  width: 880px;
  margin: 0 auto;
  overflow: hidden;
}

#drink ul li:first-child {
  width: 571px;
  float: left;
}

#drink ul li:nth-child(2), #drink ul li:nth-child(3) {
  width: 273px;
  float: right;
}

#drink ul li:nth-child(2) {
  padding: 82px 0 28px 0;
}

/* holiday
----------------------*/

#holiday {
  background: #b8e2ff url(../img/pc_bg_holiday.gif) no-repeat center top;
}

#holiday h3 img {
  width: 422px;
}
#holiday h3{
  padding:74px 0 30px 0;
}
#holiday ul li {
  width: 260px;
  padding-right: 48px;
  display: inline-block;
}

#holiday ul li:last-child {
  padding-right: 0;
}

.kome {
  text-align: right;
  width: 1000px;
  margin: 0 auto;
  font-size: 14px;
  padding: 20px 0 50px;
}

/* atmos
----------------------*/

#atomos {
  background: #f4f4f4 url(../img/bg_atomos.png) repeat-x center bottom;
  background-size: 670px 230px;
  padding-bottom: 170px;
}

@media screen and (max-width: 800px) {
  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }
  h2 {
    padding: 12% 0;
  }
  h2 img {
    width: 56.8%;
  }
  section h3 {
    padding: 10% 0 6% 0;
  }
  section {
    padding: 0 5.5% 8%;
  }
  #age .box, #age dl, #age p, #lunch, #alcohol, #drink ul, #work ul, #work ul li, #drink ul li:first-child, #lunch p, #alcohol p, #alcohol h3 img {
    width: 100%;
  }
  /* staff
----------------------*/
  #staff h3 img {
    width: 49.8%;
  }
  /* age
----------------------*/
  #age h3 img {
    width: 62%;
  }
  #age dl dt {
    width: 31%;
    margin: 0 auto;
    padding-bottom: 2.9%;
  }
  #age dl dd {
    width: 46.4%;
    float: left;
    padding-bottom: 5.6%;
  }
  #age dl dd.first {
    padding: 0 7% 0 0;
  }
  /* job
----------------------*/
  #job {
    padding-bottom: 0;
  }
  #job h3 img {
    width: 14.2%;
  }
  #job ul li {
    width: 45.7%;
    padding-right: 7.8%;
  }
  #job ul li:nth-child(2) {
    padding: 0 0 2% 0;
  }
  /* fashion
----------------------*/
#fashion{
  padding-bottom: 5%;
}
#fashion h3 img{
  width:49.5%;
}
#fashion ul{
  font-size:0;
}
#fashion ul li {
    width: 45.7%;
    padding-right: 0;
    display: inline-block;
}
#fashion ul li:first-child {
  padding-right: 7.8%;
}
  /* work
----------------------*/
  #work h3 img {
    width: 39%;
  }
  #work ul {
    padding: 9% 10% 2.5%;
  }
  #work ul li img, #work ul li img:last-child {
    padding-bottom: 8.8%;
  }
  #work ul li:nth-child(odd) {
    padding: 0;
  }
  #work ul:after {
    background: none;
  }
  /* origin
  ----------------------*/
  #origin h3 img{
    width:18.3%;
  }
  #origin ul{
    width:100%;
    overflow: hidden;
    margin:0 auto;
    background: url('../img/origin_map.png') no-repeat center bottom;
    background-size: 69% auto;
    padding-bottom: 63%;
  }
#origin ul li{
  width:46.8%;
}
#origin ul li:first-child{
  margin:0 5.5% 0 0;
}
#origin ul li img{
  margin-bottom: 4%;
}
  /* blood
----------------------*/
  #blood h3 img {
    width: 49%;
  }
  /* study
----------------------*/
  #study h3 img {
    width: 43.4%;
  }
  #study ul li {
    width: 39%;
    padding: 0 17.3% 0 3.7%;
  }
  #study ul li:nth-child(2) {
    padding: 0 0 5% 0;
  }
  #study ul li:nth-child(3) {
    width: 34.8%;
  }
  /* lunch
----------------------*/
  #lunch, #lunch p, #alcohol {
    float: none;
    box-sizing: border-box;
  }
  #lunch h3 img {
    width: 61%;
  }
  #lunch h3, #alcohol h3 {
    text-align: center;
  }
  #lunch p, #alcohol p, #lunch h3 img, #alcohol h3 img {
    padding: 0;
  }
  #lunch p {
    width: 88%;
    margin: 2% auto 0;
  }
  /* alcohol
----------------------*/
  #alcohol h3 img {
    width: 54.7%;
  }
  #alcohol p {
    width: 88%;
    margin: 3% auto 0;
  }
  /* drink
----------------------*/
  #drink {
    background: url(../img/bg_drink.png) repeat-x center bottom;
    background-size: contain;
    padding-bottom: 16.6%;
  }
  #drink h3 img {
    width: 56%;
  }
  #drink ul li:first-child {
    width: 88%;
    margin: 0 auto;
    float: none;
  }
  #drink ul li:nth-child(2), #drink ul li:nth-child(3) {
    width: 42%;
    float: none;
    display: inline-block;
  }
  #drink ul li:nth-child(2) {
    padding: 6% 3% 0 0;
  }
  /* holiday
----------------------*/
  #holiday {
    background: #b8e2ff url(../img/sp_bg_holiday.gif) no-repeat center top;
    background-size: contain;
    padding: 0 0 20.6%;
  }
  #holiday h3 img {
    width: 73%;
  }
  #holiday ul li {
    width: 53%;
  }

  /* atomos
----------------------*/
  #atomos {
    background: #f4f4f4 url(../img/bg_atomos.png) repeat-x center bottom;
    background-size: contain;
    padding-bottom: 37%;
  }
  #atomos h3 img {
    width: 74%;
    margin: 0 auto;
  }
  .kome {
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
  }
  @media screen and (max-width: 500px) {
    .privacyFixed {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 100;
    }
    .privacyFixed img {
      width: 60px;
    }
  }
