@charset "UTF-8";
/* Variable */
/* ------------------------------------------------------ */
/* line-height  */
/* ------------------------------------------------------ */
/*===========================

top page

===========================*/
#home .kv {
  width: 100%;
  padding: 0;
}
#home .kv .recent-work {
  display: none;
}
#home .kv .slider-container {
  height: 75vw;
  border-radius: 0;
}
#home .kv .slider-container .slider .slick-slide {
  position: relative;
}
#home .kv .slider-container .slider .slick-slide img {
  display: block;
  height: 75vw;
  width: auto;
}
#home .kv .slider-container .slider .slick-list.draggable {
  width: 100vw;
  border-radius: 0px;
}
#home .kv .lead-text {
  width: calc(100% - 20px);
  font-size: 4.6vw;
  top: 50%;
  left: 0px;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
#home .kv .lead-text span {
  line-height: 1.5em;
}
#home .kv .lead-text span:first-child {
  padding: 0.25em 0.25em 0 0.5em;
}
#home .kv .lead-text span:last-child {
  padding: 0 0.25em 0.25em 0.5em;
}
#home .headline {
  align-items: end;
}
#home .ilst[data-type=star] {
  right: 110px;
  top: -105px;
}
#home .ilst[data-type=owl] {
  right: 78px;
  top: -63px;
}
#home .ilst[data-type=tree01] {
  right: 10px;
  top: -95px;
}
#home .ilst[data-type=bird] {
  right: 0px;
  top: -80px;
  transform: rotate(20deg);
}
#home .ilst[data-type=house] {
  display: none;
}
#home .ilst[data-type=tree02] {
  left: auto;
  top: -155px;
  right: -10px;
}
#home .ilst[data-type=snow] {
  left: auto;
  top: -170px;
  right: 5px;
}
#home .philos .inner {
  background-color: #FFF;
  border-radius: 20px;
  padding: 20px;
}
#home .philos .inner li .text-box .title {
  font-size: 2rem;
}
#home .philos .inner li + li {
  margin-top: 5px;
}
#home .philos .inner a {
  width: 100%;
  min-width: auto;
  padding: 0px !important;
  margin-top: 10px;
}
#home .philos .btn {
  margin-top: 20px;
}
#home .philos .ilst[data-type=tool] {
  display: none;
}
#home .flow .inner .text {
  text-align: left;
  letter-spacing: 0;
}
#home .flow .inner .btn-bg {
  width: 100%;
}
#home .flow .inner .btn-bg a {
  width: 100%;
  min-width: auto;
}
#home .works li {
  width: 100%;
  height: auto;
  padding: 20px 20px 50px 20px;
}
#home .works li:nth-child(n+2) {
  margin-left: 0;
}
#home .works li:nth-child(n+2) {
  margin-top: 0px;
}
#home .works li + li {
  margin-top: 20px !important;
}
#home .works li .img-box {
  width: 100%;
  max-width: none;
}
#home .works li .text-box .name {
  font-size: 4vw;
  font-weight: bold;
}
#home .works li .text-box .date {
  font-size: 3vw;
}
#home .works li .text-box .room {
  right: 20px;
  left: auto;
}
#home .works li.first {
  height: auto;
}
#home .works li.first .img-box {
  width: 100%;
  max-width: none;
  height: calc(100vw - 20px);
}
#home .works li.first .text-box {
  width: calc(100% - 20px);
  padding: 10px 10px 30px;
  left: 10px;
  bottom: 10px;
}
#home .works li.first .text-box .name {
  font-size: 4vw;
  margin: 5px 0 15px;
}
#home .works li.first .text-box .date {
  font-size: 3.5vw;
  line-height: 1;
  bottom: 15px;
}
#home .works li.first .text-box .room {
  font-size: 3.5vw;
  line-height: 1;
  bottom: 15px;
}
#home .voices li + li {
  margin-top: 20px;
}
#home .voices li .img-box {
  width: 100%;
  height: calc((100vw - 20px) * 0.625);
}
#home .voices li .text-box .ttl {
  font-size: 4vw;
  font-weight: bold;
}
#home .voices li .text-box .name {
  font-size: 3.5vw;
  margin: 10px 0 20px;
  position: relative;
}
#home .news.wrap {
  padding: 50px 20px;
  background-color: #FFF;
}
#home .news.wrap ul {
  gap: 0;
}
#home .news.wrap ul li + li {
  margin-top: 20px;
}
#home .news.wrap ul li .img-box {
  width: 100%;
  height: calc((100vw - 20px) * 0.625);
}
#home .news.wrap ul li .text-box {
  margin-top: 10px;
  width: 100%;
}
#home .news.wrap ul li .text-box .date-cat {
  margin-bottom: 10px;
}
#home .news.wrap ul li .text-box .title {
  font-size: 4vw;
  font-weight: bold;
}
#home .co-open-house::after {
  content: "";
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 0px;
  height: 0px;
}
#home .co-btm-btn {
  margin-top: 0px !important;
}

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

