@charset "utf-8";
/* ==========================================================

title : ホームメイト
scope : 施設写真コンテスト 優秀写真作品集 写真集ページ

last modify : 2018/03/08 247_morita 写真集レイアウト改修 #13589

memo : 
2017/03/01 290_oguri 小エリアフレキシブルレイアウトcss追加 #11694
2017/02/21 247_morita 優秀写真作品集・投稿ユーザー写真集レイアウト改修 #11694
2016/06/25 247_morita 写真集レイアウト改修#10243
2015/10/20 227_suzuki 写真枠に施設名のcaptionを追加　#6877
2015/09/10 227_suzuki 新規作成


========================================================== */
/* ==============================
 リセット・基本・レイアウト
============================== */
body {
  background:#000;
  text-align:center;
}

p {
   margin:0;
}

dt,dd {
  margin:0;
}

img {
  border:none;
}

.maincol {
  margin:0 auto;
  position:relative;
  width:1000px;
}

/* ClearFix */
.cf:before,
.cf:after {
  content:"";
  display: table;
}

.cf:after {
  clear:both;
}

.imghover:hover img {
  opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
}

@media screen and (max-device-width: 1024px) {
  html,body {
    margin:0 auto;
    width:1060px;
  }
  
  .imghover:hover img {
    opacity:1;
  }
}

/* ==============================
 ページタイトル
============================== */
.mainttl {
  background:url("/static/album/p_collection/bg_header.jpg") no-repeat  0 0;
  box-sizing: border-box;
  display: table;
  height: 180px;
  margin: 0 auto;
  padding: 80px 10px 10px ;
  position: relative;
  width: 1000px;
}

.mainttl .ttl {
  color: #fff;
  display: table-cell;
  font-size: 35px;
  font-weight: 600;
  vertical-align: middle;
}

.mainttl .logo {
  display: block;
  left: 22px;
  line-height: 0;
  position: absolute;
  top: 23px;
}

/* ==============================
 画像BOX
============================== */
.phbox {
  background: #aaa;
  border-bottom: 5px solid #666666;
  border-left: 5px solid #a7a7a7;
  border-right: 5px solid #a7a7a7;
  border-top: 5px solid #d9d9d9;
  box-sizing: border-box;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}

.phbox a {
  border: 1px solid #fff;
  display: block;
  margin: 0;
  position: relative;
}

