@charset "UTF-8";
:root {
  --headerHeight: 100px;
  --flexMargin: 16px;
  --paddingSection: 80px; }
  @media screen and (max-width: 959px) {
    :root {
      --headerHeight: 80px;
      --flexMargin: 8px;
      --paddingSection: 40px; } }

/*========== トップページ ==========*/
.banner_shop:last-child {
  margin-bottom: 0; }

/*==========
メインビジュアル
==========*/
#mv {
  padding: 0 24px;
  height: 869px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  #mv::before {
    content: '';
    width: 100%;
    height: 100%;
    background: center/cover url("../img/index/index_mv_bg.jpg") no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2; }
  #mv::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; }
  @media screen and (max-width: 959px) {
    #mv {
      height: 480px; }
      #mv .img_area {
        max-width: 320px;
        padding-top: var(--headerHeight); } }

.index_area_label {
  font-weight: 500;
  background-color: #00aa83;
  color: #fff;
  text-align: center;
  padding: 1em 24px;
  line-height: 1; }
  .index_area_label .title {
    font-size: 2rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.5em; }
  .index_area_label .text {
    font-size: 1.5rem;
    letter-spacing: 0.2em; }
  @media screen and (max-width: 959px) {
    .index_area_label .title {
      font-size: 1.5rem; }
    .index_area_label .text {
      font-size: 1rem;
      line-height: 1.25; } }

/*==========
はじめてのリノベーションガイドはこちら
==========*/
#index_guide {
  color: #fff; }
  #index_guide .intro_area {
    background: center/cover url("../img/index/index_guide_bg.jpg") no-repeat;
    position: relative;
    z-index: 1; }
    #index_guide .intro_area::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #000;
      opacity: 0.45;
      z-index: -1; }
    #index_guide .intro_area .title_sub {
      font-size: 1.3125rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      margin-bottom: 0.5em; }
    #index_guide .intro_area .title {
      font-size: 3.75rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      margin-bottom: 0.25em; }
    #index_guide .intro_area .text {
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: 2.35; }
    #index_guide .intro_area .btn_01 {
      font-size: 1rem;
      max-width: 560px;
      justify-content: flex-start; }
      #index_guide .intro_area .btn_01::before {
        content: '';
        width: 40px;
        height: 40px;
        background: center/contain url("../img/common/icon_btn_buide.svg") no-repeat;
        margin-right: 1.5em;
        margin-left: 1em; }
    @media screen and (max-width: 959px) {
      #index_guide .intro_area .text_area {
        background-color: rgba(255, 255, 255, 0.9);
        color: #000;
        padding: 1em; }
      #index_guide .intro_area .title_sub {
        font-size: 1.125rem; }
      #index_guide .intro_area .title {
        font-size: 1.5rem; }
      #index_guide .intro_area .text {
        line-height: 1.75; }
      #index_guide .intro_area .btn_01 {
        padding: 0.25em;
        letter-spacing: 0; }
        #index_guide .intro_area .btn_01::before {
          width: 32px;
          height: 32px;
          margin-right: 0.5em;
          margin-left: 0.5em; }
        #index_guide .intro_area .btn_01 .text_yellow {
          width: 100%; } }
  #index_guide .flex {
    display: flex;
    flex-wrap: wrap; }
  #index_guide .btn_01 {
    margin-top: auto;
    margin-left: -10%; }
  @media screen and (max-width: 959px) {
    #index_guide .text_area {
      width: 100%;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto; }
    #index_guide .btn_01 {
      width: 100%;
      margin-top: 24px;
      margin-left: auto;
      margin-right: auto; } }

