@charset "utf-8";

#wrapper {
    background: url("../images/house/bg01.png") left top repeat-x;
    padding-top: 155px;
    padding-bottom: env(safe-area-inset-bottom);
}


@media screen and (max-width: 559px) {

#wrapper {
    background: url("../images/house/bg01.png") left top repeat-x;
    background-size: 100% 105.13vw;
    padding-top: 20.67vw;
}

}


@media screen and (orientation: landscape) {

html.is-mobile #wrapper {
    background: url("../images/house/bg01.png") left top repeat-x;
    background-size: 100% 105.13vw;
    padding-top: 20.67vw;
}

}


/*---------------------------------------------

header

---------------------------------------------*/

header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: url("../images/house/bg01.png") left top repeat-x;
    width: 100%;
}

header .head01 .logo01 img {
    width: 86.3833px;
    transition: 0.5s;
}

header.scroll .head01 .logo01 img {
    width: 57px;
}

header .head02 nav {
    width: 100%;
    position: relative;
}

header .head02 ul {
    justify-content: flex-start;
}

header .head02 li.btn {
    position: absolute;
    top: 1px;
    right: 0;
}



@media screen and (max-width: 559px) {

header {
    top: 0;
    left: 0;
    z-index: 100;
    background: url("../images/house/bg01.png") left top repeat-x;
    width: 100%;
    position: fixed;
}

header .head01 .logo01 {
    margin-right: 6.15vw;
}

header .head01 .logo01 img {
    width: 14.87vw;
}

.open header .head02 nav {
	background: #FFE100 url("../images/house/bg01.png") left top repeat-y;
}

.open header .head02 li.btn {
    position: static;
}


}

@media screen and (orientation: landscape) {

html.is-mobile header {
    top: 0;
    left: 0;
    z-index: 100;
    background: url("../images/house/bg01.png") left top repeat-x;
    width: 100%;
    position: fixed;
}

html.is-mobile header .head01 .logo01 {
    margin-right: 6.15vw;
}

html.is-mobile header .head01 .logo01 img {
    width: 14.87vw;
}

html.is-mobile.open header .head02 nav {
	background: #FFE100 url("../images/house/bg01.png") left top repeat-y;
}

html.is-mobile.open header .head02 li.btn {
    position: static;
}
}


/*---------------------------------------------

mainContainer

---------------------------------------------*/

#mainContainer {
    width: 1120px;
    margin: 0 auto;
    overflow: inherit;
    display: flow-root;
}

/*leftArea*/

#leftArea01 ul li a,
#leftArea02 ul li a {
    position: relative;
}

#leftArea01 ul li a .iconBox,
#leftArea02 ul li a .iconBox {
    position: absolute;
    top: -4px;
    left: -6px;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
}

#leftArea01 ul li a .iconBox img,
#leftArea02 ul li a .iconBox img {
    width: 35px;
    height: auto;
    object-fit: fill;
    border-radius: 0;
    transition: all 0s ease-in 0s;
    margin-left: 2px
}

#leftArea01 ul li a:hover .iconBox img,
#leftArea02 ul li a:hover .iconBox img {
    transform: scale(1,1);
}

#leftArea01 ul li a .iconBox img.empty,
#leftArea02 ul li a .iconBox img.empty {
    margin: 0 0 0 auto;
}

#leftArea01 ul li dl {
    display: flex;
    flex-direction: column;
}

#leftArea01 ul li dl dt {
    order: 2;
    margin: 10px 0 0;
}

#leftArea01 ul li dl dd {
    order: 1;
    align-items: flex-end;
    margin-top: 10px
}

#leftArea01 ul li dd span.price,
#leftArea02 ul li dd span.price {
    font-size: 3.0rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    transition: 0.5s;
    line-height: 1.0;
}

#leftArea01 ul li dd span.price small,
#leftArea02 ul li dd span.price small {
    font-size: 1.5rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    transition: 0.5s;
}

#leftArea01 ul li a:hover dd,
#leftArea02 ul li a:hover dd,
#leftArea01 ul li a:hover dd span,
#leftArea02 ul li a:hover dd span,
#leftArea01 ul li a:hover dd span small,
#leftArea02 ul li a:hover dd span small {
    color: #FFA700;
}


