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

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
.block-index-01 ul {margin: 0;}
.block-index-01 ul li {margin: 0;position: relative;}
.block-index-01 ul li p {color: #fff;font-size: 312.5%;font-weight: bold;line-height: 1.3;text-align: right;margin: 0;position: absolute;right: 0.5em;bottom: 0.5em;opacity: 0.7;}
.block-index-01 ul li p::after {display: block;content: attr(data-title);font-size: 14px;font-weight: normal;letter-spacing: 0.2em;}
.block-index-02 {padding: 3em 0;}
.block-index-02 .container {width: 90%;max-width: 1100px;margin: 0 auto;}
.block-index-02 .container:nth-of-type(1) {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 3em;}
.block-index-02 .container:nth-of-type(1) div {width: 50%;}
.block-index-02 .container:nth-of-type(1) div h4 {color: var(--codate-color2);font-size: 156.25%;font-weight: bold;margin: 0;}
.block-index-02 .container:nth-of-type(1) div p:nth-of-type(1) {font-size: 87.5%;line-height: 1.7;margin-top: 2em;}
.block-index-02 .container:nth-of-type(1) div p:nth-of-type(1) strong {color: var(--codate-color2);}
.block-index-02 .container:nth-of-type(1) figure {width: 45%;}
.block-index-02 .container:nth-of-type(2) {margin-top: 1em;}
.block-index-03 {padding: 3em 0;overflow: hidden;}
.block-index-03 .container {width: 90%;max-width: 1100px;margin: 6em auto 0;position: relative;z-index: 1;}
.block-index-03 .container .bg {display: block;width: calc(100vw - 16em);height: 25em;box-shadow: 0 2px 13px rgba(72,72,72,0.1);position: absolute;}
.block-index-03 .container .bg-07,
.block-index-03 .container .bg-05,
.block-index-03 .container .bg-03,
.block-index-03 .container .bg-01 {background: linear-gradient(130deg, #eff2f6 0%, #e0e8f5 100%);left: calc(-1 * ((100vw - 16em - 1100px) / 2));transform: skewY(6.5deg);}
.block-index-03 .container .bg-06,
.block-index-03 .container .bg-04,
.block-index-03 .container .bg-02 {background: linear-gradient(130deg, #d5e4ec 0%, #e3edf2 100%);right: calc(-1 * ((100vw - 16em - 1100px) / 2));transform: skewY(-6.5deg);}
.block-index-03 .container .bg-01 {top: 0;z-index: -1;}
.block-index-03 .container .bg-02 {top: 29em;z-index: -2;}
.block-index-03 .container .bg-03 {top: 59em;z-index: -3;}
.block-index-03 .container .bg-04 {top: 89em;z-index: -4;}
.block-index-03 .container .bg-05 {top: 119em;z-index: -5;}
.block-index-03 .container .bg-06 {top: 149em;z-index: -6;}
.block-index-03 .container .bg-07 {top: 179em;z-index: -7;}
.block-index-03 .container ul {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.block-index-03 .container ul li {width: 46%;margin-bottom: 6em;border-radius: 0.4em;overflow: hidden;background: #fff;}
.block-index-03 .container ul li:nth-child(2n + 1) {margin-top: -11em;}
.block-index-03 .container ul li:last-child {margin-bottom: 0;}
.block-index-03 .container ul li.image {position: relative;}
.block-index-03 .container ul li.image::before {display: block;color: #fff;font-weight: bold;line-height: 2;text-align: center;white-space: pre-wrap;position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%,-50%);}
.block-index-03 .container ul li.image::after {display: block;content: '';width: 100%;height: 100%;background: var(--codate-color2);position: absolute;top: 0;left: 0;opacity: 0.6;}
.block-index-03 .container ul li.image.prologue::before {content: '家づくり、\Aここから始まる';}
.block-index-03 .container ul li.image.epilogue::before {content: 'ここまでやってこそ、\A家づくり';}
.block-index-03 .container ul li.image.prologue {margin-top: -3em;}
.block-index-03 .container ul li div {padding: 1em 1.5em 2em;position: relative;}
.block-index-03 .container ul li div h4 {display: inline-block;color: var(--codate-color2);font-size: 187.5%;font-weight: bold;padding: 0.1em 1em 0.1em 2.2em;border-radius: 0 0.4em 0 0;background: #fff;position: absolute;left: 0;bottom: 100%;}
.block-index-03 .container ul li div h4 span {display: block;color: #72aacf;font-size: 80%;text-align: center;line-height: 1;position: absolute;top: 0.52em;left: 0.8em;}
.block-index-03 .container ul li div h4 span small {display: block;font-size: 50%;line-height: 1;}
.block-index-03 .container ul li div p {font-size: 87.5%;line-height: 1.7;}
.block-index-03 .container ul li div a {width: 70%;margin: 1.5em auto 0;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1478px) {
  .block-index-03 .container .bg {width: calc(100vw - 16em);height: 25em;}
  .block-index-03 .container .bg-03,
  .block-index-03 .container .bg-01 {left: calc(-1 * ((100vw - 16em - 100%) / 2));}
  .block-index-03 .container .bg-04,
  .block-index-03 .container .bg-02 {right: calc(-1 * ((100vw - 16em - 100%) / 2));}
}
@media only screen and (max-width: 1450px) {
  .block-common-mv p {padding-bottom: 4em;}
  .nav-style-01 ul::before {display: none;}
  .nav-style-01 ul li a span {width: 14em;}
}
@media only screen and (min-width: 769px) and (max-width: 1450px) {
  .nav-style-01 {max-width: 32em !important;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {
  .block-index-03 .container .bg {width: 100vw;height: 25em;}
  .block-index-03 .container .bg-07,
  .block-index-03 .container .bg-05,
  .block-index-03 .container .bg-03,
  .block-index-03 .container .bg-01 {left: -5vw}
  .block-index-03 .container .bg-06,
  .block-index-03 .container .bg-04,
  .block-index-03 .container .bg-02 {right: -5vw}
}
@media only screen and (min-width: 769px) {
  .nav-style-01 {max-width: 570px;}
  .block-index-03 .container .bg-07,
  .block-index-03 .container .bg-06,
  .block-index-03 .container .bg-05 {display: none;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  .nav-style-01 ul::before {display: none;}
  .block-index-02 {padding: 2em 0;}
  .block-index-02 .container:nth-of-type(1) {margin-top: 2em;}
  .block-index-02 .container:nth-of-type(1) div {width: 100%;}
  .block-index-02 .container:nth-of-type(1) div h4 {font-size: 137.5%;}
  .block-index-02 .container:nth-of-type(1) div p:nth-of-type(1) {font-size: 100%;margin-top: 1em;}
  .block-index-02 .container:nth-of-type(1) figure {width: 100%;margin-top: 2em;}
  .block-index-02 .container:nth-of-type(2) {margin-top: 1.5em;}
  .block-index-01 ul li figure {height: 16em;}
  .block-index-01 ul li figure img {width: 100%;height: 100%;object-fit: cover;}
  .block-index-01 ul li.slide01 figure img {object-position: 15% center;}
  .block-index-01 ul li.slide02 figure img {object-position: 70% center;}
  .block-index-01 ul li.slide03 figure img {object-position: 30% center;}
  .block-index-01 ul li.slide04 figure img {object-position: 65% center;}
  .block-index-01 ul li.slide05 figure img {object-position: 80% center;}
  .block-index-01 ul li p {font-size: 200%;}
  .block-index-03 {padding: 2em 0;}
  .block-index-03 .container {margin-top: 3em;}
  .block-index-03 .container ul li {width: 85%;margin-top: 0 !important;margin-bottom: 3em;}
  .block-index-03 .container ul li:nth-child(even) {margin-left: auto;}
  .block-index-03 .container ul li.image::before {font-size: 112.5%;}
  .block-index-03 .container ul li div h4 {font-size: 150%;padding: 0.3em 0.7em 0.3em 2.8em;}
  .block-index-03 .container ul li div h4 span {font-size: 90%;}
  .block-index-03 .container ul li div h4 span small {font-size: 60%;}
  .block-index-03 .container ul li div p {font-size: 100%;}
  .block-index-03 .container .bg-07,
  .block-index-03 .container .bg-05,
  .block-index-03 .container .bg-03,
  .block-index-03 .container .bg-01 {transform: skewY(8deg);}
  .block-index-03 .container .bg-06,
  .block-index-03 .container .bg-04,
  .block-index-03 .container .bg-02 {transform: skewY(-8deg);}
  .block-index-03 .container .bg-02 {top: 25em;}
  .block-index-03 .container .bg-03 {top: 55em;}
  .block-index-03 .container .bg-04 {top: 85em;}
  .block-index-03 .container .bg-05 {top: 115em;}
  .block-index-03 .container .bg-06 {top: 145em;}
  .block-index-03 .container .bg-07 {top: 175em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}