@charset "UTF-8";
/*---------------------------------------------------

fonts

-----------------------------------------------------*/
/*icon moon*/
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?y93obb");
  src: url("../fonts/icomoon/icomoon.eot?y93obb#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?y93obb") format("truetype"), url("../fonts/icomoon/icomoon.woff?y93obb") format("woff"), url("../fonts/icomoon/icomoon.svg?y93obb#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-comic:before {
  content: "\e90b"; }

.icon-building:before {
  content: "\e90c"; }

.icon-calendar:before {
  content: "\e90d"; }

.icon-arrow-r:before {
  content: '\e900'; }

.icon-arrow-l:before {
  content: '\e901'; }

.icon-balloon:before {
  content: '\e902'; }

.icon-book:before {
  content: '\e903'; }

.icon-glass:before {
  content: '\e904'; }

.icon-mail:before {
  content: '\e905'; }

.icon-map:before {
  content: '\e906'; }

.icon-rank:before {
  content: '\e907'; }

.icon-tag:before {
  content: '\e908'; }

.icon-facebook:before {
  content: '\e909'; }

.icon-twitter:before {
  content: '\e90a'; }

/*Notosans*/
@font-face {
  font-family: 'Noto Sans Japanese';
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/notosans/NotoSansCJKjp-Thin.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/notosans/NotoSansCJKjp-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/notosans/NotoSansCJKjp-Thin.woff") format("woff"), url("../fonts/notosans/NotoSansCJKjp-Thin.ttf") format("truetype");
  /* Safari, Android, iOS */ }

@font-face {
  font-family: 'Noto Sans Japanese';
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/notosans/NotoSansCJKjp-Light.eot");
  src: url("../fonts/notosans/NotoSansCJKjp-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/notosans/NotoSansCJKjp-Light.woff") format("woff"), url("../fonts/notosans/NotoSansCJKjp-Light.ttf") format("truetype"); }

@font-face {
  font-family: 'Noto Sans Japanese';
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/notosans/NotoSansCJKjp-DemiLight.eot");
  src: url("../fonts/notosans/NotoSansCJKjp-DemiLight.eot?#iefix") format("embedded-opentype"), url("../fonts/notosans/NotoSansCJKjp-DemiLight.woff") format("woff"), url("../fonts/notosans/NotoSansCJKjp-DemiLight.ttf") format("truetype"); }

@font-face {
  font-family: 'Noto Sans Japanese';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/notosans/NotoSansCJKjp-Regular.eot");
  src: url("../fonts/notosans/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/notosans/NotoSansCJKjp-Regular.woff") format("woff"), url("../fonts/notosans/NotoSansCJKjp-Regular.ttf") format("truetype"); }

@font-face {
  font-family: 'Noto Sans Japanese';
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/notosans/NotoSansCJKjp-Medium.eot");
  src: url("../fonts/notosans/NotoSansCJKjp-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/notosans/NotoSansCJKjp-Medium.woff") format("woff"), url("../fonts/notosans/NotoSansCJKjp-Medium.ttf") format("truetype"); }

@font-face {
  font-family: 'Noto Sans Japanese';
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/notosans/NotoSansCJKjp-Bold.eot");
  src: url("../fonts/notosans/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/notosans/NotoSansCJKjp-Bold.woff") format("woff"), url("../fonts/notosans/NotoSansCJKjp-Bold.ttf") format("truetype"); }

