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

title : ホームメイトリサーチ おでかけ特集　
scope : おでかけ特集TOPページ

============================================================================ */

/* ==========================================================
 基本・リセット
========================================================== */
body{
  font-size:15px;
}
img{
  vertical-align: top;
}
h1{
  margin: 0;
}
* > a:hover [src*="btn-"],
* > a:hover [src*="bnr-"],
* > a:hover [src*="nav-"],
* > a:hover [src*="btn_"],
* > a:hover [src*="bnr_"] {
  cursor: pointer;
  opacity: .8;
}

#header p,
.main_nav p {
    margin: 0;
}

/* ==========================================================
 汎用クラス
========================================================== */
/*ClearFix*/
.cf:before,.cf:after{
  content:"";
  display: table;
}
.cf:after{
  clear:both;
}

/*バナー*/
.cmn_bnr {
  margin: 50px auto 40px;
  text-align: center;
}
.cmn_bnr .bnr {
  display: inline-block;
  line-height:1;
}
.cmn_bnr .bnr:nth-child(n+2){
  margin-top:25px;
}
.cmn_bnr .cap {
  margin: 8px 0 0;
  line-height:1.2em;
}

/* ==========================================================
 メインヘッダー mod_header
========================================================== */
.mod_header{
  width:1000px;
  margin:0 auto;
}
.mod_header .mein_lead{
  width:690px;
  line-height:1.6;
  margin:35px auto 45px;
  text-align: left;
}

/* ==========================================================
 お知らせ　　news_area
========================================================== */
.news_area{
  margin: 70px auto 0;
  position: relative;
	text-align: center;
  width: 830px;
}
.news_area dt.site_ttl{
  background: #0d4a88;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  height: 35px;
  left: 0;
  line-height: 35px;
  margin: -22px auto 0;
  position: absolute;
  right: 0;
  width: 300px;
}
.news_area dt.site_ttl::before{
  left: -10px;
}
.news_area dt.site_ttl::after{
  right: -10px;
  transform: scale(-1, 1); 
}
.news_area dt.site_ttl::before, .news_area dt.site_ttl::after{
  background: url(/special/image/ttl-news-bg-img-side.png) no-repeat 0 0;
  background-size: cover;
  content: "";
  height: 35px;
  position: absolute;
  top: 0;
  width: 10px;
}
.news_area{
  background: url(/special/image/bg-news-pattern.png)repeat-y 0 0;
  border-radius:10px;
  display: table;
  margin: 0 auto 42px;
  padding: 7px 0 2px;
  width:830px;
  box-shadow: 0 2px 3px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 2px 3px 2px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0 2px 3px 2px rgba(0,0,0,0.15);
}
.news_area ul{
  background: #FFFAED;
  border-radius:5px;
  display: inline-block;
  margin: 0 auto;
  padding: 30px 0 0;
  width:816px;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15)inset;
  -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15)inset;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15)inset;
}
.news_box:first-child{
	padding-top: 10px;
}
.news_box_data{
  border-bottom: 1px #9f755c solid;
  line-height: 1.4em;
  padding: 3px 0px 9px 15px;
  margin: 0px 15px 10px 12px;
  text-align: left;
  width: 790px;
}
.news_box_data:last-child{
	border-bottom:none;
  margin-bottom: 5px;
}
.news_box_day{
	display: table-cell;
  width: 140px;
	margin: 0 0 0 20px;
}
.special_tags::before{
  background: #ff31a5;
  color: #fff;
  content: "特 集";
  font-size: 13px;
  font-weight: 600;
  float: left;
  letter-spacing: 2px;
  text-align: center;
  text-indent: 0;
  padding: 3px 10px;
  margin: 0 12px 0 4px;
  vertical-align: 1px;
}
.photo_tags::before{
  background: #2393e9;
  color: #fff;
  content: "写真集";
  font-size: 13px;
  font-weight: 600;
  float: left;
  letter-spacing: 2px;
  text-align: center;
  text-indent: 0;
  padding: 3px 4px 3px 6px;
  margin: 0 12px 0 4px;
  vertical-align: 1px;
}
.news_box_url{
	display: table-cell;
  text-indent: -.5em;
	width: 620px;
}
.news_box_url a{
	color:#0152C2;
}
.news_box_url a:hover{
	color:#ea2020;
}