.list_guide_menu {
  color: #fff;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }
  .list_guide_menu a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 32px; }
  .list_guide_menu > * {
    width: calc((100% - (8px * 2)) / 3);
    position: relative;
    overflow: hidden; }
    .list_guide_menu > *::before {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2; }
    .list_guide_menu > *::after {
      content: '';
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.4;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1; }
    .list_guide_menu > *:nth-of-type(1)::before {
      background: center/cover url("../img/index/index_guide_menu_01.jpg") no-repeat; }
    .list_guide_menu > *:nth-of-type(2)::before {
      background: center/cover url("../img/index/index_guide_menu_02.jpg") no-repeat; }
    .list_guide_menu > *:nth-of-type(3)::before {
      background: center/cover url("../img/index/index_guide_menu_03.jpg") no-repeat; }
    @media screen and (min-width: 960px) {
      .list_guide_menu > *::before {
        transition: transform 0.5s; }
      .list_guide_menu > *:hover::before {
        transform: scale(1.05); } }
  .list_guide_menu .text_area {
    padding-top: 40%;
    margin-top: auto; }
  .list_guide_menu .title {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6666; }
  .list_guide_menu .text {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.1em; }
  @media screen and (max-width: 959px) {
    .list_guide_menu a {
      padding: 24px; }
    .list_guide_menu .title {
      font-size: 1.25em; }
    .list_guide_menu .text {
      font-size: 1rem; } }
  @media screen and (max-width: 639px) {
    .list_guide_menu a {
      padding: 16px 8px; }
    .list_guide_menu .text_area {
      padding-top: 10%; }
    .list_guide_menu .title {
      font-size: 1em;
      letter-spacing: 0;
      line-height: 1.5; }
    .list_guide_menu .text {
      font-size: 0.75rem;
      letter-spacing: 0; } }

/*==========
最新リフォーム&リノベイベント情報
==========*/
#index_event .btn_area {
  background-color: #004534; }

/*==========
モデルハウス&ショールーム
==========*/
#index_model {
  background-color: #004534; }
  #index_model .title_01 .ja,
  #index_model .title_01 .en {
    color: #fff; }
  @media screen and (max-width: 959px) {
    #index_model {
      padding-top: 80px; } }

/*==========
リノベーション施工事例
==========*/
#index_works {
  background-color: #efefef;
  color: #000;
  position: relative;
  z-index: 1; }
  #index_works::before, #index_works::after {
    content: '';
    width: 50%;
    height: 64px;
    position: absolute;
    top: 0;
    z-index: -1; }
  #index_works::before {
    left: 0;
    background: linear-gradient(to top left, rgba(255, 255, 255, 0) 50%, #fff 50.5%) no-repeat top left/100% 100%; }
  #index_works::after {
    right: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, #fff 50.5%) no-repeat top left/100% 100%; }
  #index_works .category_area .list_sharp {
    justify-content: center;
    font-weight: 500; }

