@charset "UTF-8";


/*
メインビジュアル

mainImage

Markup:
<div class="mainArea">
  <div id="mainImages" class="slider-pro">
    <div class="sp-slides">
      <div class="sp-slide"><img src="./assets/images/top/main_image.jpg" alt="○○○写真館"></div>
      <div class="sp-slide"><img src="./assets/images/top/main_image2.jpg" alt="○○○写真館"></div>
      <div class="sp-slide"><img src="./assets/images/top/main_image3.jpg" alt="○○○写真館"></div>
    </div>
  </div>
</div>
<!-- /.mainImage -->

Styleguide 2.2
============================================================*/

.mainArea {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  background:url(../../../my_assets/gray/images/shared/line.png) 0 bottom repeat-x,url(../../../my_assets/gray/images/shared/bg02.jpg) 0 0 repeat;
}

@media screen and (max-width: 768px) {
.mainArea {
  width: 100%;
  margin: 0 auto;
}
}

.wrapper {
  display: none;
}




/*
新着情報

news

Markup:
<div id="news">
  <div id="newsTitle"><img src="assets/images/top/news_title.png" alt="WHAT'S NEW 新着情報"></div>
  <dl>
    <dt>2015.03.1</dt>
    <dd>ニュースタイトル●●●●●●●●●●●●●●●●●●。</dd>
    <dt>2015.03.1</dt>
    <dd>ニュースタイトル●●●●●●●●●●●●●●●●●●。</dd>
    <dt>2015.03.1</dt>
    <dd>ニュースタイトル●●●●●●●●●●●●●●●●●●。</dd>
  </dl>
  <div class="btn_list"><a href=""><img src="./assets/images/top/btn_list.gif" alt="一覧を見る"></a></div>
</div>
<!-- /.news -->

Styleguide 2.2
============================================================*/

#news {
  padding: 0px;
  margin: 20px auto;
  border-top: solid 2px #555;
}
#news:after{
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
#news #newsTitle{
  margin: 0 0 10px;
  padding: 15px 20px;
  text-align: left;
  background:url(../../../my_assets/gray/images/shared/line.png) 0 bottom repeat-x;
}
#news dl {
  width  : 640px;
  margin: auto;
  border-bottom: solid 1px #ccc;
}

#news dt {
  float : left;
  clear : both;
  width : 115px;
  border-top: solid 1px #ccc;
  padding : 5px 10px;
  line-height: 2;
  margin: 0;
}

#news dd {
  margin: 0 0 0 115px;
  border-top: solid 1px #ccc;
  padding : 5px;
  line-height: 2;
}
#news dt:first-of-type,
#news dd:first-of-type {
  border-top: none;
}

.btn_list {
  text-align: right;
  margin: 20px 0;
  padding: 0;
  border-top: solid 2px #555;
}

@media screen and (max-width: 768px) {
  #news {
    margin: 20px 10px;
  }
  #news dl {
    width  : 100%;
  }

  #news dt {
    float : none;
    clear : both;
    width  : 100%;
    border-bottom: none;
    padding : 5px 10px;
    line-height: 2;
    margin: 0;
  }

  #news dd {
    margin: 0;
    border-bottom: solid 1px #ccc;
    padding : 5px 10px;
    line-height: 2;
  }
}





/*
フリースペース

#freeSpace

Markup:
<div id="freeSpace">
  <h1 class="headLine1">Free Space</h1>
  <p class="fRight ml10"><img src="./assets/images/dummy_photo1.jpg" alt=""></p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p><img src="assets/images/dummy_photo2.jpg" alt=""> <img src="assets/images/dummy_photo2.jpg" alt=""> <img src="assets/images/dummy_photo2.jpg" alt=""></p>
</div>
<!-- /.freeSpace -->

Styleguide 2.2
============================================================*/

#freeSpace {
  padding: 0;
  margin: 20px auto;
}
#freeSpace:after{
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

@media screen and (max-width: 768px) {
  #freeSpace {
    padding: 0 20px;
    margin: 20px auto;
    width: 100%;
  }
}