.house .titleArea {
    position: relative;
    margin-bottom: 35px;
}

.house .titleArea .iconBox {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.house .titleArea .iconBox img {
    width: 35px;
    height: auto;
    object-fit: fill;
    border-radius: 0;
    margin-right: 5px
}

.house .titleArea .iconBox img.empty {
    margin: 0 0 0 20px;
}

.house .titleArea h1 {
    font-size: 2.8rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    line-height: 1.2;
    margin-bottom: 10px;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.house .titleArea p.txt01 {
    display: flex;
    align-items: flex-end;
}

.house .titleArea p.txt01 .price {
    font-size: 6.0rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    line-height: 1.0;
    border-right: 2px solid #000;
    padding-right: 20px;
    margin-right: 20px;
}

.house .titleArea p.txt01 .price small {
    font-size: 2.5rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
}

.house .titleArea p.txt01 .city {
    font-size: 2.5rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
}

.house .titleArea p.txt01 .fudosan {
    font-size: 1.4rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    margin: 0 0 5px 30px
}

.house .titleArea p.txt01 .fudosan a {
    text-decoration: underline;
}


.house .titleArea .sns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
}

.house .titleArea .sns li {
    margin-left: 10px;
}

.house .titleArea .sns li img {
    height: 16px;
}

.house .mainimg {
    margin-bottom: 50px;
}

.house .mainimg .img {
    margin-bottom: 20px;
}

.house .mainimg .img img{
    width: 765px;
    height: 490px;
    border-radius: 5px;
    object-fit: cover;
}

.house .mainimg .thumbnail img {
    width: 150px;
    height: 110px;
    object-fit: cover;
    transition: opacity .3s linear;
}

.house .mainimg .thumbnail img:hover {
    opacity: 0.7;
}

.slick-prev {
    margin-top: -10px;
    left: 0;
    width: 30px;
    height: 110px;
    background: rgba(0,0,0,0.3);
    z-index: 10;
}

.slick-prev::before {
    content: '←';
    font-weight: bold;
}

.slick-next {
    margin-top: -10px;
    right: 3px;
    width: 30px;
    height: 110px;
    background: rgba(0,0,0,0.3);
}

.slick-next::before {
    content: '→';
    font-weight: bold;
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  color: #fff;
  outline: none;
  background: rgba(0,0,0,0.3);
}

.detail {
    padding: 15px 0 40px;
}

.detail h3 {
    font-size: 2.0rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
}

.detail th {
    width: 170px;
    box-sizing: border-box;
    font-size: 1.3rem;
    font-family: "AvenirNextLTPro-Medium","FOT-筑紫ゴシック Pro B";
    background: rgba(191,221,198,0.3);
    padding: 5px 15px;
    text-align: left;
    border-left: none;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.detail td {
    font-size: 1.3rem;
    font-family: "AvenirNextLTPro-Regular","FOT-筑紫ゴシック Pr5 R";
    border-right: none;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.map {
    margin-bottom: 40px;
}

.map .btn01 {
    margin-top: 10px;
}

.map .btn01 a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFEFEF;
    width: 210px;
    height: 36px;
    border-radius: 18px;
    text-decoration: none;
    font-size: 1.2rem;
    font-family: "FOT-筑紫ゴシック Pro B";
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 3px;
    -webkit-transition: background-color .9s cubic-bezier(.4,0,0,1);
    transition: background-color .9s cubic-bezier(.4,0,0,1);
}

.map .btn01 a img {
    margin-left: 5px;
}

.map .btn01 a:hover {
    background: #FFE100;
}

.realtor {
    background: #F5F5F5;
    padding: 30px 60px 30px 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.realtor .left {
    width: 300px;
}


.realtor .tits {
    font-size: 1.5rem;
    font-family: "FOT-筑紫ゴシック Pro B";
    margin-bottom: 20px;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.realtor dl {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.realtor dl dt {
    font-size: 1.3rem;
    font-family: "FOT-筑紫ゴシック Pro B";
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    width: 50px;
}

.realtor dl dd {
    font-size: 1.3rem;
    font-family: "AvenirNextLTPro-Regular","FOT-筑紫ゴシック Pr5 R";
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    width: 250px;
    padding-top: 3px;
}

.realtor .right {
    width: 350px;
    text-align: right;
}

.realtor .right a.submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 75px;
    border-radius: 37px;
    font-size: 1.8rem;
    font-family: "FOT-筑紫ゴシック Pro B";
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #82AA42;
    -webkit-transition: background-color .9s cubic-bezier(.4,0,0,1);
    transition: background-color .9s cubic-bezier(.4,0,0,1);
}

.realtor .right a.submit:hover {
    background: #768B1F;
}

.realtor .right a.company {
    display: inline-block;
    margin-top: 50px;
    font-size: 1.4rem;
    font-family: "FOT-筑紫ゴシック Pro B";
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    line-height: 1.4;
}


/*#rightArea*/

#rightArea .banner01 {
    margin-bottom: 20px;
}

#rightArea .banner02 {
    margin-bottom: 40px;
}

#rightArea .banner02 img {
    width: 100%;
}

@media screen and (max-width: 559px) {

#mainContainer {
    width: 100%;
    margin: 0;
    display: block;
}

/*leftArea*/

#leftArea01 ul.list01,
#leftArea02 ul.list02 {
    display: grid;
    grid-template-columns: 42vw 42vw;
    justify-content: space-between;
}