/* ==========================================================
 フリーモデル募集バナー bnr_freemodel
========================================================== */
.bnr_freemodel {
  background: url("/special/image_cmn/freemodel-img-model.png") no-repeat right 1px top 1px,url("/special/image_cmn/freemodel-bg-img.png") repeat-y left 1px top 1px #fff;
  background-size: 290px 214px,744px 214px;
  border: 2px solid #e35c70;
  margin: 0 auto 50px;
  min-height: 220px;
  padding: 1px 291px 5px 1px;
  text-align: center;
  width: 750px;
}

.bnr_freemodel dt {
  background: url("/special/image_cmn/freemodel-img-ttl.png") repeat-x left bottom;
  background-size: 10px 5px;
  color: #4d2121;
  font-size: 27px;
  display: inline-block;
  font-weight: 600;
  padding: 10px 25px 9px 15px;
}

.bnr_freemodel dd p {
  color: #222;
  font-size: 15px;
  letter-spacing: .03em;
  line-height: 1.4;
  margin: 15px auto 0;
  text-align: left;
  width: 420px;
}

.bnr_freemodel dd .btn a {
  background: #ff512f;
  box-shadow: 0 -3px 0 0 #a6351f inset,0 4px 6px 0 rgba(78,78,78,0.36);
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  height: 35px;
  line-height: 32px;
  margin-top: 16px;
  padding-left: 38px;
  position: relative;
  text-align: center;
  width: 280px;
}

.bnr_freemodel dd .btn a::before {
  background: url("/special/image_cmn/freemodel-ico-letter.png") no-repeat 0 0;
  background-size: cover;
  bottom: 3px;
  content: "";
  height: 14px;
  left: 16px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 22px;
}

.bnr_freemodel dd .btn a:hover {
  opacity: .8;
}

/* ==========================================================
 段落 特集　　mod_sec
========================================================== */
.mod_sec{
  margin:0 0 80px;
}
#content .mod_sec:last-of-type{
  margin-bottom:50px;
}
.mod_sec .sec_ttl{
  width:920px;
  margin:0 auto;
  position: relative;
}
.mod_sec .sec_ttl::after {
  background: url(/special/image/img_ttl_sec.png) no-repeat 0 0;
  bottom: 2px;
  content: "";
  height: 74px;
  right: -3px;
  position: absolute;
  width: 340px;
}
.mod_sec .sec_lead{
  margin:24px auto;
  text-align: left;
}