.list_index_works {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: #000; }
  .list_index_works a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; }
  .list_index_works .title_before_after {
    font-size: 1.125rem;
    color: #c53727;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-left: 0.125em; }
  .list_index_works .thumb_area {
    display: flex;
    justify-content: center;
    gap: 8px;
    height: 300px; }
    .list_index_works .thumb_area img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .list_index_works .img_area {
    flex: 1; }
  .list_index_works .img_small {
    width: 40%;
    display: flex;
    flex-direction: column; }
    .list_index_works .img_small .title_before_after {
      margin-top: auto; }
    .list_index_works .img_small .img_area {
      max-height: 217px; }
  .list_index_works .img_big {
    width: 60%;
    display: flex;
    flex-direction: column; }
  .list_index_works .detail_area {
    display: none; }
  .list_index_works .title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px; }
  .list_index_works .text_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 16px; }
    .list_index_works .text_area::after {
      content: '';
      width: 32px;
      height: 32px;
      display: block;
      background: center/contain url("../img/index/btn_index_works.svg") no-repeat;
      margin-top: 16px;
      margin-left: auto; }
  .list_index_works .list_sharp {
    justify-content: flex-start;
    gap: 8px;
    font-weight: 500;
    margin-top: auto; }
    .list_index_works .list_sharp > * {
      padding: 0.325em 0.5em;
      background-color: #e6e6e6;
      border-radius: 20px; }
  .list_index_works > * {
    width: calc((100% - (24px * 2)) / 3);
    background-color: #fff; }
    .list_index_works > *:first-of-type {
      width: 100%;
      padding: 16px; }
      .list_index_works > *:first-of-type .text_area {
        padding: 8px; }
      .list_index_works > *:first-of-type .title {
        font-size: 2.25rem;
        margin-bottom: 16px; }
      .list_index_works > *:first-of-type .list_sharp > * {
        width: 25%;
        max-width: 280px;
        text-align: center;
        padding: 0.5em; }
      .list_index_works > *:first-of-type .thumb_area {
        height: 400px; }
      .list_index_works > *:first-of-type .img_small .img_area {
        max-height: none; }
  @media screen and (min-width: 960px) {
    .list_index_works a .text_area::after {
      transition: transform 0.5s; }
    .list_index_works a .img_area {
      overflow: hidden; }
      .list_index_works a .img_area > * {
        transition: transform 0.5s; }
    .list_index_works a:hover .text_area::after {
      transform: rotate(360deg); }
    .list_index_works a:hover .img_area > * {
      transform: scale(1.05); } }
  @media screen and (max-width: 959px) {
    .list_index_works {
      justify-content: center; }
      .list_index_works .list_sharp {
        font-size: 0.875rem; }
      .list_index_works .img_small,
      .list_index_works .img_big {
        position: relative; }
      .list_index_works .title_before_after {
        position: absolute;
        right: 0;
        bottom: -0.75em; }
      .list_index_works .thumb_area {
        flex-wrap: wrap;
        height: auto;
        margin-bottom: 1em; }
      .list_index_works .img_area {
        flex: 0 1 auto; }
      .list_index_works .img_small {
        width: calc((100% - (8px * 1)) / 2);
        order: 1; }
        .list_index_works .img_small .img_area {
          max-height: none; }
      .list_index_works .img_big {
        width: 100%;
        order: 0; }
      .list_index_works .detail_area {
        display: flex;
        flex-direction: column;
        font-size: 0.75rem;
        width: calc((100% - (8px * 1)) / 2);
        order: 3; }
        .list_index_works .detail_area dt {
          width: 40%; }
        .list_index_works .detail_area dd {
          width: 60%; }
        .list_index_works .detail_area dt,
        .list_index_works .detail_area dd {
          padding: 0.125em;
          display: flex;
          flex-direction: column;
          justify-content: center; }
          .list_index_works .detail_area dt .hidebox,
          .list_index_works .detail_area dd .hidebox {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
        .list_index_works .detail_area .dl_02 {
          height: 90%;
          margin-top: auto; }
      .list_index_works > * {
        padding: 8px;
        width: 100%;
        max-width: 320px; }
        .list_index_works > *:first-of-type {
          padding: 0px; }
          .list_index_works > *:first-of-type .title {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 8px; }
          .list_index_works > *:first-of-type .text_area {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 8px 16px; }
            .list_index_works > *:first-of-type .text_area::after {
              content: '';
              width: 32px;
              height: 32px;
              display: block;
              background: center/contain url("../img/index/btn_index_works.svg") no-repeat;
              margin-top: 16px;
              margin-left: auto; }
          .list_index_works > *:first-of-type .list_sharp {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: auto; }
            .list_index_works > *:first-of-type .list_sharp > * {
              width: auto;
              padding: 0.325em 0.5em;
              background-color: #e6e6e6;
              border-radius: 20px; }
          .list_index_works > *:first-of-type .thumb_area {
            height: auto; } }

/*==========
全面リノベーション&部分リフォーム
==========*/
/*==========
リノベーション現場ブログ
==========*/
.list_index_blog {
  display: flex;
  flex-wrap: wrap;
  gap: 32px; }
  .list_index_blog > * {
    width: calc((100% - (32px * 2)) / 3);
    position: relative;
    padding-bottom: 1em; }
    .list_index_blog > *::after {
      content: '';
      width: 100%;
      height: 5px;
      background-color: #e6e6e6;
      position: absolute;
      bottom: 0; }
    .list_index_blog > *:first-of-type::after {
      background-color: #00aa83; }
  .list_index_blog .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .list_index_blog time {
    font-size: 12px;
    letter-spacing: 0.05em;
    font-weight: 500; }
  .list_index_blog .title {
    font-size: 1.3125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.25; }
  @media screen and (max-width: 959px) {
    .list_index_blog {
      justify-content: center;
      gap: 24px; }
      .list_index_blog > * {
        width: 100%;
        max-width: 320px; }
      .list_index_blog .title {
        font-size: 1.125rem; } }

/*==========
住まいの3Dデザイン集
==========*/
#index_design {
  background: center/cover url("../img/index/index_design_bg.jpg") no-repeat; }
  #index_design .text_intro {
    font-weight: 500; }

/*==========
コラム
==========*/
#index_column {
  background: center/cover url("../img/index/index_column_bg.jpg") no-repeat; }
  #index_column .title_area {
    display: flex;
    justify-content: center; }