#leftArea01 ul.list01 li a,
#leftArea02 ul.list02 li a {
    margin-bottom: 0;
    display: block;
}

#leftArea01 ul li a .thumbnail,
#leftArea02 ul li a .thumbnail {
    width: 100%;
    height: 28.20vw;
    overflow: hidden;
    border-radius: 1.3vw;
}

#leftArea01 ul.list01 li img,
#leftArea02 ul.list02 li img {
    width: 100%;
    height: 28.20vw;
    border-radius: 1.3vw;
}

#leftArea01 ul.list01 li dl,
#leftArea02 ul.list02 li dl {
    width: 100%;
}

#leftArea01 ul li a .iconBox img,
#leftArea02 ul li a .iconBox img {
    width: 8.97vw;
    margin-left: 2px
}

#leftArea01 ul.list01 li dl dt,
#leftArea01 ul.list02 li dl dt {
    order: 2;
    margin: 2.56vw 0 0;
    font-size: 1.2rem;
}

#leftArea01 ul.list01 li dl dd,
#leftArea01 ul.list02 li dl dd {
    order: 1;
    align-items: flex-end;
    margin-top: 2.56vw;
}

.house .titleArea {
    margin-bottom: 5.33vw;
    display: flex;
    flex-direction: column;
}

.house .titleArea .iconBox {
    margin-bottom: 5.33vw;
    order: 1;
}

.house .titleArea .iconBox img {
    width: 9.33vw;
    margin-right: 1.4vw;
}

.house .titleArea .iconBox img.empty {
    margin: 0 0 0 5.33vw;
}

.house .titleArea h1 {
    font-size: 2.0rem;
    line-height: 1.4;
    margin-bottom: 2.67vw;
    order: 2;
}

.house .titleArea p.date {
    text-align: left;
    order: 4;
    font-family: "AvenirNextLTPro-Regular","FOT-筑紫ゴシック Pr5 R";
    margin: 2.67vw 0 0;
}

.house .titleArea p.txt01 {
    display: flex;
    align-items: flex-end;
    order: 3;
    flex-wrap: wrap;
}

.house .titleArea p.txt01 .price {
    font-size: 4.0rem;
    padding-right: 5.33vw;
    margin-right: 5.33vw;
}

.house .titleArea p.txt01 .price small {
    font-size: 1.5rem;
}

.house .titleArea p.txt01 .city {
    font-size: 2.0rem;
}

.house .titleArea p.txt01 .fudosan {
    font-size: 1.3rem;
    margin: 4vw 0 0;
    width: 100%;
}

.house .titleArea .sns {
  bottom: 1vw;
}

.house .titleArea .sns li {
    margin-left: 2.67vw;
}

.house .titleArea .sns li img {
    height: 4.27vw;
}

.house .mainimg {
    width: 90vw;
    margin: 0 auto 7.69vw;
}

.house .mainimg .img {
    margin-bottom: 0;
    text-align: center;
}

.house .mainimg .img img{
    width: 90vw;
    height: 61.54vw;
    border-radius: 1.3vw;
    object-fit: cover;
}