philos

===========================*/
#philos .msg-ilst {
  display: none;
}
#philos .message {
  height: auto;
  padding: 82vw 0 0;
  background-image: url("../images/philos/illust.png");
  background-repeat: no-repeat;
  background-size: 115vw;
  background-position: center -6vw;
}
#philos .message .text-box {
  width: 100%;
  display: block;
}
#philos .message .text-box h3 {
  display: block;
  text-align: justify;
  margin-bottom: 15px;
}
#philos .message .text-box h3 img {
  display: none;
}
#philos .message .text-box h3::before {
  content: "楽しいときも、悲しいときも。";
  display: table;
  font-size: 5.64vw;
  border-bottom: 5px solid #ED6A5A;
  line-height: 1;
  padding-bottom: 5px;
  margin-bottom: 15px;
}
#philos .message .text-box h3::after {
  content: "暮らしを包む、お家づくり。";
  display: table;
  font-size: 5.64vw;
  border-bottom: 5px solid #ED6A5A;
  line-height: 1;
  padding-bottom: 5px;
}
#philos .message .text-box .text p {
  font-size: 4vw;
  text-shadow: none;
  width: 100%;
}
#philos .message .text-box .text p + p {
  margin-top: 1em;
}
#philos .message .ilst[data-type=tree02] {
  display: none;
}
#philos .message .ilst[data-type=tree04] {
  top: -7vw;
  right: -8px;
  width: 15vw;
  bottom: auto;
}
#philos .philos-lead {
  padding: 50px 0 0;
}
#philos .philos-lead .img-box {
  position: initial;
  width: calc(100vw - 32px);
  border-radius: 10px;
  height: calc(100vw - 32px);
  background-size: cover;
  background-position: center center;
  margin: 0px auto;
}
#philos .philos-lead .img-box img {
  width: 100%;
}
#philos .philos-lead .text-box {
  width: 100%;
  padding-top: 20px;
  display: block;
}
#philos .philos-lead .text-box h2 {
  margin-bottom: 4vw;
}
#philos .philos-lead .text-box h2 .en {
  font-size: 6.15vw;
  margin-bottom: 0.5em;
}
#philos .philos-lead .text-box h2 .jp {
  font-size: 4vw;
  width: calc(100vw - 20px - 10vw);
}
#philos .philos-lead .text-box h3 {
  width: 100%;
  font-size: 3.5vw;
  line-height: 1em;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 4vw;
}
#philos .philos-lead .text-box h3 + .ilst[data-type=owl] {
  top: -16.28vw;
  width: 10vw;
}
#philos .philos-lead .text-box .text {
  width: 100%;
}
#philos .philos-lead .text-box .text p {
  line-height: 1.8;
}
#philos .philos-lead .text-box .text p + p {
  margin-top: 1em;
}
#philos .points .alt-li.img-stt li:nth-child(2n),
#philos .points .alt-li.img-stt li:nth-child(2n-1) {
  flex-direction: column !important;
}
#philos .points .alt-li li .img-box {
  width: 100%;
  height: calc((100vw - 20px) * 0.625);
}
#philos .points .alt-li li .text-box {
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
}
#philos .points .alt-li li .text-box h4 {
  margin: 4vw 0 3vw;
}
#philos .points .alt-li li .text-box h4 .point {
  font-size: 5.1vw;
  margin-bottom: 0.3em;
}
#philos .points .alt-li li .text-box h4 .point + span {
  font-size: 6.15vw;
}
#philos .points .alt-li li + li {
  margin-top: 40px;
}
#philos .points .ilst[data-type=star-flower] {
  top: -10vw;
  left: 0px;
  width: 20vw;
}

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