.list_column .item {
  width: 20vw;
  max-width: 320px;
  margin: 0 24px; }
.list_column .img_area {
  position: relative;
  width: 100%;
  padding-top: 66.7%; }
  .list_column .img_area img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; }
.list_column .title {
  font-size: 1.3125rem;
  margin-top: 0.25em;
  margin-bottom: 0.25em; }
.list_column time {
  font-size: 12px;
  letter-spacing: 0.05em; }
.list_column .text_area {
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column; }
.list_column a {
  display: block;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
  position: relative; }
  .list_column a::after {
    content: '';
    width: 24px;
    height: 24px;
    display: block;
    background: center/contain url("../img/common/icon_btn_arrow.svg") no-repeat;
    margin-top: 16px;
    margin-left: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: transform 0.5s; }
  @media screen and (min-width: 960px) {
    .list_column a::after {
      transition: transform 0.5s; }
    .list_column a .img_area {
      overflow: hidden; }
      .list_column a .img_area > * {
        transition: transform 0.5s; }
    .list_column a:hover::after {
      transform: rotate(360deg); }
    .list_column a:hover .img_area > * {
      transform: scale(1.05); } }
@media screen and (max-width: 1279px) {
  .list_column .item {
    width: 50vw; } }

/*==========
リノベ価格費用目安
==========*/
#index_price .text_intro {
  font-weight: 500; }

.list_index_price {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px; }
  .list_index_price .text_img_area {
    padding: 24px;
    height: 240px; }
    .list_index_price .text_img_area img {
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .list_index_price > * {
    width: calc((100% - (8px * 2)) / 2); }
    .list_index_price > *:nth-of-type(1) a::before {
      background: center/cover url("../img/index/index_price_04.jpg") no-repeat; }
    .list_index_price > *:nth-of-type(2) a::before {
      background: center/cover url("../img/index/index_price_05.jpg") no-repeat; }
    .list_index_price > *:nth-of-type(3) a::before {
      background: center/cover url("../img/index/index_price_06.jpg") no-repeat; }
    .list_index_price > *:nth-of-type(4) a::before {
      background: center/cover url("../img/index/index_price_06.jpg") no-repeat; }
  .list_index_price a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 20px;
    box-sizing: border-box; }
    .list_index_price a img {
      width: 50%; }
    .list_index_price a::before, .list_index_price a::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.5s; }
    .list_index_price a::before {
      z-index: -2; }
    .list_index_price a::after {
      background-color: #000;
      opacity: 0.45;
      z-index: -1; }
  @media screen and (min-width: 960px) {
    .list_index_price a:hover::after {
      opacity: 0.75; } }
  @media screen and (max-width: 959px) {
    .list_index_price {
      justify-content: center; }
      .list_index_price > * {
        width: 100%; }
        .list_index_price > *:nth-of-type(odd) a {
          flex-direction: row-reverse; }
        .list_index_price > * a {
          background: #00aa83;
          align-items: stretch;
          padding: 0; }
          .list_index_price > * a::before {
            position: static;
            width: 100%; }
          .list_index_price > * a::after {
            display: none; }
      .list_index_price .text_img_area {
        height: 120px; }
      .list_index_price a {
        overflow: hidden; }
        .list_index_price a img {
          width: 48%;
          padding: 20px;
          box-sizing: border-box; }
        .list_index_price a::before, .list_index_price a::after {
          flex: 1;
          transform: translate(0, -50%); }
        .list_index_price a::before {
          width: 52%;
          height: auto;
          transform: translateY(0); } }

