/*! ========================================================================
===========================================================================

	home.css
	---------------------------
	Last Modified: 2024/04/09 17:42:11

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

.mainVisualBlock .mainVisual {width: 100%;text-align: center;background: #c7ece7;}
.mainVisualBlock .mainVisual figure {width: 100%;padding: 2% 0 5%;margin: 0 auto;position:relative;}
.mainVisualBlock .mainVisual figure figcaption  {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.mainVisualBlock .mainVisual figure figcaption h1 {color: #4d4d4d;font-family: "Noto Sans JP", sans-serif;font-size: 120%;font-weight: 700;}
.mainVisualBlock .mainVisual h2 {margin: -20px auto 5%;position: relative;z-index: 0;font-family: "Noto Sans JP", sans-serif;font-size: 120%;font-weight: 500;letter-spacing: 0.2em;line-height: 1;}
.mainVisualBlock .mainVisual h2 span {margin: 0 auto 1%;padding: 0.5% 5%;display: table;background: #fff;}
.mainVisualBlock .mainVisual h3 {width: 100%;padding: 5% 0;line-height: 0;background: linear-gradient(to right, #fab200, #feeab9, #fab200);}
.mainVisualBlock .mainVisual h3 span img {width: 95%;}
.mainVisualBlock .mainVisual h3 picture {margin: 4% auto 0;display: block;}
.mainVisualBlock .mainVisual h3 picture img {width: 70%;}
.mainVisualBlock .mainVisual h4 {width: 100%;padding: 6% 0;display: block;background: #fafaeb;font-size: 80%;font-weight: 500;letter-spacing: 0.1em;line-height: 2.2;}
@media(min-width: 701px){
.mainVisualBlock .mainVisual figure {width: 80%;max-width: 1100px;top: 55%;}
.mainVisualBlock .mainVisual figure figcaption h1 {font-size: 250%;}
.mainVisualBlock .mainVisual h2 {margin: -120px auto 3%;font-size: 260%;}
.mainVisualBlock .mainVisual h3 {padding: 2% 0;}
.mainVisualBlock .mainVisual h3 span img {width: 60%;max-width: 660px;}
.mainVisualBlock .mainVisual h3 picture {margin: 1% auto 0;}
.mainVisualBlock .mainVisual h3 picture img {width: 80%;max-width: 1000px;}
.mainVisualBlock .mainVisual h4 {padding: 4% 0;font-size: 150%;}
}

.introBlock {padding: 5% 0 2%;}
.introBlock ol {text-align: center;line-height: 0;}
.introBlock ol {display: flex;flex-wrap: wrap;justify-content: space-between;}
.introBlock ol li {width: 100%;margin: 0 0 5%;padding: 0 5%;position: relative;box-sizing: border-box;}
.introBlock ol li::before {content: "";width: 3px;height: 100%;position: absolute;left: 0;top: 0;display: block;background: linear-gradient(to bottom, #fab200, #feeab9, #fab200);}
.introBlock ol li::after {content: "";width: 3px;height: 100%;position: absolute;right: 0;top: 0;display: block;background: linear-gradient(to bottom, #fab200, #feeab9, #fab200);}
.introBlock ol li img {height: 45px;}
.introBlock ol li:nth-child(2) img {height: 60px;}
.introBlock ol li:nth-child(3) img {height: 50px;}
@media(min-width: 701px){
.introBlock ol li {width: 48%;margin: 0 0 2%;}
.introBlock ol li:nth-child(odd)::after {display: none;}
.introBlock ol li img {height: 80px;}
.introBlock ol li:nth-child(2) img {height: 110px;}
.introBlock ol li:nth-child(3) img {height: 90px;}
}

.basicBlock {padding: 10% 0;background: #fafaeb}
.basicBlock h2 {margin: 0 auto 5%;text-align: center;color: #fab200;font-size: 170%;font-weight: 600;line-height: 1.3}
.basicBlock h2 small {display: block;color: #000;font-size: 70%;font-weight: 400;letter-spacing: 0.1em;}
.basicBlock figure {width: 100%;margin: auto;line-height: 0;}
.basicBlock figure figcaption {margin: 5% auto 0;line-height: 1.5;}
.basicBlock figure figcaption dl {margin: auto;display: flex;flex-wrap: wrap;}
.basicBlock figure figcaption dl dt {width: 30%;padding: 1% 0;border-bottom: 2px dotted #ccc;box-sizing: border-box;}
.basicBlock figure figcaption dl dd {width: 70%;padding: 1% 0;border-bottom: 2px dotted #ccc;box-sizing: border-box;}
@media(min-width: 701px){
.basicBlock {padding: 5% 0;}
.basicBlock h2 {margin: 0 auto 2%;font-size: 260%}
.basicBlock h2 small {font-size: 60%;}
.basicBlock figure {width: 80%;}
.basicBlock figure figcaption dl dt {padding: 1% 0 1% 20%;}
.basicBlock figure figcaption dl dd {padding: 1% 0 1% 10%;}
}

.priceBlock {padding: 10% 0;}
.priceBlock h2 {margin: 0 auto 5%;text-align: center;color: #fab200;font-size: 170%;font-weight: 600;line-height: 1.3}
.priceBlock h2 small {display: block;color: #000;font-size: 70%;font-weight: 400;letter-spacing: 0.1em;}
.priceBlock ul {display: flex;flex-wrap: wrap;text-align: center;}
.priceBlock ul li {width: 33.33333%;box-sizing: border-box;}
.priceBlock ul.head {margin: 4% auto 2%;}
.priceBlock ul.head li {padding: 10px 0;background: #feeab9;}
.priceBlock ul.body li {padding: 10px 0 13px;border-bottom: 1px dotted #555;}
@media(min-width: 701px){
.priceBlock {padding: 5% 0;font-size: 16px;}
.priceBlock h2 {margin: 0 auto 2%;font-size: 260%}
.priceBlock h2 small {font-size: 60%;}
}

.accessBlock {width: 100%;padding: 10% 0;background: #fafaeb}
.accessBlock h2 {margin: 0 auto 5%;text-align: center;color: #fab200;font-size: 170%;font-weight: 600;line-height: 1.3}
.accessBlock h2 small {display: block;color: #000;font-size: 70%;font-weight: 400;letter-spacing: 0.1em;}
.accessBlock h3 {margin: 5% auto 2%;text-align: center;font-weight: 500;letter-spacing: 0.1em;line-height: 1.3}
.accessBlock h3 + figure {margin: 0 auto 8%;text-align: center;}
.accessBlock h3 + figure img {width: 100%;max-width: 1100px;}
.accessBlock ul {max-width: 1100px;margin: auto;display: flex;flex-wrap: wrap;}
.accessBlock ul li {width: calc(100%/2);box-sizing: border-box;}
.accessBlock ul li figure {position: relative;}
.accessBlock ul li figure figcaption {}
.accessBlock ul li figure figcaption p.district {position: absolute;top: 5%;left: 5%;color: #fff;font-size: 120%;font-weight: 700;text-shadow: 0 0 5px rgba(0, 113, 188, 1);}
.accessBlock ul li figure figcaption p.train {position: absolute;bottom: 10%;left: 5%;line-height: 0;}
.accessBlock ul li figure figcaption p.train img {width: 90%;}
@media(min-width: 701px){
.accessBlock {padding: 5% 0;}
.accessBlock h2 {margin: 0 auto 2%;font-size: 260%}
.accessBlock h2 small {font-size: 60%;}
.accessBlock h3 {font-size: 200%;}
.accessBlock h3 + figure {margin: 0 auto 3%;}
.accessBlock ul li {width: calc(100%/4);}
.accessBlock ul li figure figcaption p.district {font-size: 160%;}
.accessBlock ul li figure figcaption p.train {left: 8%;}
}

.locationBlock {padding: 10% 0;}
.locationBlock h2 {margin: 0 auto 5%;text-align: center;color: #fab200;font-size: 170%;font-weight: 600;line-height: 1.3}
.locationBlock h2 small {display: block;color: #000;font-size: 70%;font-weight: 400;letter-spacing: 0.1em;}
.locationBlock h3 {margin: 4% auto 2%;text-align: center;font-weight: 500;letter-spacing: 0.1em;line-height: 1.3}
.locationBlock figure {width: 100%;height: 200px;margin: 0 0 3%;position: relative;border: 3px solid #eee;}
.locationBlock figure figcaption {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.locationBlock ul {display: flex;flex-wrap: wrap;text-align: center;}
.locationBlock ul li img {width: 100%;margin: 0 0 2%;line-height: 0;}
.locationBlock ul li p {font-size: 80%;letter-spacing: -0.05em;}
.locationBlock ul li p strong {margin: 0;display: block;font-weight: 500;}
.locationBlock ul li p small {margin: 0;display: block;font-size: 90%;}
.locationBlock ul:nth-of-type(1) li, .locationBlock ul:nth-of-type(2) li {width: calc(50% - 1%);margin: 0 2% 5% 0;box-sizing: border-box;}
.locationBlock ul:nth-of-type(1) li:nth-child(even), .locationBlock ul:nth-of-type(2) li:nth-child(even) {margin: 0 0 5%;}
.locationBlock ul:nth-of-type(1) li {line-height: 1.2;}
.locationBlock ul:nth-of-type(1) li small {margin: 0;display: inline-block;font-size: 10px;}
.locationBlock ul:nth-of-type(1) li span {font-size: 24px;}
.sp {display: inherit;}
@media(min-width: 701px){
.locationBlock {padding: 5% 0;}
.locationBlock h2 {margin: 0 auto 2%;font-size: 260%}
.locationBlock h2 small {font-size: 60%;}
.locationBlock h3 {font-size: 200%;}
.locationBlock figure {height: 300px;}
.locationBlock ul:nth-of-type(2) li {width: calc(33.33333% - 1.5%);margin: 0 2.5% 4% 0;}
.locationBlock ul:nth-of-type(2) li:nth-child(even) {margin: 0 2% 4% 0}
.locationBlock ul:nth-of-type(2) li:nth-child(3n) {margin: 0 0 4%;}
.locationBlock ul li p {font-size: 110%;}
.locationBlock ul:nth-of-type(1) li small {font-size: 90%;}
.locationBlock ul:nth-of-type(1) li span {font-size: 50px;}
.locationBlock ul:nth-of-type(2) + p {margin: -20px 0 0;}
.sp {display: none;}
}

.photoBlock {padding: 0 0 10%;}
.photoBlock h2 {margin: 0 auto 2%;text-align: center;font-size: 160%;font-weight: 700;letter-spacing: 0.1em;}
.photoBlock h2 small {display: block;font-size: 70%;font-weight: 400;line-height: 1.3}
.photoBlock h3 {margin: 5% auto 2%;padding: 3% 0 2%;text-align: center;background: #be9461;color: #fff;font-size: 80%;font-weight: 700;line-height: 0;}
.photoBlock h3 small {margin: 0 0 0 1%;display: inline-block;font-size: 80%;font-weight: 400;}
.photoBlock figure {width: 100%;margin: 0 0 3%;line-height: 0;}
.photoBlock figure figcaption {margin: 10px 0 0;font-size: 80%;}
.photoBlock ul.photo-main + p {margin: 1% auto 0;text-align: center;}
.photoBlock ul.photo-thumb {width: 80%;margin: 0 auto 1%;display: flex;flex-wrap: wrap;justify-content: center;text-align: center;}
.photoBlock ul.photo-thumb li {width: 20%;height: 100%;margin: 0 0.5%;position: relative;cursor: pointer;overflow: hidden;}
.photoBlock ul.photo-thumb li.current::after {content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: block;opacity: 0.5;background: #000;}
@media(min-width: 701px){
.photoBlock {padding: 0 0 5%;}
.photoBlock h2 {margin: 0 auto 2%;font-size: 200%;line-height: 1.5}
.photoBlock h2 small {font-size: 40%;}
.photoBlock h3 {padding: 2% 0;font-size: 150%;}
.photoBlock figure figcaption {margin: 20px 0 0;}
.photoBlock ul.photo-thumb {width: 30%;}
}

.mapBlock {width: 100%;padding: 10% 0;background: #fafaeb}
.mapBlock h2 {margin: 0 auto 4%;text-align: center;color: #fab200;font-size: 160%;font-weight: 700;letter-spacing: 0.1em;line-height: 1.3}
.mapBlock figure {width: 90%;max-width: 1000px;margin: auto;text-align: center;}
.mapBlock figure + p {width: 80%;margin: 5% auto 0;text-align: center;}
.mapBlock figure + p a {display: block;padding: 15px 0;background: #be9461;color: #fff;text-decoration:none;}
.mapBlock iframe {width: 100%;height: 300px;}
@media(min-width: 701px){
.mapBlock {padding: 5% 0;}
.mapBlock h2 {font-size: 250%;line-height: 1.5}
.mapBlock iframe {height: 500px;}
.mapBlock figure {width: 100%;}
.mapBlock figure+ p {width: 30%;margin: 2% auto 0;}
}

.house_makerBlock {padding: 70px 0 30px}
.house_makerBlock h2 {margin: 0 auto 5%;text-align: center;color: #fab200;font-size: 170%;font-weight: 600;line-height: 1.3}
.house_makerBlock h2 small {display: block;color: #000;font-size: 70%;font-weight: 400;letter-spacing: 0.1em;}
.house_makerBlock h2 + p {margin: 3% auto 50px;display: block;text-align: center;font-weight: 400;}
.house_makerBlock ul {width: 100%;margin: 0 auto;display: flex;display: -webkit-flex;display: -ms-flexbox;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center}
.house_makerBlock ul li {margin-left: 30px;width: 300px;border: 1px solid #999;background-color: #fff}
.house_makerBlock ul li:nth-child(3n+1) {margin-left: 0}
.house_makerBlock ul li:nth-child(n+4) {margin-top: 30px}
.house_makerBlock ul li .box {padding: 20px 20px 0;text-align: center}
.house_makerBlock ul li .box h3 {width: 100%;margin: 0 auto 10px;line-height: 0}
.house_makerBlock ul li .box h4 {width: 100%;line-height: 0}
.house_makerBlock ul li .box h4 img {margin: 0 auto}
.house_makerBlock ul li .box figure {width: 100%;line-height: 0}
.house_makerBlock ul li .box img {display: block}
.house_makerBlock ul li > a {position: relative;display: flex;display: -webkit-flex;display: -ms-flexbox;-webkit-box-align: center;align-items: center;-ms-flex-align: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: 3em;text-align: center;line-height: 1.4;text-decoration: none;border-bottom: 1px solid #ccc;background-color: #fff;transition: background .2s 0s;color: #555}
.house_makerBlock ul li > div + a {border-top: 1px solid #ccc}
.house_makerBlock ul li > a:hover {transition: background .2s .2s}
.house_makerBlock ul li > p {position: relative;display: flex;display: -webkit-flex;display: -ms-flexbox;-webkit-box-align: center;align-items: center;-ms-flex-align: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding-bottom: .2em;height: 7em;text-align: center}
.house_makerBlock ul li > p span { padding: .2em 0; width: 90%; text-align: center; font-size: 200%; line-height: .8}
.house_makerBlock ul li > p span i, .house_makerBlock ul li > p span b {display: inline-block;vertical-align: middle}
.house_makerBlock ul li > p span i {margin-right: .2em}
.house_makerBlock ul li > p span i img {display: block;max-height: 24px;width: auto;height: 1em}
.house_makerBlock ul li > p span u {display: block; text-decoration: none;font-size: 45%; line-height: 1}
.house_makerBlock .exl {width: 15px;height: 10px;position: absolute;top: 40%;right: 1em;opacity: .8;background: url("../../common/img/icon_external_link2.svg") no-repeat center/cover}
.house_makerBlock ul li.toyotanagoya p {background-color: #96AACD;}
.house_makerBlock ul li.sumitomo p {background-color: #CED7A5;}
.house_makerBlock ul + p {margin: 8% auto 0;}
@media(max-width:1070px) {
 .house_makerBlock ul {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;max-width: 630px}
 .house_makerBlock ul li, .house_makerBlock ul li:nth-child(3n+1) {margin-left: 0}
 .house_makerBlock ul li:nth-child(n+3) {margin-top: 30px}
}
@media(max-width:768px) {
 .house_makerBlock ul li {width: calc(50% - .5em)}
 .house_makerBlock ul li:nth-child(n+3) {margin-top: 1em}
 .house_makerBlock ul li .box {padding: 1.25em .8em 0}
 .house_makerBlock ul li .box h3 {margin-bottom: 1.25em}
 .house_makerBlock ul li > a {font-size: 100%;height: 2.6em}
 .house_makerBlock ul li > a.l {height: 5.2em}
 .house_makerBlock ul li > p {height: 7.5em}
 .house_makerBlock ul li > p span {margin: 0 auto;font-size: 170%}
}
@media(max-width:640px) {
 .house_makerBlock ul li .box h3 {max-width: 320px}
 .house_makerBlock ul {max-width: 400px}
 .house_makerBlock ul li {width: 100%}
 .house_makerBlock ul li:nth-child(n+2) {margin-top: 1.5em}
 .house_makerBlock ul li > a.l {height: 2.6em}
 .house_makerBlock ul li > a br {display: none}
 .house_makerBlock ul li > p {display: block;padding: .4em 1em .6em; height: auto}
 .house_makerBlock ul li > p span {display: block;font-size: 200%}
}
@media(min-width: 701px){
.house_makerBlock h2 {margin: 0 auto 2%;font-size: 260%}
.house_makerBlock h2 small {font-size: 60%;}
.house_makerBlock h2 + p {font-size: 160%}
}