flow

===========================*/
#flow .flow-step ul li,
#flow .alt-li.txt-stt li:nth-child(2n-1) {
  flex-direction: column-reverse !important;
}
#flow .flow-step ul li .img-box, #flow .flow-step ul li .img-box * {
  display: block;
  width: 100%;
}
#flow .flow-step ul li .img-box {
  overflow: hidden;
  margin: 20px 0;
  align-items: center;
  display: flex;
}
#flow .flow-step ul li .img-box img {
  width: 90%;
  height: auto;
  margin: 0 auto;
}
#flow .flow-step ul li .img-box.sp-only {
  display: flex;
}
#flow .flow-step ul li .img-box.pc-only {
  display: none;
}
#flow .flow-step ul li .text-box {
  width: 100%;
}
#flow .flow-step ul li .text-box .step-num {
  font-size: 5.1vw;
  margin-bottom: 0.8em;
  color: #FFF;
  background-color: #A68B8E;
  display: block;
  padding: 16px;
  border-radius: 8px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1;
}
#flow .flow-step ul li .text-box h4 {
  font-size: 6.15vw;
  color: #510A11;
  margin-bottom: 1rem;
  line-height: 1.4em;
}
#flow .flow-step ul li .text-box h4::before {
  margin-top: -0.2em;
}
#flow .flow-step ul li .text-box h4::after {
  margin-top: -0.116em;
}
#flow .flow-step ul li .text-box p {
  line-height: 1.8;
}
#flow .flow-step ul li + li {
  margin-top: 20px;
}
#flow .maintenance .m-group .img-box {
  width: 100%;
  height: calc(100vw - 20px);
}
#flow .maintenance .m-group .text-box {
  width: 100%;
  margin-left: 0px;
}
#flow .maintenance .m-group .text-box h4 {
  font-size: 6.15vw;
  text-align: left;
  margin: 1.6rem 0 1rem;
}
#flow .maintenance .m-group .text-box h4 + p {
  margin-top: 0;
}
#flow .maintenance .m-group + .m-group {
  margin-top: 30px;
}
#flow .maintenance .m-group + .m-group h2 {
  margin: 0 0 10px;
}
#flow .maintenance .m-group dl {
  margin-top: 10px;
}
#flow .maintenance .m-group dl dt {
  margin-top: 15px;
  font-size: 5.64vw;
}
#flow .maintenance .m-group dl dt div .num {
  width: 7.7vw;
  line-height: 7.7vw;
  border-radius: 3.85vw;
  font-size: 5.64vw;
  margin-right: 1rem;
}
#flow .maintenance .m-group dl dd {
  margin-top: 10px;
}
#flow .maintenance .m-group table th {
  width: 100%;
}
#flow .maintenance + .co-btm-btn {
  margin-top: 50px;
}

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

works