/* ==========================================================
 記事　各特集　　mod_article
========================================================== */
.mod_article{
  box-sizing:border-box;
  box-shadow: 0 0 12px 4px rgba(217,217,204,0.3) inset;
  height:302px;
  margin:0 auto 40px;
  border-radius:40px 0 40px 0;
  border:1px solid #1cafe6;
  background: #fffbf1;
  overflow: hidden;
  width:902px;
}
.mod_article .ttl_img{
  float: left;
  width:430px;
}
.mod_article .cont{
  float: right;
  position: relative;
  box-sizing:border-box;
  width: 470px;
  height: 300px;
  padding: 5px 22px 20px;
  text-align:left;
}
.mod_article .ttl {
  color: #20465e;
  font-size: 18px;
  font-weight: 600;
}
.mod_article .ttl span {
  font-size: 14px;
}
.mod_article .txt{
  line-height: 1.5em;
  margin-bottom: 20px;
}
.mod_article .btns{
  position: absolute;
  box-sizing: border-box;
  top: 145px;
  right: 20px;
  width:442px;
  margin:0 8px 0 auto;
  min-height: 145px;
  text-align: right;
}
.mod_article .btn:hover {
  opacity: 0.8;
}
.mod_article .photo_gr:hover {
  opacity: 1;
}
.mod_article .btn{
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 17px;
  line-height: 38px;
  padding: 0 0 0 35px;
  margin: 0 0 12px auto;
  position: relative;
  height: 36px;
  text-align: center;
  width: 220px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
  .mod_article .btn{
    font-weight: 600;
  }
}
.mod_article .btn.special{
  background: #f55f9f;
  box-shadow: 0px 3px 0px 0px #952451, 0px 4px 3px 0px rgba(0,0,0,0.5);
}
.mod_article .btn.photo{
  background: #2c7ee0;
  box-shadow: 0px 3px 0px 0px #104588, 0px 4px 3px 0px rgba(0,0,0,0.5);
}
.mod_article .btn.photo_gr{
  background: #aaaaaa;
  box-shadow: 0px 3px 0px 0px #888888, 0px 4px 0px 0px rgba(0,0,0,0.5);
}
.mod_article .btn.facility{
  background: #3bb724;
  box-shadow: 0px 3px 0px 0px #0e6f00, 0px 4px 3px 0px rgba(0,0,0,0.5);
}
.mod_article .btn:before {
  content: "";
  display: inline-block;
  height: 25px;
  position: absolute;
  top: 7px;
  left: 10px;
  width: 27px;
}
.mod_article .btn.special:before {
  background: url(/special/image/ico-special.png) no-repeat center;
  background-size: 100%;
}
.mod_article .btn.photo:before {
  background: url(/special/image/ico-photo.png) no-repeat center;
  background-size: 100%;
}
.mod_article .btn.photo_gr:before {
  background: url(/special/image/ico-photo-gr.png) no-repeat center;
  background-size: 100%;
}
.mod_article .btn.facility:before {
  background: url(/special/image/ico-facility.png) no-repeat center;
  background-size: 100%;
}