.house .mainimg .thumbnail {
    display: none;
}

.detail {
    width: 90vw;
    margin: 0 auto;
    padding: 4vw 0 10.67vw;
}

.detail h3 {
    font-size: 2.0rem;
    padding-bottom: 2.67vw;
}

.detail table {
  width: 100%;
}

.detail th {
    width: 40%;
    padding: 1.4vw 4vw;
}

.detail td {
    width: 60%;
}

.map {
    width: 90vw;
    margin: 0 auto 8vw;
}


/* Google Mapを囲う要素 */
.map div {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map .btn01 {
    margin-top: 2.67vw;
}

.map .btn01 a {
    width: 45.33vw;
    height: 9.33vw;
    border-radius: 4.7vw;
    padding-bottom: 1vw;
}

.map .btn01 a img {
    margin-left: 1.4vw;
    width: 3.2vw;
}

.realtor {
    padding: 8vw 7.5vw;
    margin-bottom: 5.33vw;
    display: block;
}

.realtor .left {
    width: 100%;
    margin-bottom: 9.33vw;
}

.realtor .tits {
    margin-bottom: 8vw;
}

.realtor dl {
    margin-bottom: 1.4vw;
}

.realtor dl dt {
    width: 13.33vw;
}

.realtor dl dd {
    width: 58.67vw;
    padding-top: 1vw;
}

.realtor .right {
    width: 100%;
    text-align: center;
}

.realtor .right a.submit {
    width: 100%;
    height: 9.33vw;
    border-radius: 4.7vw;
    font-size: 1.4rem;
}

.realtor .right a.company {
    margin-top: 6vw;
}

.house .note {
    width: 90vw;
    margin: 0 auto;
}

/*rightArea*/

#rightArea .banner01 {
    width: 90vw;
    margin: 0 auto 3.85vw;
}

#rightArea .banner01 img {
    width: 100%;
}

#rightArea .banner02 {
    width: 90vw;
    margin: 0 auto 7.69vw;
}

#rightArea .banner02 img {
    width: 100%;
}

}


@media screen and (orientation: landscape) {

html.is-mobile #mainContainer {
    width: 100%;
    margin: 0;
    display: block;
}

/*leftArea*/

html.is-mobile #leftArea01 ul.list01,
html.is-mobile #leftArea02 ul.list02 {
    display: grid;
    grid-template-columns: 42vw 42vw;
    justify-content: space-between;
}

html.is-mobile #leftArea01 ul.list01 li a,
html.is-mobile #leftArea02 ul.list02 li a {
    margin-bottom: 0;
    display: block;
}

html.is-mobile #leftArea01 ul li a .thumbnail,
html.is-mobile #leftArea02 ul li a .thumbnail {
    width: 100%;
    height: 28.20vw;
    overflow: hidden;
    border-radius: 1.3vw;
}

html.is-mobile #leftArea01 ul.list01 li img,
html.is-mobile #leftArea02 ul.list02 li img {
    width: 100%;
    height: 28.20vw;
    border-radius: 1.3vw;
}

html.is-mobile #leftArea01 ul.list01 li dl,
html.is-mobile #leftArea02 ul.list02 li dl {
    width: 100%;
}

html.is-mobile #leftArea01 ul li a .iconBox img,
html.is-mobile #leftArea02 ul li a .iconBox img {
    width: 8.97vw;
    margin-left: 2px
}

html.is-mobile #leftArea01 ul.list01 li dl dt,
html.is-mobile #leftArea01 ul.list02 li dl dt {
    order: 2;
    margin: 2.56vw 0 0;
    font-size: 1.2rem;
}

html.is-mobile #leftArea01 ul.list01 li dl dd,
html.is-mobile #leftArea01 ul.list02 li dl dd {
    order: 1;
    align-items: flex-end;
    margin-top: 2.56vw;
}

html.is-mobile .house .titleArea {
    margin-bottom: 5.33vw;
    display: flex;
    flex-direction: column;
}

html.is-mobile .house .titleArea .iconBox {
    margin-bottom: 5.33vw;
    order: 1;
}

html.is-mobile .house .titleArea .iconBox img {
    width: 9.33vw;
    margin-right: 1.4vw;
}

html.is-mobile .house .titleArea .iconBox img.empty {
    margin: 0 0 0 5.33vw;
}