.phbox a img {
  bottom: 0;
  height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.phbox a:before {
  bottom: -2px;
  content:url("/static/album/ico_st_zoom.gif");
  position:absolute;
  right:0;
}

.phbox.large {
  height: 495px;
  width: 495px;
}

.phbox.large a {
  height: 483px;
  width: 483px;
}

.phbox.midle {
  height: 394px;
  width: 394px;
}

.phbox.midle a {
  height: 382px;
  width: 382px;
}

.phbox.small {
  height: 293px;
  width: 293px;
}

.phbox.small a {
  height: 281px;
  width: 281px;
}

.phbox.xsmall {
  height: 192px;
  width: 192px;
}

.phbox.xsmall a {
  height: 180px;
  width: 180px;
}

/* ==============================
 画像BOX レイアウト
============================== */
.photo_album [class^="area_"] {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: auto;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}

.area_large {
  max-height: 1818px;
}

.area_midle {
  max-height: 2828px;
}

.area_small {
  max-height: 808px;
}

.area_repeat {
  max-height: 606px;
}

/* エリア大 */
.area_large .p_01{ left:0; top:0; }
.area_large .p_02{ left:10px; top:0; }
.area_large .p_03{ left:0; top:0; }
.area_large .p_04{ left:111px; top:-202px; }
.area_large .p_05{ left:0; top:-101px; }
.area_large .p_06{ left:10px; top:-202px; }
.area_large .p_07{ left:101px; top:-202px; }
.area_large .p_08{ left:111px; top:-101px; }
.area_large .p_09{ left:0; top:-202px; }
.area_large .p_10{ left:10px; top:-202px; }

.area_large.rev .p_01{ left:202px; top: 0; }
.area_large.rev .p_02{ left:212px; top: 0; }
.area_large.rev .p_03{ left:0; top: -202px; }
.area_large.rev .p_04{ left:111px; top: 0; }
.area_large.rev .p_05{ left:101px; top: -202px; }
.area_large.rev .p_06{ left:111px; top: -101px; }
.area_large.rev .p_07{ left:0; top: -101px; }
.area_large.rev .p_08{ left:10px; top: -202px; }
.area_large.rev .p_09{ left:0; top:-202px; }
.area_large.rev .p_10{ left:10px; top:-202px; }

/* エリア中 */
.area_midle .p_01{ left:101px; top:0; }
.area_midle .p_02{ left:111px; top:0; }
.area_midle .p_03{ left:0; top:0; }
.area_midle .p_04{ left:10px; top:0; }
.area_midle .p_05{ left:20px; top:101px; }
.area_midle .p_06{ left:0; top:0; }
.area_midle .p_07{ left:10px; top:0; }
.area_midle .p_08{ left:20px; top:101px; }
.area_midle .p_09{ left:202px; top:0px; }
.area_midle .p_10{ left:212px; top:0px; }

.area_midle.rev .p_01{ left:101px; top:0; }
.area_midle.rev .p_02{ left:111px; top:0; }
.area_midle.rev .p_03{ left:0; margin-top: 111px; top:0; }
.area_midle.rev .p_04{ left:10px; top:0; }
.area_midle.rev .p_05{ left:20px; top:0; }
.area_midle.rev .p_06{ left:0; margin-top: 111px; top: 0; }
.area_midle.rev .p_07{ left:10px; top:0; }
.area_midle.rev .p_08{ left:20px; top:0; }
.area_midle.rev .p_09{ left:10px; top:0px; }
.area_midle.rev .p_10{ left:20px; top:0px; }
/* エクセレントアワード */
.area_midle.rev .img{ left:0; margin-top: 111px; top: 0; }

/* エリア小 */
.area_small .p_01{ left:0; top:0; }
.area_small .p_02{ left:10px; top:101px; }
.area_small .p_03{ left:20px; top:0; }
.area_small .p_04{ left:30px; top:0; }
.area_small .p_05{ left:202px; top:0; }
.area_small .p_06{ left:212px; top:0; }
.area_small .p_07{ left:20px; margin-top: 212px; top: 0; }
.area_small .p_08{ left:30px; margin-top: 212px; top: 0; }
.area_small .p_09{ left:0; top: -202px; }
.area_small .p_10{ left:10px; top: -202px; }

.area_small.rev .p_01{ left:0; top:0; }
.area_small.rev .p_02{ left:10px; top:0; }
.area_small.rev .p_03{ left:20px; top:101px; }
.area_small.rev .p_04{ left:30px; top:0; }
.area_small.rev .p_05{ left:303px; top:0; }
.area_small.rev .p_06{ left:313px; top:0; }
.area_small.rev .p_07{ left:-485px; top:0; }
.area_small.rev .p_08{ left:-475px; top:0; }
.area_small.rev .p_09{ left:606px; top: -202px; }
.area_small.rev .p_10{ left:616px; top: -202px; }

/* エリア繰り返し */
.area_repeat .p_01,
.area_repeat .p_06,
.area_repeat .p_09,
.area_repeat .p_10 {
  margin-right: 201px;
}

.area_repeat .p_05 {
  margin-left: 201px;
}

.area_repeat .p_01{ left:0; top:0; }
.area_repeat .p_02{ left:10px; top:0; }
.area_repeat .p_03{ left:20px; top:0; }
.area_repeat .p_04{ left:30px; top:0; }
.area_repeat .p_05{ left:0; top:0; }
.area_repeat .p_06{ left:10px; top:0; }
.area_repeat .p_07{ left:20px; top:0; }
.area_repeat .p_08{ left:0; top:0; }
.area_repeat .p_09{ left:10px; top:0; }
.area_repeat .p_10{ left:20px; top:0; }

.area_repeat.rev .phbox {
  margin-left: 0;
  margin-right: 0;
}

.area_repeat.rev .p_03,
.area_repeat.rev .p_05,
.area_repeat.rev .p_07,
.area_repeat.rev .p_08 {
  margin-right: 201px;
}

.area_repeat.rev .p_08 {
  margin-left: 201px;
}

/*余白ロゴレイアウト*/
.logo {
  color: #fff;
  display: block;
  font-size: 26px;
  font-weight: 600;
  position: absolute;
}

.logo.hm,
.logo.resrch {
  height: 111px;
  width: 293px;
}

.logo.resrch img,
.logo.hm img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.logo.hm {
  right: 0;
  top: 808px;
}

.logo.resrch {
  left: 0;
  top: 1212px;
}

.logo.cate {
  left: 0;
  top: 404px;
}

.logo.cate_en {
  left: 0px;
  top: 1313px;
}

.logo.excellent_en {
  right: 0;
  top: 303px;
}

.logo.cate_en,
.logo.excellent_en,
.collection_en {
  letter-spacing: -0.1px\9; /* IE10以下 */
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .logo.cate_en:not(:target),
  .logo.excellent_en:not(:target),
  .collection_en:not(:target) {
    letter-spacing: -0.1px; /* IE10,11 */
  }
}

.logo.cate span,
.logo.cate_en span,
.logo.excellent_en span {
  display: table-cell;
  height: 111px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: auto;
  vertical-align: middle;
  width: 293px;
}

.logo.cate_en span{
  width: 394px;
}

.logo.excellent_en span {
  height: 212px;
}

/* ==============================
 画面下　PRテキストBOX
 =============================== */
.area_mo_box {
  background: url("/static/album/p_collection/bg_footer.png") repeat-x center bottom;
  padding: 105px 0 18px;
}

.mo_box {
  background: #000; /* IE8 */
  background: rgba(0,0,0,0.6);
  border-color: #717171;
  margin-bottom: 0;
}

* > .mo_box p {
  color: #fff;
}

/* ==============================
 フッター
============================== */
#footer {
  background: #000;
  border-top: none;
  color: #fff;
}