/*==========
リノベについて
==========*/
#index_about {
  background: center top/100% auto url("../img/index/index_about_bg.jpg") no-repeat; }
  #index_about .logo_area {
    display: flex;
    justify-content: center; }
  #index_about .text_area {
    text-align: center; }
    #index_about .text_area .text {
      font-size: 1.125rem;
      letter-spacing: 0.1em;
      font-weight: 500;
      line-height: 2; }
  #index_about .menu_area {
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #fff; }
    #index_about .menu_area > * {
      flex: 1;
      height: 301px;
      position: relative;
      z-index: 1;
      overflow: hidden; }
      #index_about .menu_area > *::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -2;
        transition: transform 0.5s; }
      #index_about .menu_area > *::after {
        content: '';
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.3;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1; }
      @media screen and (min-width: 960px) {
        #index_about .menu_area > *:hover::before {
          transform: scale(1.05); }
        #index_about .menu_area > *:hover a::after {
          transform: rotate(360deg); } }
    #index_about .menu_area a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 40px;
      position: relative; }
      #index_about .menu_area a::after {
        content: '';
        width: 32px;
        height: 32px;
        display: block;
        background: center/contain url("../img/index/btn_index_works.svg") no-repeat;
        margin-top: 16px;
        margin-left: auto;
        position: absolute;
        right: 24px;
        bottom: 24px;
        transition: transform 0.5s; }
    #index_about .menu_area .title {
      font-size: 2em;
      font-weight: 700;
      letter-spacing: 0.1em; }
    #index_about .menu_area .text {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      margin-top: 0.75em; }
    #index_about .menu_area .company::before {
      background: center/cover url("../img/common/banner_company_bg.jpg") no-repeat; }
    #index_about .menu_area .staff::before {
      background: center/cover url("../img/common/banner_staff_bg.jpg") no-repeat; }
  @media screen and (max-width: 959px) {
    #index_about {
      background: center top/240% auto url("../img/index/index_about_bg.jpg") no-repeat; }
      #index_about .logo_area {
        margin-bottom: 24px; }
        #index_about .logo_area img {
          max-width: 180px; }
      #index_about .text_area {
        margin-top: 24px; }
        #index_about .text_area .text {
          font-size: 1rem;
          letter-spacing: 0;
          line-height: 1.5; }
      #index_about .menu_area {
        margin-top: 24px; }
        #index_about .menu_area > * {
          flex: 0 1 auto;
          width: 100%;
          height: 160px; }
        #index_about .menu_area a {
          padding: 1em 24px; }
          #index_about .menu_area a::after {
            width: 24px;
            height: 24px;
            right: 1em;
            bottom: 1em; }
        #index_about .menu_area .title {
          font-size: 1.5em; }
        #index_about .menu_area .text {
          font-size: 1.125rem;
          margin-top: 0.5em; } }

#index_mv {
  margin-top: 100px; }
  @media screen and (max-width: 959px) {
    #index_mv {
      margin-top: 80px; } }