/*各ボーダー色*/
.mod_article.season18 {border-color:#60438e;}
.mod_article.season17 {border-color:#fcb60e;}
.mod_article.season16 {border-color:#87c21f;}
.mod_article.season15 {border-color:#f94160;}
.mod_article.season14 {border-color:#2d91d7;}
.mod_article.season13 {border-color:#aa9667;}
.mod_article.season12 {border-color:#f1a615;}
.mod_article.season11 {border-color:#eb6262;}
.mod_article.season10 {border-color:#134083;}
.mod_article.season09 {border-color:#e73d19;}
.mod_article.season08 {border-color:#0058bb;}
.mod_article.season_ex_01 {border-color:#009e45;}
.mod_article.season07 {border-color:#c62e82;}
.mod_article.season06 {border-color:#a78239;}
.mod_article.season05 {border-color:#e6aa08;}
.mod_article.season04 {border-color:#1cafe6;}
.mod_article.season03 {border-color:#5bc32d;}
.mod_article.season02 {border-color:#2a3d8e;}
.mod_article.season01 {border-color:#c82a2a;}

/*各カット画像*/
.mod_article.season18 .btns{
  background: url(/special/image/bg-img-season18.png) no-repeat 30px 20px;
  background-size: 35%;
}
.mod_article.season17 .btns{
  background: url(/special/image/bg-img-season17.png) no-repeat 30px 20px;
  background-size: 35%;
}
.mod_article.season16 .btns{
  background: url(/special/image/bg-img-season16.png) no-repeat 30px 20px;
  background-size: 35%;
}
.mod_article.season15 .btns{
  background: url(/special/image/bg-img-season15.png) no-repeat 30px 35px;
  background-size: 35%;
}
.mod_article.season14 .btns{
  background: url(/special/image/bg-img-season14.png) no-repeat 25px 25px;
  background-size: 35%;
}
.mod_article.season13 .btns{
  background: url(/special/image/bg-img-season13.png) no-repeat 25px 25px;
  background-size: 35%;
}
.mod_article.season12 .btns{
  background: url(/special/image/bg-img-season12.png) no-repeat 25px 25px;
  background-size: 35%;
}
.mod_article.season11 .btns{
  background: url(/special/image/bg-img-season11.png) no-repeat 25px 25px;
  background-size: 35%;
}
.mod_article.season10 .btns{
  background: url(/special/image/bg-img-season10.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season09 .btns{
  background: url(/special/image/bg-img-season09.png) no-repeat 35px 20px;
  background-size: 35%;
}
.mod_article.season08 .btns{
  background: url(/special/image/bg-img-season08.png) no-repeat 25px bottom;
  background-size: 35%;
 }
.mod_article.season_ex_01 .btns{
  background: url(/special/image/bg-img-season-ex-01.png) no-repeat 25px bottom;
  background-size: 35%;
 }
.mod_article.season07 .btns{
  background: url(/special/image/bg-img-season07.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season06 .btns{
  background: url(/special/image/bg-img-season06.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season05 .btns{
  background: url(/special/image/bg-img-season05.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season04 .btns{
  background: url(/special/image/bg-img-season04.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season03 .btns{
  background: url(/special/image/bg-img-season03.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season02 .btns{
  background: url(/special/image/bg-img-season02.png) no-repeat 25px bottom;
  background-size: 35%;
}
.mod_article.season01 .btns{
  background: url(/special/image/bg-img-season01.png) no-repeat 25px bottom;
  background-size: 35%;
}


/* ==========================================================
 関連サイトのご紹介 block_site
========================================================== */

.block_site {
  border-top: 5px #ae9377 solid;
  margin: 70px auto 60px;
  position: relative;
  width: 750px;
}
.block_site .site_ttl{
  background: #c23131;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  height: 35px;
  left: 0;
  line-height: 35px;
  margin: -20px auto 0;
  position: absolute;
  right: 0;
  text-align: center;
  width: 300px;
}
.block_site .site_ttl::before{
  left: -10px;
}
.block_site .site_ttl::after{
  right: -10px;
  transform: scale(-1, 1); 
}
.block_site .site_ttl::before, .block_site .site_ttl::after{
  background: url(/special/image/ttl-site-bg-img-side.png) no-repeat 0 0;
  background-size: cover;
  content: "";
  height: 35px;
  position: absolute;
  top: 0;
  width: 10px;
}
.block_site .list_site {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 25px auto;
  margin-right: auto;
  width: 640px;
}
.block_site .list_site li {
  margin-top: 20px;
  width: 300px;
}
.block_site .list_site .txt {
  display: block;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 7px;
}

/* ------------------------------------
 SEOテキスト
-------------------------------------- */
.mod_prtxt {
  border: 3px solid #e2d7c5;
  box-sizing: border-box;
  clear: both;
  margin: 50px auto 0;
  overflow: hidden;
  padding: 0 20px;
  width: 850px;
}

.mod_prtxt p {
  color: #666;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}

/* ---------------------------------------
 ページトップへ
 ---------------------------------------- */
#btn_pagetop {
  display: none;
  width: 90px;
  height: 70px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  z-index: 100;

  background: url(/search/image/dtl_new/bg_pagetop_btn.png) no-repeat 0 0;
  -webkit-transition: background 200ms linear;
  -moz-transition: background 200ms linear;
  -ms-transition: background 200ms linear;
  transition: background 200ms linear;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

#btn_pagetop:hover {
  background-position: 0 -50px;
}

/* バナー追加 */
.leisure_banner_list {
  margin: 0 auto 30px;
  position: relative;
  width: 750px;
}

.leisure_banner_list .list_site {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 25px auto;
  margin-right: auto;
  width: 640px;
}

.leisure_banner_list .list_site li {
  width: 300px;
}

.leisure_banner_list .list_site li .cap {
  display: block;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 7px;
}