@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%;}
html, body { height: 100%; width: 100%;}

body { font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: normal; font-size: 1.2rem; line-height: 1.8em; color: #333; position: relative;}

a:link { color: #1d2088; text-decoration: underline;}
a:visited { color: #816698;}
a:hover { color: #00479d;}
a:active { color: #1d2088;}

.clearfix:after { content: ""; display: block; clear: both;}
.clearfix:before { content: ""; display: block; clear: both;}
.clearfix { display: block;}

img.align_center { margin-left: auto; margin-right: auto;}

img.img_align_left { float: left; margin-right: 20px;}
img.img_align_center { margin-left: auto; margin-right: auto;}
img.img_align_right { float: right; margin-left: 20px;}

/* pc版クリアランス */
.cl_120 { margin-bottom: 120px}
.cl_100 { margin-bottom: 100px;}
.cl_80 { margin-bottom: 80px;}
.cl_60 { margin-bottom: 60px;}
.cl_50 { margin-bottom: 50px;}
.cl_40 { margin-bottom: 40px;}
.cl_30 { margin-bottom: 30px;}
.cl_20 { margin-bottom: 20px;}
.cl_10 { margin-bottom: 10px;}


/* ラッパー */
.outer_wrapper { width: 1200px; margin: 0 auto; position: relative;}
.inner_wrapper { width: 1140px; margin: 0 auto;}
.yellow_bg_wrapper { width: 100%; padding: 60px 0; text-align: center; background: #fffada;}

/* 追随ボタン */
.fixed_btn_wrapper { width: 1200px; margin: 0 auto; position: relative;}
.fixed_btn { position: absolute; top: 10px; right: 10px; z-index: 1; transition: 0.5s all ease-out;}
.fixed_btn.scroll { position: sticky; width: 310px; height: auto; top: 10px; left: 90%;}

/* メインビジュアル */
#main_visual_wrapper { width: 1200px; height: 1650px; margin: 0 auto; position: relative;}
#main_visual_wrapper h1 { position: absolute; left: 0; top: 1240px;}

/* バランス */
.barance_wrapper { height: 910px; position: relative;}
.barance_wrapper h2 { display: inline-block; width: 858px; height: 324px; position: absolute; left: 0; bottom: 40px;}

/* ランキング */
.ranking_wrapper { width: 880px; margin-left: auto; margin-right: auto; margin-bottom: 80px; padding: 45px 0 45px 53px; background: #99dd5d; position: relative;}
.ranking_inner_wrapper { width: 787px; padding: 30px 62px 0 64px; background: url("../images/bg_note.png") repeat-y;}
.ranking_inner_wrapper ul { margin: 30px 0 0 0; padding: 0; list-style-type: none;}
.ranking_inner_wrapper ul li { width: 100%; display: inline-block; margin-bottom: 15px; vertical-align: top; position: relative;}
.ranking_inner_wrapper ul li a { display: block; position: absolute; top: 16px; right: 0; transition: 0.3s all ease-out;}
.ranking_inner_wrapper ul li a:hover { right: -10px;}

.rainking_btn { padding: 50px 0 0 65px}

.ranking_wrapper .deco_illust01 { position: absolute; bottom: 90px; right: -60px;}

/* もうひと押し */
.yellow_bg_wrapper img { margin-right: auto; margin-left: auto;}
.date_consultation { font-size: 3.0rem; line-height: 1.8em; font-weight: bold; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; text-align: center;}

/* 展示場マップ */
ul.map_list { margin: 0 0 50px 0; padding: 0; list-style-type: none;}
ul.map_list li { width: 1000px; margin: 0 auto 30px auto;}
ul.map_list li img { width: 100%; height: auto;}

/* フッター */
footer { padding-bottom: 40px;}

/* モーダル */
.modal_bg { display: block; height: 100vh; width: 100vw; background: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; z-index: -2; opacity: 0; transition: 0.3s all ease-in;}
.modal_bg.open { z-index: 1; opacity: 1;}

.modal_window { width: 800px; height: 460px; background: #fff; text-align: center !important; padding-top: 60px; margin: auto; z-index: -1; opacity: 0; transision: 0.5s all ease-in; position: absolute; bottom: 600px;}
.modal_window img { margin-right: auto; margin-left: auto;}
.modal_window.open { top: -30px; bottom: 0; left: 0; right: 0;; z-index: 2; opacity: 1; position: fixed;}

.btn_close_modal { position: absolute; top: -50px; right: 0; cursor: pointer;}

/* hoverアニメーション */
@keyframes push {
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.push {
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push:hover {
  animation-name: push;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.source{
    text-align: center;
    padding-top: 30px;
    padding-left: 190px;
}
.modal_window_house { width: 340px; height: 554px; text-align: center !important; margin: auto; z-index: -1; opacity: 0; transision: 0.5s all ease-in; position: absolute; bottom: 600px;}
.modal_window_houser img { margin-right: auto; margin-left: auto;}
.modal_window_house.open { top: -30px; bottom: 0; left: 0; right: 0;; z-index: 2; opacity: 1; position: fixed;}
.btn_close_modal_house { position: absolute; top: -50px; right: 0; cursor: pointer;}
.date_consultation{
    letter-spacing: 5px;
    font-size: 6rem;
}
.date_consultation .sat{
    color: #007cfb;
}
.date_consultation .sun{
    color: #f50000;
}