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

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

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

.mainVisualBlock .mainVisual {width: 100%;height: auto;padding: 170vw 0 20vw;position:relative;overflow: hidden;background: #eeede4;}
.mainVisualBlock .mainVisual h1 {width: 80%;max-width: 800px;position: absolute;top: 50%;left: 50%;z-index: 2;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.mainVisualBlock .mainVisual h2 {position: absolute;top: 62%;left: 50%;z-index: 2;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-family: "Noto Sans JP", sans-serif;font-size: 120%;font-weight: 700;}
.mainVisualBlock .mainVisual h2 strong {font-size: 130%;}
.mainVisualBlock h3 {width: 100%;margin: auto;padding: 8% 0;display: block;text-align: center;background: #66bab0;color: #fff;font-size: 140%;font-weight: 700;line-height: 0;letter-spacing: 0.1em;}
@media(min-width: 701px){
.mainVisualBlock .mainVisual {height: 100vh;padding: 0;}
.mainVisualBlock .mainVisual h1 {width: 65%;}
.mainVisualBlock .mainVisual h2 {top: 75%;font-size: 220%;}
.mainVisualBlock .mainVisual h2 strong {font-size: 200%;}
.mainVisualBlock h3 {padding: 3% 0;font-size: 240%;}
}
@media(min-width: 1280px) and (max-width: 1366px){.mainVisualBlock .mainVisual h2 {top: 80%;}}

.introBlock {margin: 10% auto 0;}
.introBlock ol {margin: 0 auto 5%;display: flex;flex-wrap: wrap;justify-content: space-between;line-height: 0;}
.introBlock ol li {width: 100%;min-height: 50px;margin: 0 0 5%;position: relative;display: flex;justify-content: center;align-items: center;}
.introBlock ol li::before {content: "";width: 2px;height: 100%;position: absolute;left: 0;top: 0;display: block;background: #66bab0;}
.introBlock ol li::after {content: "";width: 2px;height: 100%;position: absolute;right: 0;top: 0;display: block;background: #66bab0;}
.introBlock ol li img {height: 45px;}
.introBlock ol li:nth-child(2) img {height: 20px;}
.introBlock figure {width: 100%;padding: 30% 0 0;position: relative;line-height: 0;}
.introBlock figure figcaption {padding: 8% 3% 5%;position: absolute;top: 20%;left: 50%;z-index: 2;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;background: rgba(255, 255, 255, 0.8);}
.introBlock figure figcaption h2 {margin: 0 auto 8%;color: #256b42;font-size: 120%;font-weight: 700;}
.introBlock figure figcaption p {font-size: 70%;line-height: 2;}
@media(min-width: 701px){
.introBlock {margin: 4% auto 0;}
.introBlock ol {margin: 0 auto;}
.introBlock ol li {width: 48%;min-height: auto;}
.introBlock ol li:nth-child(odd)::after {display: none;}
.introBlock ol li img {height: 80px;}
.introBlock ol li:nth-child(2) img {height: 35px;}
.introBlock figure {padding: 0;}
.introBlock figure figcaption {padding: 8% 5% 5%;top: 35%;}
.introBlock figure figcaption h2 {margin: 0 auto 10%;font-size: 240%;}
.introBlock figure figcaption p {font-size: 110%;}
}

/*
.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;font-size: 80%;}
.basicBlock figure figcaption dl dt {width: 30%;padding: 1% 0;border-bottom: 2px dotted #ccc;}
.basicBlock figure figcaption dl dd {width: 70%;padding: 1% 0;border-bottom: 2px dotted #ccc;}
@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 {font-size: 100%;}
.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;font-size: 80%;}
.priceBlock ul li {width: 40%;}
.priceBlock ul li:nth-child(3n+1) {width: 20%;}
.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%;}
.priceBlock ul {max-width: 1050px;margin: auto;font-size: 100%;}
}
*/

/*
.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);}
.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 8%;}
.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: 50%;font-weight: 400;letter-spacing: 0.1em;}
.locationBlock h3 {margin: 4% auto;text-align: center;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;}
.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;}

@media(min-width: 701px){
.locationBlock {padding: 5% 0;}
.locationBlock h2 {margin: 0 auto 2%;font-size: 260%}
.locationBlock h3 {font-size: 180%;}
.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;}
}

/*
.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;}
.mapBlock figure {width: 90%;max-width: 1000px;margin: auto;text-align: center;line-height: 0}
.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 7%;}
.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: 10% 0 8%}
.house_makerBlock h2 {margin: 0 auto 5%;text-align: center;color: #00426f;font-size: 170%;font-weight: 700;}
.house_makerBlock h2 + p {margin: 3% auto 5%;display: block;text-align: center;}
.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: 80%;margin: 5px auto;line-height: 0}
.house_makerBlock ul li .box figure {width: 100%;line-height: 0}
.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;height: 5em;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.toyotasmilelife p {background-color: #f4bea2;}
.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 {padding: 3% 0 5%;}
.house_makerBlock h2 {margin: 0 auto 2%;font-size: 260%}
.house_makerBlock h2 small {font-size: 60%;}
.house_makerBlock h2 + p {font-size: 160%}
}