/*---------------------------------------------------

base

-----------------------------------------------------*/
body {
  font-family: "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Lato", sans-serif;
  font-size: 14px;
  color: #32343c;
  background-color: #f5f2ef;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: auto; }

.clearfix {
  *zoom: 1; }

.clearfix:before,
.clearfix:after {
  display: table;
  content: ' '; }

.clearfix:after {
  clear: both; }

html {
  font-size: 62.5%; }

a {
  text-decoration: none;
  color: #333;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  outline: none; }

a:hover {
  color: #ce3022;
  text-decoration: none;
  -webkit-transition: 0.2s;
  transition: 0.2s; }

header {
  width: 100%;
  margin: 0 auto;
  background: #fff; }

header body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  line-height: 1;
  word-break: break-all; }

header div, header span, header object, header iframe, header h1, header h2, header h3, header h4, header h5, header h6, header p, header blockquote, header pre, header abbr, header address, header cite, header code, header del, header dfn, header em, header img, header ins, header kbd, header q, header samp, header small, header strong, header sub, header sup, header var, header b, header i, header dl, header dt, header dd, header ol, header ul, header li, header fieldset, header form, header label, header legend, header table, header caption, header tbody, header tfoot, header thead, header tr, header th, header td, header article, header aside, header canvas, header details, header figcaption, header figure, header footer, header header, header hgroup, header menu, header nav, header section, header summary, header time, header mark, header audio, header video, header input, header textarea {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

header img {
  vertical-align: bottom; }

header article, header aside, header details, header figcaption, header figure, header footer, header header, header menu, header nav, header section, header div, header address, header iframe, header canvas, header hr, header textarea {
  display: block;
  line-height: 1; }

header a, header label {
  cursor: pointer; }

header blockquote {
  padding: 0;
  margin: 0;
  display: block; }

header address, header em {
  font-style: normal; }

header {
  margin-bottom: 43px; }

header hr {
  border: 0;
  margin: 0;
  padding: 0; }

header ul, header ol, header li {
  list-style: none; }

header textarea {
  resize: vertical;
  overflow: hidden;
  -webkit-appearance: none;
  border: none; }

header input, header button, header select {
  vertical-align: middle;
  border-radius: 0px;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  -webkit-appearance: none; }

header table {
  border-collapse: collapse; }

header *:before,
header *:after {
  padding: 0;
  margin: 0;
  line-height: 1; }

header .container {
  width: 960px;
  margin: 0 auto;
  position: relative;
  padding-top: 15px; }

header .container .logo {
  width: 194px;
  margin: auto; }

.logo {
  overflow: hidden; }
  .logo a {
    display: block;
    width: 194px !important;
    margin: auto; }

header .container .info_bnr a img {
  -webkit-transition: 0.2s;
  transition: 0.2s; }

header .container .info_bnr a:hover img {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8; }

header .seo_txt {
  width: 960px;
  margin: 16px auto 40px; }

header .seo_txt p {
  color: #999;
  font-size: 11px;
  font-size: 1.1rem; }

header .site_description {
  color: #999;
  font-size: 10px;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 5px;
  line-height: 1.5; }

header #nav {
  clear: both;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 30px; }

header #nav .g_navi {
  clear: both;
  width: 960px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }

header #nav ul {
  box-sizing: border-box;
  overflow: hidden; }

header #nav ul li {
  float: left;
  box-sizing: border-box;
  position: relative; }

header #nav ul li.last a {
  padding-right: 0px; }

header #nav ul li.last a:after {
  background: none; }

header #nav ul li.last.current {
  border-right: none; }

header #nav ul li:first-child a {
  padding-left: 0px;
  width: 190px; }

header #nav ul li:nth-child(2) a {
  width: 190px; }

header #nav ul li:nth-child(3) a {
  width: 160px; }

header #nav ul li:nth-child(4) a {
  position: relative;
  width: 145px; }
  header #nav ul li:nth-child(4) a:before {
    content: '漫画でわかる';
    position: absolute;
    width: 100%;
    left: 0px;
    top: 7px;
    font-size: 12px;
    color: #ce3022; }

header #nav ul li:nth-child(5) a {
  width: 160px; }

header #nav ul li:last-child a {
  width: 115px; }

header #nav ul li:last-child a:before {
  content: '新築・中古';
  position: absolute;
  width: 100%;
  left: 6px;
  top: 7px;
  font-size: 12px;
  color: #ce3022; }

header #nav ul li a {
  text-decoration: none;
  font-weight: bold;
  color: #000;
  padding: 20px 10px;
  height: 70px;
  display: block;
  text-align: center;
  box-sizing: border-box;
  line-height: 20px;
  position: relative; }
  header #nav ul li a:after {
    content: "";
    width: 2px;
    height: 16px;
    display: inline-block;
    background: #e8e0d8;
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -8px; }
  header #nav ul li a span, header #nav ul li a strong {
    display: block !important; }
  header #nav ul li a strong {
    font-size: 14px;
    letter-spacing: 1px;
    color: #ce3022;
    font-weight: bold !important; }
  header #nav ul li a span {
    font-family: "Lato", sans-serif;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 100%;
    position: relative;
    top: 4px;
    padding: 1px 0px;
    -webkit-transition: background 0.3s,color 0.3s;
    transition: background 0.3s,color 0.3s; }
  header #nav ul li a:hover span {
    color: #fff;
    background: #ce3022; }

.header-info {
  position: absolute;
  right: 0px;
  bottom: 0px; }

.view_mode_switch {
  width: 100%; }

.view_mode_switch a {
  text-align: center;
  background: #fb8a94;
  padding: 4px 0px 40px 0;
  font-weight: bold;
  width: 100%;
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 4rem; }

.view_mode_switch a span {
  display: inline-block;
  width: 49px;
  height: 76px;
  position: relative;
  top: 21px !important;
  right: 20px;
  background: url(../images_v2/common/ico_sp.png) no-repeat; }

.view_mode_switch a:hover {
  color: #fff; }