html.is-mobile .house .titleArea h1 {
    font-size: 2.0rem;
    line-height: 1.4;
    margin-bottom: 2.67vw;
    order: 2;
}

html.is-mobile .house .titleArea p.date {
    text-align: left;
    order: 4;
    font-family: "AvenirNextLTPro-Regular","FOT-筑紫ゴシック Pr5 R";
    margin-top: 2.67vw;
}

html.is-mobile .house .titleArea p.txt01 {
    display: flex;
    align-items: flex-end;
    order: 3;
    flex-wrap: wrap;
}

html.is-mobile .house .titleArea p.txt01 .price {
    font-size: 4.0rem;
    padding-right: 5.33vw;
    margin-right: 5.33vw;
}

html.is-mobile .house .titleArea p.txt01 .price small {
    font-size: 1.5rem;
}

html.is-mobile .house .titleArea p.txt01 .city {
    font-size: 2.0rem;
}

html.is-mobile .house .titleArea p.txt01 .fudosan {
    font-size: 1.3rem;
    margin: 4vw 0 0;
    width: 100%;
}

html.is-mobile .house .titleArea .sns {
  bottom: 1vw;
}


html.is-mobile .house .titleArea .sns li {
    margin-left: 2.67vw;
}

html.is-mobile .house .titleArea .sns li img {
    height: 4.27vw;
}

html.is-mobile .house .mainimg {
    width: 90vw;
    margin: 0 auto 7.69vw;
}

html.is-mobile .house .mainimg .img {
    margin-bottom: 0;
    text-align: center;
}

html.is-mobile .house .mainimg .img img{
    width: 90vw;
    height: 61.54vw;
    border-radius: 1.3vw;
    object-fit: cover;
}

html.is-mobile .house .mainimg .thumbnail {
    display: none;
}

html.is-mobile .detail {
    width: 90vw;
    margin: 0 auto;
    padding: 4vw 0 10.67vw;
}

html.is-mobile .detail h3 {
    font-size: 2.0rem;
    padding-bottom: 2.67vw;
}

html.is-mobile .detail table {
  width: 100%;
}

html.is-mobile .detail th {
    width: 40%;
    padding: 1.4vw 4vw;
}

html.is-mobile .detail td {
    width: 60%;
}

html.is-mobile .map {
    width: 90vw;
    margin: 0 auto 8vw;
}


/* Google Mapを囲う要素 */
html.is-mobile .map div {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
html.is-mobile .map div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

html.is-mobile .map .btn01 {
    margin-top: 2.67vw;
}

html.is-mobile .map .btn01 a {
    width: 45.33vw;
    height: 9.33vw;
    border-radius: 4.7vw;
    padding-bottom: 1vw;
}

html.is-mobile .map .btn01 a img {
    margin-left: 1.4vw;
    width: 3.2vw;
}

html.is-mobile .realtor {
    padding: 8vw 7.5vw;
    margin-bottom: 5.33vw;
    display: block;
}

html.is-mobile .realtor .left {
    width: 100%;
    margin-bottom: 9.33vw;
}

html.is-mobile .realtor .tits {
    margin-bottom: 8vw;
}

html.is-mobile .realtor dl {
    margin-bottom: 1.4vw;
}

html.is-mobile .realtor dl dt {
    width: 13.33vw;
}

html.is-mobile .realtor dl dd {
    width: 58.67vw;
    padding-top: 1vw;
}

html.is-mobile .realtor .right {
    width: 100%;
    text-align: center;
}

html.is-mobile .realtor .right a.submit {
    width: 100%;
    height: 9.33vw;
    border-radius: 4.7vw;
    font-size: 1.4rem;
}

html.is-mobile .realtor .right a.company {
    margin-top: 6vw;
}

html.is-mobile .house .note {
    width: 90vw;
    margin: 0 auto;
}

/*rightArea*/

html.is-mobile #rightArea .banner01 {
    width: 90vw;
    margin: 0 auto 3.85vw;
}

html.is-mobile #rightArea .banner01 img {
    width: 100%;
}

html.is-mobile #rightArea .banner02 {
    width: 90vw;
    margin: 0 auto 7.69vw;
}

html.is-mobile #rightArea .banner02 img {
    width: 100%;
}

}