/* --------------------------------
 basement style
 --------------------------------*/

body {
  margin: 0;
  padding: 0;
}

body html {
	font-family: -apple-system, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'メイリオ', meiryo, sans-serif
  font-size: 12px;
  color: #666;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

/*--[Clear Fix]--*/
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}


#wrapper {
  width: 100%;
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  background: #fff url(../images/bg.gif) center center repeat-y;
}
.nest {
  width: 92%;
  max-width: 800px;
  margin: 0 auto;
}
a,a img {
  border: none;
}
a:link {
  color: #069;
} 
a:visited {
  color: #699;
}
a:hover {
  color: #C33;
}

/* --------------------------------
 frame style
 --------------------------------*/
header#top-head {
  width: 100%;
}
h1 {
  margin: 0;
  padding: 0;
  width: 100%;
/*
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
*/
}
h1 img {
  width: 100%;
  max-width: 741px;
  height: auto;
  margin: 0 auto;
}

.head-top {
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
}

.dj-img {
  max-width: 140px;
  width: 15%;
  float: left;
  margin-top: .5rem;
  margin-right: 20px;
}

figure img {
  width: 100%;
}

.prg-title {
  width: 74%;
  max-width: 770px;
  float: left;
  text-align: left;
}
.prg-title h2 {
  margin: 0;
  padding: 0;
}
.prg-title h2 img {
  width: 100%;
  height: auto;
}
.prg-title p {
  font-size: 75%;
  font-weight: bold;
  line-height: 140%;
  letter-spacing:1px;
  padding-top: 0;
  margin-top: 0;
}
.prg-title p span.txt-right {
  float: right;
}


#blog-frame {
  width: 92%;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #CCC;
  -webkit-box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
   -moz-box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
        box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
  background: #FFF;
  padding: 2% 0;
}
.blog-left {
  width: 40%;
  max-width: 300px;
  float: left;
}
.blog-left div {
  width: 94%;
  background: #006633;
  border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
  padding: .3rem;
  margin: 0;
}
.blog-left div ul {
  border: 1px solid #FFF;
  padding: .2rem;
  margin: 0;
  border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
  list-style-type: none;
}
.blog-left div ul li:nth-child(1) {
  width: 96%;
  margin: 0 auto;
}
.blog-left div ul li:nth-child(1) img {
  width: 65%;
  float: left;
}
.blog-left div ul li:nth-child(1) span.date {
  font-family: Impact, sans-serif, "Times CE", Univers, "HelveticaNeue HeavyCond", Helvetica;
  font-size: 9px;
  color: #FFF;
  float: right;
  padding-top: .2rem;
}
.blog-left div ul li:nth-child(2) {
  width: 96%;
  text-align: left;
  margin: .5rem auto;
}
.blog-left div ul li:nth-child(2) span.title {
  color: #FFF;
  font-size: 100%;
  padding: .2rem;
}
.blog-left figure {
  width: 100%;
  margin-left: 0;
}
.blog-right {
  width: 59%;
  max-width: 466px;
  font-size: 13px;
  text-align: left;
  line-height: 1.6em;
  float: right;
}

#blog-archive {
  margin-top: 1rem;
}

#blog-archive a {
  width: 46%;
  display: block;
  margin: 0 auto;
  border: 1px solid #CCC;
  -webkit-box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
   -moz-box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
        box-shadow:0 0 6px 2px rgba(200,200,200,0.2) inset;
  background: #FFF;
  padding: 1%;
  text-align: left;
  float: left;
  margin-bottom: 2%;
}
#blog-archive p {
  margin-top: 0;
  padding-top: 0;
  font-size: 13px;
}
#blog-archive a img {
  width: 95px;
  float: left;
  margin-right: 1rem;
}
#blog-archive a:nth-child(2n) {
  float: right;
}

#banner-link {
  width: 100%;
}

#banner-link a.fb {
  margin: 1rem auto;
  display: block;
}
#banner-link a.fb img {
  max-width: 100%;
}

#banner-link a.location {
  width: 92%;
  display: block;
  margin: 2rem auto 1rem auto;
}
#banner-link a.location img {
  display: inline-block;
  max-width: 100%;
}

footer {
  margin-top: 1rem;
}

.foot-left {
  width: 80%;
  font-size: 80%;
  float: left;
  text-align: left;
}

.foot-right {
  float: right;
  width: 16%;
}
.foot-right img {
  width: 100%;
  height: auto;
} 


.pc {
  display: block;
}
.sp {
  display: none;
}
.sp-footer {
display:none;
}
.facebook-ban {
width: 100%;
background-color: #102F70;
text-align: center;
margin: 0;
padding: 0;
}
.facebook-ban img {
width:100%;
max-width:350px;
}


@media screen and (max-width:640px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  footer {
    margin-bottom: 2.5rem;
  }
  .dj-img {
    float: none;
    width: 98%;
    max-width: 98%;
    margin: 0 auto;
  }
  .dj-img .photo {
    float: left;
    width: 30%;
    max-width: 120px;
  } 
  .dj-img h2 {
    float: left;    
    width: 65%;
  }
  .dj-img h2 img {
    width: 100%;
    height: auto;
  } 
  .prg-title {
    float: none;
    width: 94%;
    max-width: 94%;
    margin: 0 auto;
    clear: both;
  }
  .prg-title p {
    margin-top: 1rem;
  }
  .prg-title br {
    display: none;
  }
  .blog-left {
    width: 100%;
    max-width: 100%;
    float: none;
  }
  .blog-left div ul li:nth-child(1) img,
  .blog-left div ul li:nth-child(1) span.date {
    float: none;
    width: 100%;
    font-size: 100%;
    text-align: left;
    display: block;
  }
  .blog-right {
    width: 100%;
    max-width: 100%;
    font-size: 90%;
    text-align: left;
    line-height: 1.6em;
    float: none;
  }
  #blog-archive a {
    width: 98%;
  }
  .foot-left {
    width: 100%;
    font-size: 80%;
    float: none;
    text-align: left;
  }
  .foot-right {
    float: none;
    width: 145px;
    max-width: 100%;
    margin: 1rem auto;
  }
  .sp-footer {
    display:block;
    position:fixed;
    bottom:0;
    width:100%;
    height:auto;
    text-align:center;
    background: #fff url(../images/bg.gif) center center repeat-y;
  }
  .sp-footer a {
  width:100%;
  display:block;
  }
  .sp-footer a img {
  width:100%;
  max-width: 407px;
  }

}