/* main.css */
body {
   font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* plugin except */
.mfp-counter {
   display: none;
}
.mfp-arrow-left {
   background: url("../images/galleryleft.png") no-repeat center !important;
}
.mfp-arrow-left {
   background: url("../images/tr.gif")\9!important;
}
.mfp-arrow-right {
   background: url("../images/galleryright.png") no-repeat center !important;
}
.mfp-arrow-right {
   background: url("../images/tr.gif")\9!important;
}
.mfp-arrow::before,
.mfp-arrow::after{
   border:none !important;
}
button.mfp-close {
   color: transparent !important;
}
button.mfp-close::after {
   content: url(../images/galleryclose.png);
}
img.mfp-img {
   padding: 50px 0 !important
}
.mfp-figure::after {
   background: transparent !important;
   box-shadow: 0 0 0px rgba(0, 0, 0, 0.6) !important;
}
.mfp-container {


}
.gallery a img,
.detail a img {
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
}
.gallery a img:hover ,
.detail a img:hover {
   opacity: .5;
   filter:alpha(opacity=50);
   -moz-opacity:.5;
}
.container {
   background-repeat: no-repeat;
   background-position: top center;
   background-size: 100% auto;
   min-width: 1000px;
   //background: url(../images/sample_main_03.png) no-repeat center top;
}
@media screen and (max-width: 1000px){
   .container {
         max-width: 1000px;
         min-width: 0;
   }
}
.w1000 {
   max-width: 1000px;
   margin: 0 auto;
   position: relative;
}

.upper {
   overflow: hidden;
   background: url(../images/herobg_pc.jpg) center top;
}
.upper .w1000 {
   overflow: hidden;
}
.logo {
   position: relative;
   margin: 42px 0 0 3.2%;
}
.logo img {
   display: block;
}
@media screen and (max-width: 750px){
   .upper {
      overflow: hidden;
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% auto;
      background-image: url(../images/herobg_sp.jpg);
      background-color: #000;
   }
   .upper .w1000 {
      overflow: hidden;
   }
   .logo {
      position: relative;
      margin: 4% 0 0 5.2%;
   }
   .logo img {
      width: 19%;
      height: auto;
   }
}
.heroimg {
   overflow: hidden;
   width: 394px;
   float: right;
   margin: -59px 0 0 0;
}
.heroimg img {
   display: block;
}
@media screen and (max-width: 1000px){
   .heroimg {
      width: 39.4%;
   }
   .heroimg img {
      width: 100%;
      height: auto;
   }
}
@media screen and (max-width: 750px){
   .heroimg {
      display: none
   }
}
.herotitle {
   position: relative;
   width: 506px;
   margin: 100px 0 0 31px;
}
.herotitle img {
   margin: 0 0 38px;
   display: none;
}
.herotitle img:first-child {
   display: block;
}

.herotitle .herotitle_detail {
   width: 506px;
   font-size: 1em;
   line-height: 1.9;
   margin: 0px 0 0;
   padding: 0;
   color: #fff;
}
@media screen and (max-width: 999px){
   .herotitle {
      width: 50.6%;
      margin: 9% 0 0 3%
   }
   .herotitle img {
      width: 100%;
      height: auto;
      margin: 0 0 6%;
   }
   .herotitle .herotitle_detail {
      width: 100%;
      font-size: .875em;
      line-height: 1.75;
   }
}
@media screen and (max-width: 750px){
   .herotitle {
      width: 90%;
      margin: 100.8% 0 5% 5.5%
   }
   .herotitle img {
      display: block;
      margin: 0 0 4%;
   }
   .herotitle img:first-child {
      display: none;
   }
   .herotitle .herotitle_detail {
      width: 100%;
      font-size: 0.75em;
      line-height: 1.666;
   }
}

.middle {
   overflow: hidden;
   background: url(../images/mainbg_pc.jpg) center top;
}
.middle .w1000 .except {
   text-align: center;
}
.middletitle {
   font-size: 2.375em;
   text-align: left;
   font-weight: bold;
   letter-spacing: -1px;
   margin: 0 auto;
   padding: 62px 0 31px;
   display: inline-block;
}
.middletitle .first{
   letter-spacing: -0.2px;
}
br.sp {
   display: none;
}
@media screen and (max-width: 999px){
   .middletitle {
      font-size: 1.75em;
      padding: 6.2% 0 3.1%;
   }
}
@media screen and (max-width: 750px){
   .middle {
      overflow: hidden;
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% 100%;
      background-image: url(../images/mainbg_sp.jpg);
   }
   .middletitle {
      font-size: 1.333em;
      text-align: left;
      font-weight: bold;
      letter-spacing: -1px;
      line-height: 1.4;
      margin: 0;
      padding: 6% 0 4%;
   }
   br.sp {
      display: inline;
   }
}
.middleimg img {
   display: none;
   width: 100%;
   height: auto;
}
.middleimg img:first-child {
   display: block;
}
.middlebottom img {
   display: none;
   float: left;
   width: 47.2%;
   height: auto;
}
.middlebottom img:first-child {
   display: block;
}
.middlebottomright {
   width: 47%;
   float: right;
}
@media screen and (max-width: 750px){
   .middleimg img {
      display: block;
      width: 100%;
      height: auto;
   }
   .middleimg img:first-child {
      display: none;
   }
   .middlebottom {
      overflow: hidden;
   }
   .middlebottom img {
      display: block;
      float: left;
      width: 53.1%;
      height: auto;
   }
   .middlebottom img:first-child {
      display: none;
   }
   .middlebottomright {
      width: 46%;
      float: right;
   }
}
.middlebottomrighttitle {
   font-size: 1.5em;
   font-weight: bold;
   margin: 50px 0 19px;
   padding: 0;
   line-height: 1.5;
}
@media screen and (max-width: 999px){
   .middlebottomrighttitle {
      font-size: 1.5em;
      font-weight: bold;
      padding: 0;
      line-height: 1.333;
      margin: 10% 0 5%;
      padding-right: 30%;
   }
}
@media screen and (max-width: 750px){
   .middlebottomrighttitle {
      font-size: 0.966em;
      font-weight: bold;
      padding: 0;
      line-height: 1.25;
      margin: 16% 0 6%;
      padding-right: 2%;
      padding-left: 2%;
      letter-spacing: -.5px;
   }
   .middlebottomrighttitle br {


   }
}

.middlebottomright ul {
   margin: 0 20px;
   padding: 0;
}
.middlebottomright ul li {
   line-height: 1.75;
}
@media screen and (max-width: 750px){
   .middlebottomright ul {
      margin: 0 20px 5%;
   }
   .middlebottomright ul li {
      font-size: 0.777em;
      letter-spacing: -.5px;
      line-height: 1.666
   }
}
.gallery {
   overflow: hidden;
   background: url(../images/gallerytitlebg_pc.jpg) no-repeat center top;
}
.gallerytitle {
   width: 255px;
   float: left;
}
.gallerytitle p {
   color: #fff;
   font-size: 1.5625em;
   font-weight: bold;
   letter-spacing: -.5px;
   margin: 113px 0 0;
   line-height: 1.333;
}
.gallerytitle p > .pc {
   color: #fff;
   font-size: .48em;
   font-weight: normal;
}
.gallerytitle p > .sp{
   display: none;
}
@media screen and (max-width: 750px){

}
.galleryimgs {
   float: right;
   width: 729px;
}
.galleryimgs ul {
   margin: 0;
   padding: 0;
   overflow: hidden;
}
.galleryimgs ul li {
   list-style-type: none;
   float: left;
   border-left: 1px solid #272727;
}
.galleryimgs ul li a img {
   display: none;
   float: left;
}
.galleryimgs ul li a img:first-child {
   display: block;
}
@media screen and (max-width: 999px){
   .gallerytitle p {
      color: #fff;
      font-size: 1.25em;
      margin: 36% 0 0;
      line-height: 1.333;
   }
   .gallerytitle {
      width: 27.2%;
   }
   .galleryimgs {
      width: 72.8%;
   }
   .galleryimgs li {
      width: 24.7%;
   }
   .galleryimgs li img {
      width: 100%;
      height: auto;
   }
}
@media screen and (max-width: 750px){
   .gallerytitle {
      width: 100%;
      float: none;
      clear: both;
   }
   .gallerytitle p {
      text-align: center;
      margin: 4.2% auto;
      font-size: 1.666em
   }
   .gallerytitle p > .pc {
      display: none;
   }
   .gallerytitle p > .sp{
      display: block;
      color: #fff;
      font-size: .48em;
      font-weight: normal;
   }
   .galleryimgs {
      width: 100%;
   }
   .galleryimgs ul li:first-child {
      border-left: none;
   }
   .galleryimgs ul li a img {
      display: block;
   }
   .galleryimgs ul li a img:first-child {
      display: none;
   }
}
.detail {
   background: #afaeb3;
   text-align: center;
   padding: 62px 0 100px;
}

.detail  img {
   margin: 0px auto 0;      /* 62 a 100 */
}
.detail a img {
   display: none;
}
.detail a img:first-child {
   display: inline-block;
}
.detail .note {
   display: block;
   max-width: 900px;
   text-align: right;
   font-size: 1.0em;
   margin: 0 auto;
   font-size: .75em;
}
@media screen and (max-width: 1000px){
   .detail {
      padding: 6.2% 0;
   }
   .detail img {
      width: 90%;
      height: auto;
   }
   .detail .note {
      max-width: 90%;
   }
}
@media screen and (max-width: 750px){
   .detail a img {
      display: inline-block;
   }
   .detail a img:first-child {
      display: none;
   }
}
.footer {
   background: #000;
}
.footercredit {
   font-size: .75em;
   color: #fff;
   text-align: center;
   font-style: normal;
   font-weight: normal;
   padding: 12px 0;
}