===========================*/
#works .works-list {
  margin-top: 30px;
}
#works .works-list ul li {
  width: 100%;
  height: auto;
  padding: 20px;
}
#works .works-list ul li:nth-child(n+2) {
  margin-left: 0;
}
#works .works-list ul li:nth-child(n+2) {
  margin-top: 0px;
}
#works .works-list ul li + li {
  margin-top: 20px !important;
}
#works .works-list ul li .img-box {
  width: 100%;
  max-width: none;
}
#works .works-list ul li .text-box .name {
  font-size: 4vw;
}
#works .works-list ul li .text-box .date {
  position: absolute;
  bottom: 35px;
  margin: 0px;
}
#works .works-list ul li .text-box .room {
  bottom: 15px;
}
#works .works-list ul:nth-child(n+2) {
  margin-left: 0px;
}
#works .works-list + nav + .co-open-house {
  margin-top: 50px !important;
}
#works .works-list + .co-btm-btn {
  margin-top: 50px;
}
#works .works-img {
  margin-top: 10px !important;
}
#works .text-container {
  margin-top: 20px !important;
  width: calc(100% - 32px);
}
#works .text-container h3 {
  font-size: 4.6vw;
  padding: 0;
  border-bottom: 3px solid #ED6A5A;
  border-left: 0;
  line-height: 1.6;
  padding-bottom: 0.5em;
}
#works .text-container * + h3, #works .text-container * + p {
  margin-top: 1em;
}
#works .co-open-house {
  margin-top: 50px !important;
}

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

voices

===========================*/
#voices .voices-list {
  margin-top: 30px;
}
#voices .voices-list ul li + li {
  margin-top: 20px;
}
#voices .voices-list ul li .img-box {
  width: 100%;
  height: calc((100vw - 40px) * 0.625);
}
#voices .voices-list ul li .text-box .ttl {
  font-size: 4vw;
  font-weight: bold;
}
#voices .voices-list ul li .text-box .name {
  font-size: 3.5vw;
  margin: 10px 0 20px;
  position: relative;
}
#voices .voices-list ul li:nth-child(n+2) {
  margin-left: 0px;
}
#voices .voices-list + nav + .co-open-house {
  margin-top: 50px !important;
}
#voices .voices-article {
  margin-top: 10px !important;
}
#voices .voices-article .img-container {
  flex-direction: row;
}
#voices .voices-article .one .img-box {
  height: calc((100vw - 40px) * 0.625);
}
#voices .voices-article .two .img-box {
  width: calc((100vw - 40px) / 2 - 5px);
  height: calc((100vw - 40px) / 2 * 0.75);
}
#voices .voices-article .two .img-box + .img-box {
  margin-left: 0px;
}
#voices .voices-article .three .img-box {
  width: calc((100vw - 40px) / 3 - 5px);
  height: calc((100vw - 40px) / 3 * 0.75);
}
#voices .voices-article .three .img-box + .img-box {
  margin-left: 0px;
}
#voices .voices-article .img-container + .img-container {
  margin-top: 10px;
}
#voices .voices-article h3 {
  font-size: 4.6vw;
  padding: 0;
  border-bottom: 3px solid #ED6A5A;
  border-left: 0;
  line-height: 1.6;
  padding-bottom: 0.5em;
}
#voices .voices-article * + h3,
#voices .voices-article * + p {
  margin-top: 1em;
}
#voices .co-open-house {
  margin-top: 50px !important;
}

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

news

===========================*/
#news .news-list {
  margin-top: 30px;
}
#news .news-list .text-box .date-cat {
  margin-bottom: 10px;
}
#news .news-list ul {
  gap: 0;
}
#news .news-list ul li + li {
  margin-top: 20px;
}
#news .news-list ul li .img-box {
  width: 100%;
  height: calc((100vw - 40px) * 0.625);
}
#news .news-list ul li .text-box {
  width: 100%;
  margin-top: 10px;
}
#news .news-list ul li .text-box .title {
  font-size: 4vw;
}
#news .news-list + nav + .co-open-house {
  margin-top: 50px !important;
}
#news .detail-hgroup h1 {
  margin-top: 0.5em;
  line-height: 1.4;
}
#news .detail-hgroup .date-cat-group {
  width: calc(100vw - 40px);
  margin: 0 auto;
}
#news .detail-hgroup .date-cat-group .date {
  font-size: 4.6vw;
  margin: 0 0 20px;
}
#news .detail-hgroup .date-cat-group .date::before {
  width: 30px;
}
#news .detail-hgroup .date-cat-group .cat {
  font-size: 3.5vw;
  padding: 5px;
}
#news .news-article {
  margin-top: 20px !important;
}
#news .news-article h1, #news .news-article h2, #news .news-article h3, #news .news-article h4, #news .news-article h5, #news .news-article h6 {
  line-height: 1.6em;
}
#news .news-article * + h1, #news .news-article * + h2, #news .news-article * + h3, #news .news-article * + h4, #news .news-article * + p {
  margin-top: 1em;
}
#news .news-article h1 {
  font-size: 5.64vw;
}
#news .news-article h2 {
  font-size: 5.1vw;
}
#news .news-article h3 {
  font-size: 4.6vw;
}
#news .news-article h4 {
  font-size: 4vw;
}

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