#line_box_footer .color_p {
  border-color: #000;
}

#footer a:link,
#footer a:visited {
  color: #fff;
  text-decoration:underline;
}

#footer a:hover {
  text-decoration:none;
}

/* ==============================
 モーダル表示　コンテンツ
============================== */
.mordal_cont {
  background: #fff;
  margin: 0;
  overflow: hidden;
  text-align: center;
  width: 640px;
}

.mordal_cont .center {
  color: #777;
  line-height: 1;
  margin: 0 auto;
  width: 640px;
}

.mordal_cont .photo img {
  max-height: 480px;
  max-width: 640px;
  vertical-align: top;
}

.mordal_cont .area_data {
  margin: 0 auto;
  position: relative;
}

.mordal_cont .data {
  font-size: 0;
  margin: 9px 0 0;
  text-align: left;
}

.mordal_cont .data dt {
  color: #1a8175;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-indent: 15px;
  width: 125px
}

.mordal_cont .data dd {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  max-width: 600px;
  padding: 0 20px;
  word-wrap: break-word;
}

.mordal_cont .data.name {
  background: #ededed;
  font-size: 17px;
  font-weight: 600;
  margin-right: 148px;
  padding: 6px 0 7px;
}

.mordal_cont .data.ttl {
  background: #ededed;
  padding: 3px 0 3px;
}

.mordal_cont .data.user {
  border-bottom: 1px solid #c3dfda;
  padding-bottom: 7px;
}

.mordal_cont .dtllink {
  border: none;
  display: block;
  height: 33px;
  position: absolute;
  right: 0;
  top: 0;
  width: 138px;
}

.mordal_cont .injustice {
  background: #f2f8f7;
  margin: 10px auto;
  padding: 0 15px;
  width: 460px;
}

.mordal_cont .injustice p {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
}

.mordal_cont .injustice a {
  background: url("/search/image/dtl/mrk_alert01.gif") no-repeat 0 center;
  display: inline-block;
  font-size: 13px;
  margin-left: 10px;
  padding: 8px 0;
  text-indent: 13px;
  vertical-align: middle;
}

.mordal_cont .closebtn {
  margin: 10px auto 0;
  padding-bottom: 5px;
}

.mordal_cont .closebtn img {
  cursor: pointer;
}

/* ==============================
 fancybox.css 設定上書き
============================== */
.fancybox-overlay {
  background: #000;
}

.fancybox-skin {
  background: #fff;
  border-radius: 0;
}

.fancybox-nav {
  width: 60px;
}

.fancybox-nav span {
  opacity: 0.5;
  transition: all 0.1s linear 0s;
  visibility: visible;
}

.fancybox-nav:hover span {
  opacity: 1;
}

.fancybox-next {
  right: -70px;
}

.fancybox-prev {
  left: -70px;
}

/* スクロールバー設定  */
.fancybox-inner {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: auto;
}

.fancybox-inner::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

.fancybox-inner::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 5px;
}

.fancybox-inner::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 5px;
}