@charset "UTF-8";
/* ======================================
    vars（変数）
======================================== */
/* ======================================
    mixin（ミックスイン）
======================================== */
/* ======================================
    base（ベース）
======================================== */
html {
  width: 100%;
  height: auto;
  font-size: 62.5%;
  -webkit-font-feature-settings: "pwid" 1;
  font-feature-settings: "pwid" 1;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
  -webkit-text-size-adjust: 100%; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*IE11でsvgが崩れる対策*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; } }

img {
  max-width: 100%;
  vertical-align: middle; }

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  width: 100%; }

.pc {
  display: block; }
  @media screen and (max-width: 950px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 950px) {
    .sp {
      display: block; } }

.wrapper {
  background: #fff; }

.container {
  width: 100%;
  margin: 0 auto;
  text-align: center; }

.whiteBtn {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 24px 6px;
  font-weight: bold;
  opacity: 1;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  transition: 0.5s all; }

.pgn25 {
  padding: 25px; }

/* ======================================
    components（コンポーネント）
======================================== */
.header {
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 10; }
  .header__inner {
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 27px; }
    @media screen and (max-width: 950px) {
      .header__inner {
        max-width: 100%; } }
  .header__sitelogo {
    position: relative; }
    .header__sitelogo a {
      opacity: 1;
      -webkit-transition: 0.5s all;
      -o-transition: 0.5s all;
      transition: 0.5s all; }
      .header__sitelogo a:hover {
        opacity: .5; }
    .header__sitelogo img {
      width: 77px;
      margin: 18px 0; }
  .header__sitename {
    text-align: center; }
    @media screen and (max-width: 950px) {
      .header__sitename {
        margin: 18px 0; } }
    .header__sitename a {
      opacity: 1;
      -webkit-transition: 0.5s all;
      -o-transition: 0.5s all;
      transition: 0.5s all; }
      .header__sitename a:hover {
        opacity: .5; }
    .header__sitename .sp-logo {
      display: none; }
      @media screen and (max-width: 950px) {
        .header__sitename .sp-logo {
          display: inline-block;
          width: 70px; } }
  .header__sitename2 {
    text-align: center;
    background: #f6f6f6;
    width: 100%;
    max-width: 1360px; }
    @media screen and (max-width: 950px) {
      .header__sitename2 {
        max-width: 100%; } }
    .header__sitename2 .logo {
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      letter-spacing: 0.35em; }
      @media screen and (max-width: 950px) {
        .header__sitename2 .logo {
          font-size: 12px;
          letter-spacing: 0.2em; } }
      .header__sitename2 .logo img {
        padding: 10px 25px; }

.content {
  max-width: 980px;
  margin: 50px auto; }
  @media screen and (max-width: 950px) {
    .content {
      width: 90%;
      margin: 50px auto; } }
  .content__title {
    line-height: 2em; }
    .content__title br {
      display: block; }
      @media screen and (max-width: 950px) {
        .content__title br {
          display: none; } }
  .content__news {
    font-size: 14px;
    margin: 0 auto;
    text-align: left;
    width: 80%; }
    @media screen and (max-width: 950px) {
      .content__news {
        width: 100%; } }
    .content__news ul {
      margin: 20px 0; }
    .content__news li {
      margin: 0 0 10px 0; }
    .content__news .date {
      padding: 0 20px 0 0;
      font-size: 14px;
      font-weight: 600;
      color: #8a8a8a; }

.rakuri {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url(/plan/house/assets/img/common/bg_rakuri.jpg) repeat;
  padding: 20px 0;
  margin: 0 auto;
  max-width: 980px; }
  .rakuri__innner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 95%;
    margin: 0 auto; }
    @media screen and (max-width: 950px) {
      .rakuri__innner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; } }
  .rakuri__rightera {
    width: 50%;
    padding: 0px; }
    .rakuri__rightera img {
      margin: 10px 0 10px 0; }
    @media screen and (max-width: 950px) {
      .rakuri__rightera {
        width: 100%; } }
  .rakuri__leftera {
    width: 50%;
    padding-left: 10px; }
    @media screen and (max-width: 950px) {
      .rakuri__leftera {
        padding: 0px;
        width: 100%; } }
  .rakuri__leftera_tate {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    @media screen and (max-width: 950px) {
      .rakuri__leftera_tate {
        width: 100%;
        text-align: center; } }
    .rakuri__leftera_tate li {
      margin-top: 10px;
      position: relative;
      margin: 0x 20px 0 0; }
      .rakuri__leftera_tate li::before {
        top: 5px;
        left: -17px;
        color: #959394;
        font-size: 10px;
        padding-right: 10px;
        content: '\f054';
        font-family: "Font Awesome 5 Free";
        font-weight: 900; }
    .rakuri__leftera_tate a {
      opacity: 1;
      -webkit-transition: 0.5s all;
      -o-transition: 0.5s all;
      transition: 0.5s all; }
      .rakuri__leftera_tate a:hover {
        opacity: .5; }
  .rakuri__leftera_innner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: left;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 70px 0 40px 0; }
    .rakuri__leftera_innner img.rakurilogo {
      height: 46px; }
      @media screen and (max-width: 950px) {
        .rakuri__leftera_innner img.rakurilogo {
          width: 202px;
          margin: 0 auto; } }
    @media screen and (max-width: 950px) {
      .rakuri__leftera_innner {
        margin: 20px 0 20px 0;
        width: 100%;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        .rakuri__leftera_innner img {
          margin: 20px 0 0 0; } }
  .rakuri__loginerea {
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media screen and (max-width: 950px) {
      .rakuri__loginerea {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; } }
    .rakuri__loginerea .rakuriBtn {
      font-size: 16px;
      width: 210px;
      margin: 0 auto; }
      .rakuri__loginerea .rakuriBtn a:hover {
        -webkit-box-shadow: 0 0 0 10px #90c31f inset;
        box-shadow: 0 0 0 10px #90c31f inset; }
      @media screen and (max-width: 950px) {
        .rakuri__loginerea .rakuriBtn {
          width: 80%;
          margin: 10px auto; } }
  .rakuri__loginerea2 {
    text-align: left;
    padding: 25px 50px; }
    @media screen and (max-width: 950px) {
      .rakuri__loginerea2 {
        text-align: center; } }
    .rakuri__loginerea2 p {
      font-weight: 600;
      font-size: 14px; }
    .rakuri__loginerea2 ul {
      font-size: 16px;
      margin-top: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      @media screen and (max-width: 950px) {
        .rakuri__loginerea2 ul {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column; } }
    .rakuri__loginerea2 li {
      margin-right: 20px;
      font-weight: 600;
      position: relative;
      margin: 0x 20px 0 0; }
      .rakuri__loginerea2 li::before {
        top: 5px;
        left: -17px;
        color: #959394;
        font-size: 10px;
        padding-right: 10px;
        content: '\f054';
        font-family: "Font Awesome 5 Free";
        font-weight: 900; }
      .rakuri__loginerea2 li a {
        opacity: 1;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        transition: 0.5s all; }
        .rakuri__loginerea2 li a:hover {
          opacity: .5; }
  .rakuri__dousaErea {
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .rakuri__dousaErea small; }
    @media screen and (max-width: 950px) {
      .rakuri__dousaErea {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center; } }
    .rakuri__dousaErea .dousaTxt {
      color: #322000;
      font-size: 12px;
      font-weight: 600;
      padding-right: 20px; }
      @media screen and (max-width: 950px) {
        .rakuri__dousaErea .dousaTxt {
          padding: 0 0 10px 0; } }

.bunnerErea {
  width: 100%;
  padding: 40px 0; }
  .bunnerErea ul {
    max-width: 980px;
    margin: 0px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .bunnerErea ul a:hover {
      opacity: 1;
      -webkit-transition: 0.5s all;
      -o-transition: 0.5s all;
      transition: 0.5s all; }
      .bunnerErea ul a:hover:hover {
        opacity: .5; }
    @media screen and (max-width: 950px) {
      .bunnerErea ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        .bunnerErea ul li {
          margin-bottom: 20px; } }
  .bunnerErea__title {
    text-align: center;
    font-weight: normal;
    margin-bottom: 45px;
    color: #000; }
    .bunnerErea__title .en {
      font-size: 12px;
      margin-bottom: 20px; }
    .bunnerErea__title .ja {
      font-size: 18px;
      letter-spacing: 0.35em;
      font-variant: 900; }

.footer {
  width: 100%;
  background: #f0f0f0;
  padding: 27px; }
  .footer__inner {
    max-width: 980px;
    margin: 0 auto; }
    @media screen and (max-width: 950px) {
      .footer__inner {
        width: 100%; } }
  .footer__nav {
    margin-bottom: 27px; }
    @media screen and (max-width: 950px) {
      .footer__nav {
        margin-bottom: 21px; } }
  .footer__navList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-weight: bold;
    font-size: 13px; }
    @media screen and (max-width: 950px) {
      .footer__navList {
        font-size: 11px; } }
    .footer__navList > li {
      position: relative;
      margin: 0 24px 0 18px; }
      @media screen and (max-width: 950px) {
        .footer__navList > li {
          margin-bottom: 6px; } }
      .footer__navList > li::before {
        position: absolute;
        top: 5px;
        left: -17px;
        color: #959394;
        font-size: 10px;
        content: '\f054';
        font-family: "Font Awesome 5 Free";
        font-weight: 900; }
        @media screen and (max-width: 950px) {
          .footer__navList > li::before {
            top: 3px; } }
      .footer__navList > li a {
        opacity: 1;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        transition: 0.5s all; }
        .footer__navList > li a:hover {
          opacity: .5; }
  .footer__sitename {
    margin-bottom: 6px; }
    .footer__sitename a {
      opacity: 1;
      -webkit-transition: 0.5s all;
      -o-transition: 0.5s all;
      transition: 0.5s all; }
      .footer__sitename a:hover {
        opacity: .5; }
  .footer__copyright {
    font-size: 11px; }