open house

===========================*/
#openhouse .no-openhouse img {
  width: 75vw;
}
#openhouse .openhouse-container {
  padding: 0px;
}
#openhouse .openhouse-container .no-openhouse {
  padding: 0 20px;
}
#openhouse .openhouse-container .ttl, #openhouse .openhouse-container .slider-container, #openhouse .openhouse-container .btn-group {
  width: calc(100vw - 40px);
  margin: 0 10px;
}
#openhouse .openhouse-container .ttl .date {
  font-size: 5.1vw;
  margin-bottom: 5px;
}
#openhouse .openhouse-container .ttl h2 {
  font-size: 7.17vw;
  line-height: 1.4;
}
#openhouse .openhouse-container table {
  display: block;
  width: calc(100vw - 40px);
  margin: 20px 10px 0 10px;
}
#openhouse .openhouse-container table tr {
  display: block;
}
#openhouse .openhouse-container table th, #openhouse .openhouse-container table td {
  display: block;
  width: 100%;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
}
#openhouse .openhouse-container table th {
  border-radius: 10px 10px 0 0;
}
#openhouse .openhouse-container table td {
  border-radius: 0 0 10px 10px;
}
#openhouse .openhouse-container table tr + tr {
  margin-top: 10px;
}
#openhouse .openhouse-container .btn {
  margin: 30px 0 0;
  width: 100%;
  min-width: auto;
}
#openhouse .openhouse-container .co-btm-btn {
  margin-top: 50px;
}
#openhouse .btn + p .tel {
  margin-top: 5px;
  margin-left: 0px;
}
#openhouse .btn + p .tel img {
  width: 50vw;
}

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

company

===========================*/
#company .company-container table th,
#company .greeting-container table th {
  width: 100%;
}
#company .greeting-container .img-box {
  width: 100%;
}
#company .greeting-container .text-box {
  width: 100%;
  margin-left: 0px;
  margin-top: 16px;
}
#company .greeting-container h3 {
  font-size: 4.6vw;
  color: #FFF;
  background-color: #A68B8E;
  padding: 8px 16px;
  margin: 1em 0 20px;
  border-radius: 8px;
}
#company .greeting-container table th {
  padding: 0px 0px 5px 0;
  background-color: transparent;
  color: #070303;
  border-bottom: 1px solid #070303;
  padding-left: 0px;
  line-height: 1;
}
#company .greeting-container table td {
  padding: 0px 0px 20px 0;
  background-color: transparent;
  line-height: 1.6;
}
#company .greeting-container table tr:last-child td {
  padding: 0px 0px 0px 0;
}

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

contact

===========================*/
#contact table .required th {
  width: 100%;
}
#contact .btn-group {
  margin-top: 30px;
  margin-bottom: 50px;
}
#contact .name input, #contact .kana input, #contact .mail input {
  width: 100%;
}
#contact .tel input {
  width: calc((100% - 7.6vw) / 3);
}
#contact .birth input,
#contact .birth span + input {
  width: calc((100% - 17.7vw) / 3);
}
#contact .birth input + span {
  margin: 0px;
}

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

pp

===========================*/
#pp .pp-container {
  font-size: 4vw;
  padding-bottom: 50px;
}
#pp .pp-container table th {
  width: 100%;
}