/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ body {scrollbar-face-color: #325e35; scrollbar-track-color: #fff; scrollbar-arrow-color: #325e35; scrollbar-shadow-color: #fff;} #loader .inner .logo-load {width: 320px; height: auto; right: 25px;} #loader .inner p {font-size: 1.075rem;} /*スクロールバー*/ ::-webkit-scrollbar {width: 8px; height: 8px;} ::-webkit-scrollbar-thumb {background: #325e35;} ::-webkit-scrollbar-track-piece {background: #fff;} /*pc限定*/ .sp {display: none!important;} /*TOPに戻る*/ #scroll {width: 60px; height: 60px;} #scroll .top {width: 18px; height: 3px; margin: 6px 0;} #scroll .arrow {width: 10px; height: 10px; border-width: 3px;} /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*汎用ヘッダー*/ .g-h {margin: 100px 0;} .g-h span.big {font-size: 2.25rem;} .g-h span.small {font-size: .9rem;} .g-h.arc span.big {font-size: 1.875rem;} .g-h.arc span.cat {margin: -4px 20px 0 0;} /*MORE*/ .more {padding: 16px 30px;} .more:hover {opacity: 1;} .more:hover span {color: #fff;} .more:hover:after {left: 0; right: auto; width: 100%; transition: .3s ease;} .more:hover .arrow:before {background: #fff; animation: slide 2s ease-in-out infinite;} .more:hover .arrow:after {border-color: transparent transparent transparent #fff; animation: slide 2s ease-in-out infinite;} @keyframes slide {0% {transform: translateX(-30px);} 50% {transform: translateX(0px);} 100% {transform: translateX(30px);}} /*MORE-White*/ .more.white:hover span {color: #79ad4b;} .more.white:hover .arrow:before {background: #79ad4b;} .more.white:hover .arrow:after {border-color: transparent transparent transparent #79ad4b;} /*MORE-black*/ .more.black:hover {border-color: #fff;} .more.black:hover span {color: #79ad4b;} .more.black:hover .arrow:before {background: #79ad4b;} .more.black:hover .arrow:after {border-color: transparent transparent transparent #79ad4b;} /*MORE-green*/ .more.green:hover span {color: #79ad4b;} .more.green:hover .arrow:before {background: #79ad4b;} .more.green:hover .arrow:after {border-color: transparent transparent transparent #79ad4b;} /*次のページ*/ .next-sec {bottom: 36px;} /*セクションスクロールナビ*/ #menu {right: 24px;} /*コンタクトボックス*/ .contact-box {padding: 100px 0;} .contact-box .inner {justify-content: space-between; align-items: center; width: 850px; padding: 70px 50px;} .contact-box .g-h {margin: 0 32px;} .contact-box .g-h span.big {font-size: 2.5rem;} .contact-box .right a.top {margin: 0 0 40px;} .contact-box .right a.top .tel {justify-content: center; align-items: center; font-size: 1.9rem; margin-bottom: 10px; padding: 18px 15px;} .contact-box .right a.top .tel span {font-size: 1.2rem; margin-right: 16px;} /*ページネーション*/ #paginate {margin-bottom: 50px;} /*ブログ*/ .blog-list {flex-wrap: wrap;} .blog-list .entry {width: 100%; max-width: 360px; margin: 0 0 60px 0;} /*分譲地*/ .lands-list .entry .img img {width: 85%; max-width: 1920px; max-height: 856px;} .lands-list .entry .state {bottom: -50px; min-width: 480px; padding: 35px 30px;} .lands-list .entry .state .h-l {font-size: 1.75rem;} .lands-list .entry .state .cat {margin: 14px 0 5px;} .lands-list .entry .content {justify-content: space-between; margin-top: 80px;} .lands-list .entry .content .left {width: 50%;} .lands-list .entry .content .right {width: 45%;} .lands-list .entry .content .catch {font-size: 1.9rem;} .lands-list .entry:nth-child(odd) .catch {margin-top: 20px;} .lands-list .entry:nth-child(even) .catch {margin-top: -20px;} .lands-list .entry .content .excerpt {font-size: 1.075rem; line-height: 2; margin-top: 32px;} /*2カラム*/ .two-col {justify-content: center; flex-direction: row-reverse;} .two-col .main {width: 100%; max-width: 1620px;} .two-col .sidebar {width: 30%; max-width: 360px; min-width: 295px; margin-left: 60px; padding-left: 50px; border-left: 1px solid #ddd;} @media screen and (min-width: 768px) and (max-width: 1024px) { .contact-box .inner {width: 700px; max-width: 90vw; padding: 50px 30px;} .contact-box .g-h {margin: 0 20px;} .contact-box .g-h span.big {font-size: 2.25rem;} .contact-box .right a.top .tel {font-size: 1.8rem; margin-bottom: 10px; padding: 16px 10px;} .contact-box .right a.top .tel span {font-size: 1.1rem; margin-right: 12px;} .blog-list .entry {width: calc((100% - 180px) / 2)!important;} .lands-list .entry .img img {width: 90%;} .lands-list .entry .state {bottom: -100px; min-width: 420px;} .lands-list .entry .content {margin-top: 140px;} .lands-list .entry:nth-child(odd) .catch, .lands-list .entry:nth-child(even) .catch {margin-top: 0;} .lands-list .entry .content {display: block;} .lands-list .entry .content .left, .lands-list .entry .content .right {width: 100%;} .lands-list .entry .content .right {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 25px;} .lands-list .entry .content .block {width: 50%; margin: 0;} .lands-list .entry .content .g-map {width: 45%;} .two-col {flex-direction: column-reverse;} .two-col .sidebar {width: 100%; max-width: 100%; margin: 0; padding: 10px 0 0; border-top: 1px solid #ddd; border-left: none;} } @media screen and (min-width: 1700px) { .lands-list.container {width: 1700px;} .lands-list .entry:nth-child(odd) .img {right: 0;} .lands-list .entry:nth-child(even) .img {left: 0;} } /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header .logo {top: 24px; left: 24px; width: 125px;} header #full-navi {justify-content: center;} header #full-navi .g-navi {justify-content: center; margin: 0 auto 40px;} header #full-navi .g-navi ul {margin: 0 70px;} header #full-navi .g-navi ul li {margin-bottom: 25px;} header #full-navi .g-navi a {font-size: 1.5rem;} header #full-navi .contact {width: 600px; padding: 25px 50px;} header #full-navi .contact a.top {margin-bottom: 15px; padding: 20px 0 25px;} header #full-navi .contact a.top .tel {justify-content: center; align-items: center; font-size: 2.25rem;} header #full-navi .contact a.top .tel span {font-size: 1.3rem; margin-right: 24px;} header #full-navi .contact .bottom {align-items: center; justify-content: center;} header #full-navi .contact .bottom .sns {margin-left: 30px;} header #humberger {top: 31px; right: 35px;} header #humberger div {width: 40px;} header #toggle-back {width: 274px; height: 188px; transform: rotate(0.000001deg);} @keyframes toggle-back-open {0% {transform: scale(1,1);} 100% {transform: scale(22,18);}} @keyframes toggle-back-close {0% {transform: scale(22,18);} 100% {transform: scale(1,1);}} /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer {padding: 70px 0 65px;} footer .container {justify-content: space-between;} footer .left .logo .logo-icon {height: 50px; margin-right: 24px;} footer .left .logo .logo-jp {height: 49px;} footer .right {margin-bottom: 80px;} footer .right > ul {margin-right: 80px;} footer .right > ul > li {margin-bottom: 1.5rem;} @media screen and (min-width: 768px) and (max-width: 1024px) { footer .left, footer .right {width: 100%;} footer .right {margin-top: 60px; padding-top: 60px; border-top: 1px solid #708e72;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ＆固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- TOPページ --------------------------------------------------------------------------*/ #front .sec01 {background-image: url(../img/front/sec-img_01.jpg);} #front .sec02 {background-image: url(../img/front/sec-img_02.jpg);} #front .sec03 {background-image: url(../img/front/sec-img_03.jpg);} #front .sec-scroll .txt {} #front .sec-scroll .txt h1, #front .sec-scroll .txt h2 {font-size: 3.25rem; letter-spacing: 4px; margin-bottom: 10px;} #front .sec-scroll .txt h1 {margin-left: -5px;} #front .sec-scroll .txt p {font-size: 1.075rem; padding-bottom: 30px;} #front .sec-scroll.sec01 .txt {bottom: 5vw; left: 5vw; text-align: left;} #front .sec-scroll.sec02 .txt {top: 50%; left: 0; transform: translate(0,-50%); width: 100%; text-align: center;} #front .sec-scroll.sec03 .txt {bottom: 5vw; right: 5vw; text-align: right;} #front .content-link {margin: 0 auto 100px; padding: 100px 0 0;} #front .content-link .entry {width: calc((100% - 84px) / 3); height: 380px; margin-right: 42px;} #front .content-link .entry:nth-child(3n) {margin-right: 0;} #front .content-link .entry .g-h .big {font-size: 1.85rem;} #front .blog {margin-bottom: 100px;} #front .blog > .more {margin: 75px 0 0;} #front .blog .blog-list {width: 200%;} #front .blog .blog-list .entry {width: 25%;} #front .lands {margin-bottom: 100px;} #front .lands > .more {margin: 75px 0 0;} #front .access {height: 560px; margin-bottom: 80px;} #front .access .contents {width: 380px;} #front .access .contents .txt {min-height: 320px; padding: 32px 48px;} #front .access #office-map {width: calc(100% - 380px); height: 560px;} @media screen and (min-width: 768px) and (max-width: 1023px) { #front .content-link {display: block;} #front .content-link .entry {display: block; width: 100%; height: 250px; margin: 0 0 25px;} #front .blog .blog-list {width: 400%;} #front .blog .blog-list .entry {width: 50%;} } @media screen and (min-width: 1024px) and (max-width: 1024px) { #front .content-link .entry {width: calc((100% - 60px) / 3); height: 325px; margin-right: 30px;} #front .content-link .entry .g-h .big {font-size: 1.55rem;} #front .blog .blog-list {width: calc((100% / 3) * 8);} #front .blog .blog-list .entry {width: calc(100% / 3);} } @media screen and (min-width: 768px) and (max-width: 1024px) { #front .access .contents {width: 320px;} #front .access .contents .txt {padding: 32px 36px;} #front .access #office-map {width: calc(100% - 320px);} } @media screen and (min-width: 1920px) { #front .blog .blog-list {width: 160%;} #front .blog .blog-list .entry {width: 20%;} } @media screen and (min-width: 2560px) { #front .blog .blog-list {width: 100%;} #front .blog .blog-list .entry {width: 12.5%;} } /*-------------------------------------------------------------------------- 姶良土地開発のコンセプト --------------------------------------------------------------------------*/ #page-concept .concept {position: relative; align-items: flex-start;} #page-concept .concept.thought {margin-bottom: 250px;} #page-concept .concept.create {margin-bottom: 200px;} #page-concept .concept.playground {margin-bottom: 250px;} #page-concept .concept:nth-child(odd) {justify-content: flex-start;} #page-concept .concept:nth-child(even) {justify-content: flex-end;} #page-concept .concept.thought .img {width: 65%;} #page-concept .concept.create .img {width: 70%;} #page-concept .concept.playground .img {width: 65%;} #page-concept .concept.thought .img img {max-height: 864px; object-position: 50% 75%; font-family: 'object-fit: cover; object-position: 50% 70%;';} #page-concept .concept.create .img img {max-height: 568px;} #page-concept .concept.playground .img img {max-height: 640px;} #page-concept .concept .txt {position: absolute; box-sizing: border-box; width: 50%; min-width: 640px; max-width: 880px; background: #fff; padding: 50px 55px; z-index: 2;} #page-concept .concept.thought .txt {top: 160px; left: 5%; padding: 55px 5% 55px 0;} #page-concept .concept.create .txt {top: -40px; right: 5%; padding: 55px 0 55px 5%;} #page-concept .concept.playground .txt {top: 94px; left: 5%; padding: 55px 5% 55px 0;} #page-concept .concept .txt p {font-size: 1.05rem;} @media screen and (min-width: 768px) and (max-width: 1024px) { #page-concept .concept {flex-direction: column-reverse;} #page-concept .concept.thought {margin-bottom: 40px;} #page-concept .concept.create {margin-bottom: 180px;} #page-concept .concept.playground {margin-bottom: 100px;} #page-concept .concept:nth-child(odd) {align-items: flex-start;} #page-concept .concept:nth-child(even) {align-items: flex-end;} #page-concept .concept.thought .img {width: 80%; min-width: 680px; margin-right: auto;} #page-concept .concept.create .img {width: 90%; margin-left: auto;} #page-concept .concept.playground .img {width: 85%;margin-right: auto;} #page-concept .concept.thought .img img {max-height: 640px;} #page-concept .concept .txt {position: relative; width: 80%; max-width: 760px; padding: 45px 50px;} #page-concept .concept.thought .txt {top: -60px; left: -5%; right: 5%;} #page-concept .concept.create .txt {top: 60px; left: 5%; right: 0;} #page-concept .concept.playground .txt {top: -60px; left: -5%; right: 5%;} } /*-------------------------------------------------------------------------- 姶良土地開発について --------------------------------------------------------------------------*/ #page-company .message {padding: 150px 0 300px;} #page-company .message .txt img {width: 124px; margin: 0 auto 90px;} #page-company .message .txt h1 {font-size: 2.125rem; margin-bottom: 70px;} #page-company .message .txt p {font-size: 1.325rem; margin: 0 auto 50px;} #page-company .message .img {position: absolute; top: 80px; right: 0; width: 25%; max-width: 360px; min-width: 280px;} #page-company .message .img figcaption {bottom: 50px;} #page-company .message .img figcaption span {text-align: right;} #page-company .message .letter {width: 70%; max-width: 1400px; bottom: 120px; left: -100px;} #page-company .company {align-items: flex-start; margin-bottom: 150px;} #page-company .company.first .img {width: 60%;} #page-company .company.second .img {width: 55%; margin-left: auto;} #page-company .company.third .img {width: 100%;} #page-company .company.first .img img {min-height: 680px; max-height: 780px;} #page-company .company.second .img img {min-height: 500px; max-height: 600px;} #page-company .company.third .img img {min-height: 928px; max-height: 1128px;} #page-company .company .txt {position: absolute;} #page-company .company .txt h2 {font-size: 2.075rem; margin-bottom: 28px;} #page-company .company .txt h3 {font-size: .95rem; letter-spacing: 1.5px; margin-bottom: 8px;} #page-company .company .txt h3 span {font-size: 1.6rem; margin-right: 12px;} #page-company .company .txt p {font-size: 1.05rem;} #page-company .company.first .txt {bottom: -25px; right: 2.5%; width: 42%; min-width: 550px; max-width: 650px; background: #fff; padding: 50px 55px;} #page-company .company.second .txt {top: 40px; left: 5%; width: 35%; min-width: 480px; max-width: 580px;} #page-company .company.third .txt {bottom: -5%; right: 7.5%; width: 50%; min-width: 470px; max-width: 570px;} #page-company .company.first .letter {width: 37.5%; top: 30px; right: -40px;} #page-company .company.second .letter {width: 45%; bottom: 0; left: -10px;} #page-company .tenant {width: 75vw; max-width: 1440px; flex-wrap: wrap; margin: 200px auto;} #page-company .tenant .txt, #page-company .tenant img {width: 50%; box-sizing: border-box;} #page-company .tenant .txt {padding: 60px;} #page-company .tenant .txt p {font-size: 1.025rem;} #page-company .overview {max-width: 1920px; margin: 100px auto;} #page-company .overview .bg .inner {width: 100%; margin: 0 auto; padding: 100px; box-sizing: border-box;} #page-company .overview .bg h2 {width: 27.5%; margin: 0 0 35px;} #page-company .overview .bg h2 span {text-align: left;} #page-company .overview .bg h2 span.big {font-size: 1.825rem;} #page-company .overview .bg h2 span.small {font-size: .8rem; margin: 4px 0 0 3px;} #page-company .overview .bg .list {width: 72.5%; min-width: 600px;} #page-company .overview .bg .list * {font-size: 1.05rem; box-sizing: border-box;} #page-company .overview .bg .list dl {display: flex; flex-wrap: wrap;} #page-company .overview .bg .list dl dt {width: 30%; padding: 6px 0 6px 5%; align-items: center;} #page-company .overview .bg .list dl dd {width: 65%; padding: 6px 0 6px 0;} #page-company .overview .letter {width: 65%; height: auto; top: -120px; left: -40px;} #page-company .access {max-width: 1920px; margin: 100px auto; padding-top: 15px;} #page-company .access .map {width: 100%; height: 50vw; max-height: 750px; min-height: 560px;} #page-company .access .contents {justify-content: center; align-items: flex-start; width: 100%; max-width: 1920px; margin: 0 auto; padding: 15px 48px; box-sizing: border-box;} #page-company .access .contents .txt {min-width: 280px; margin-right: 48px; padding: 15px 0;} #page-company .access .contents .txt h2 {font-size: 2rem; margin: 0 0 18px;} #page-company .access .contents .txt h3 {font-size: 1.1rem; margin-bottom: 2px;} #page-company .access .contents .txt ul li {font-size: .975rem;} #page-company .access .contents .txt div {margin-bottom: 18px;} #page-company .access .contents .img {width: calc((100% - 280px - 15px - 48px) / 2); max-width: 560px; min-height: 285px; max-height: 350px; margin-right: 15px; display:block; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';} #page-company .access .contents .img:last-child {margin-right: 0;} @media screen and (min-width: 768px) and (max-width: 1024px) { #page-company .message .img {position: relative; top: 0; left: 0; margin: 100px auto 0;} #page-company .message .img img {width: 100%;} #page-company .message .img figcaption {bottom: 0;} #page-company .message .img figcaption span {text-align: center;} #page-company .company.first .img {width: 70%;} #page-company .company.second .img {width: 60%;} #page-company .company.third .img {width: 100%;} #page-company .company .txt {padding: 45px 50px;} #page-company .company.first .txt {bottom: -50px; right: 0;} #page-company .company.second .txt {top: 40px; left: 0;} #page-company .company.third .txt {bottom: -10%; right: 0;} #page-company .company.second .txt p {text-shadow: 1px 1px 1px #fff;} #page-company .tenant {width: 90vw;} #page-company .tenant .txt {padding: 45px;} #page-company .overview .bg .inner {display: block; padding: 75px;} #page-company .overview .bg h2, #page-company .overview .bg .list {width: 100%;} #page-company .access .contents {flex-wrap: wrap; padding: 15px 42px;} #page-company .access .contents .txt {display: flex; flex-wrap: wrap; align-items: flex-start; min-width: 100%; margin-right: 0;} #page-company .access .contents .txt h2 {width: 100%;} #page-company .access .contents .txt div {margin-right: 60px;} #page-company .access .contents .img {width: calc((100% - 15px - 8px) / 2); margin-bottom: 15px; min-height: 220px;} } @media screen and (min-width: 1560px) { #page-company .access .contents .txt {display: flex; flex-wrap: wrap; align-items: flex-start;} #page-company .access .contents .txt h2 {width: 100%;} #page-company .access .contents .txt div {margin-right: 50px;} } @media screen and (min-width: 1920px) { #page-company .message .img {right: 7.5%;} } /*-------------------------------------------------------------------------- 宅地造成工事の流れ --------------------------------------------------------------------------*/ #page-site-preparation .container {width: 85vw; max-width: 1280px; margin-bottom: 125px;} #page-site-preparation .box {display: flex; min-height: 280px; border: #79ad4b 2px solid; margin-bottom: 50px;} #page-site-preparation .box:after {content: url("../img/preparation/arrow.svg"); position: absolute; top: calc(100% + 13px); left: 50%; transform: translateX(-50%); height: 28px;} #page-site-preparation .box:last-child:after {display: none;} #page-site-preparation .box h2 {position: absolute; width: 100%; padding-left: 60px;} #page-site-preparation .box h2:after {width: calc(52% - 140px); height: 4px;} #page-site-preparation .box h2 .head-line {font-size: 1.6rem; padding: 17px 0 18px 25px;} #page-site-preparation .box h2 .num {position: absolute; left: -30px; top: -25px; font-size: 3rem; width: 90px; height: 90px;} #page-site-preparation .box:last-child h2 .num {text-indent: -9999%; white-space: nowrap;} #page-site-preparation .box h2 .num div {top: 0; right: -41px; width: 212px; height: 64px;} #page-site-preparation .box .txt {width: 52%; padding: 90px 50px 30px;} #page-site-preparation .box .txt p {font-size: 1.05rem; margin-bottom: 1rem;} #page-site-preparation .box .txt p:last-child {margin-bottom: 0;} #page-site-preparation .box img {width: 48%; min-height: 100%;} @media screen and (min-width: 768px) and (max-width: 1024px) { #page-site-preparation .box h2 {padding-left: 50px;} #page-site-preparation .box h2:after {width: calc(60% - 120px);} #page-site-preparation .box h2 .head-line {font-size: 1.5rem;} #page-site-preparation .box h2 .num {left: -26px; top: -21px; font-size: 2.775rem; width: 85px; height: 85px;} #page-site-preparation .box h2 .num div {top: 5px; right: -41px; width: 159px; height: 48px;} #page-site-preparation .box .txt {width: 60%; padding: 90px 40px 30px;} #page-site-preparation .box img {width: 40%;} } /*-------------------------------------------------------------------------- ご購入までの流れ --------------------------------------------------------------------------*/ #page-buy-flow {margin-bottom: 100px;} #page-buy-flow .container {max-width: 1600px;} #page-buy-flow .side {border-top: 4px solid #008f45; border-bottom: 4px solid #008f45;} #page-buy-flow .side li {width: 50%; font-size: 1.75rem; font-weight: 700; text-align: center; padding: 5px 0;} #page-buy-flow .contents > li {width: 35%; min-width: 300px; max-width: 560px; padding: 35px 30px;} #page-buy-flow .contents > li.right {left: calc(50% + 120px - 12px);} #page-buy-flow .contents > li.left {left: calc(50% - 120px + 6px); transform: translateX(-100%);} #page-buy-flow .contents > li.center {left: 50%; transform: translateX(-50%);} #page-buy-flow .contents > li:nth-child(1) {top: 73px;} #page-buy-flow .contents > li:nth-child(2) {margin-top: 12px;} #page-buy-flow .contents > li:nth-child(3) {margin-top: 72px;} #page-buy-flow .contents > li:nth-child(4) {margin-top: 128px;} #page-buy-flow .contents > li:nth-child(5) {margin-top: 50px;} #page-buy-flow .contents > li:nth-child(6) {margin-top: 48px;} #page-buy-flow .contents > li:nth-child(7) {margin-top: 128px; padding: 45px 60px; border-radius: 0; width: 50%; min-width: 600px;} #page-buy-flow .contents > li.bar:before, #page-buy-flow .contents > li.bar:after {content: ""; display: block; position: absolute; background: #008f45;} #page-buy-flow .contents > li.bar:before {border-radius: 50%; width: 16px; height: 16px} #page-buy-flow .contents > li.bar:after {height: 1px; width: 120px;} #page-buy-flow .contents > li.bar.right:before {left: -120px; top: calc(50% - 8px);} #page-buy-flow .contents > li.bar.right:after {left: -120px; top: 50%;} #page-buy-flow .contents > li.bar.left:before {right: -120px; top: calc(50% - 8px);} #page-buy-flow .contents > li.bar.left:after {right: -120px; top: 50%;} #page-buy-flow .contents p, #page-buy-flow .contents ul li {font-size: 1.05rem;} #page-buy-flow .contents h2 {font-size: 1.5rem; margin-bottom: 12px;} #page-buy-flow .contents > img {position: absolute;} #page-buy-flow .contents > img:nth-of-type(1) {top: 263px; right: -5vw;} #page-buy-flow .contents > img:nth-of-type(2) {top: 565px; left: -5vw;} #page-buy-flow .contents > img:nth-of-type(3) {top: 1154px; left: 2%;} @media screen and (min-width: 768px) and (max-width: 1024px) { #page-buy-flow .contents > li {min-width: 310px; padding: 30px 25px;} #page-buy-flow .contents > li.center {min-width: 400px;} #page-buy-flow .contents > li.right {left: calc(50% + 60px - 12px);} #page-buy-flow .contents > li.left {left: calc(50% - 60px + 6px);} #page-buy-flow .contents > li.bar:after {width: 60px;} #page-buy-flow .contents > li.bar.right:before, #page-buy-flow .contents > li.bar.right:after {left: -60px;} #page-buy-flow .contents > li.bar.left:before, #page-buy-flow .contents > li.bar.left:after {right: -60px;} #page-buy-flow .contents > li:nth-child(7) {min-width: 600px;} #page-buy-flow .contents h2 {font-size: 1.4rem;} #page-buy-flow .contents > img:nth-of-type(1) {top: 7.5%;} #page-buy-flow .contents > img:nth-of-type(2) {top: 30.5%; left: 0;} #page-buy-flow .contents > img:nth-of-type(3) {top: 67.5%; left: 2.5%;} } @media screen and (min-width: 1920px) { #page-buy-flow .contents > img:nth-of-type(3) {top: 61.25%; left: 4%;} } /*-------------------------------------------------------------------------- お問い合わせ --------------------------------------------------------------------------*/ #page-contact .form {margin: 90px auto;} #page-contact .form small {margin-bottom: 50px;} #page-contact .form dl {display: flex; margin-bottom: 25px;} #page-contact .form dl dt {width: 32%;} #page-contact .form dl dd {width: 68%;} #page-contact .form .cheak {margin: 20px 0 40px;} #policy {top: 50%; left: 50%; transform: translate(-50%,-70%); max-height: 85vh; border-radius: 8px;} #policy .close {top: 24px; right: -8px; width: 56px; height: 56px;} #policy .close:before, #policy .close:after {width: 36px; height: 4px;} #policy h2 {font-size: 1.75rem; margin: 20px 0 60px;} #policy .content {padding: 56px;} .open-modal #policy {transform: translate(-50%,-50%);} /*-------------------------------------------------------------------------- 投稿汎用要素 --------------------------------------------------------------------------*/ #single blockquote {padding: 32px;} /*シェアボタン*/ .sns-share {margin: 60px 0;} .sns-share h3 {margin-bottom: 18px;} .sns-share a {width: 54px; height: 54px; margin: 0 7px;} /*-------------------------------------------------------------------------- ブログ --------------------------------------------------------------------------*/ #single-page .main {max-width: 1280px;} /*ヘッド*/ #single-page .single-head {} #single-page .single-head h1.title {font-size: 2.1rem; padding: 72px 0;} #single-page .single-head .state {margin: 12px 8px 8px;} #single-page .single-head .state time {margin-right: 16px;} #single-page .single-head .state .cat-list .cat {margin: 0 12px 0 0; padding: 6px 16px;} #single-page .single-head .tag-list {margin: 8px 8px 12px;} #single-page .single-head .tag-list .img {width: 16px; margin-right: 10px;} #single-page .single-head .tag-list a {font-size: .825rem; margin: 0 12px 5px 0;} #single-page .single-head .tag-list a:hover {color: #79ad4b; opacity: 1;} #single-page .eyecatch {margin-bottom: 60px;} /*コメント*/ #single-page .comment h3 {margin-bottom: 22px;} #single-page .commets-list {margin: 0 0 60px;} #single-page .commets-list li {margin: 0 0 20px auto; padding: 24px;} #single-page .commets-list li.depth-2 {width: calc(100% - 24px);} #single-page .commets-list li.depth-3 {width: calc(100% - 48px);} #single-page .comment-respond {margin: 0 0 100px;} #single-page .comment-respond input[type="submit"] {margin: 50px auto;} /*-------------------------------------------------------------------------- 分譲地 --------------------------------------------------------------------------*/ #single-lands-page .container {max-width: 1700px; margin-bottom: 100px;} #single-lands-page .single-lands {margin: 150px 0;} #single-lands-page .single-lands h1.title {font-size: 2.325rem; line-height: 1.25;} #single-lands-page .single-lands .cat {font-size: 1.05rem; margin-right: 40px; padding: 4px 22px;} #single-lands-page .content {margin: 30px 0;} #single-lands-page .back {margin: 100px 0 80px;} #single-lands {margin: 80px 0;} #single-lands section {margin-bottom: 80px;} #single-lands h2 {margin-bottom: 50px;} #single-lands h2 span {font-size: 1.75rem; letter-spacing: 3px;} #single-lands .block ul {display: inline-flex; margin-bottom: -20px;} #single-lands .block ul li {margin: 0 20px 20px 0;} #single-lands .block ul li:nth-child(even) {margin-right: 0;} #single-lands .price table {width: 66%; min-width: 880px; max-width: 1440px;} #single-lands .price table th, #single-lands .price table td {font-size: 1.025rem; padding: 12px;} #single-lands .parcel-photo ul {flex-wrap: wrap; align-items: flex-start; margin-bottom: -40px;} #single-lands .parcel-photo ul li {width: calc((100% - 40px) / 2); margin: 0 40px 40px 0;} #single-lands .parcel-photo ul li:nth-child(even) {margin-right: 0;} #single-lands .parcel-photo ul li figure a {height: 30vw; max-height: 360px;} #single-lands .parcel-photo ul li figcaption {padding: 8px 10px;} #single-lands .g-map .acf-map {height: 48.75vw; min-height: 500px; max-height: 700px;} #single-lands .about .list {width: 66%; min-width: 880px; max-width: 1440px; margin: 0 auto;} #single-lands .about .list dl {display: flex; border-bottom: 1px dashed #333;} #single-lands .about .list dl:last-child {border-bottom: none;} #single-lands .about .list dt, #single-lands .about .list dd {font-size: 1.05rem; text-align: left; padding: 4px 10px; box-sizing: border-box;} #single-lands .about .list dt {width: 30%;} #single-lands .facilities section {margin-bottom: 50px;} #single-lands .facilities h3 {font-size: 1.4rem; margin-bottom: 10px;} #single-lands .facilities ul {flex-wrap: wrap; margin-bottom: -30px;} #single-lands .facilities ul li {position: relative; width: calc((100% - 60px) / 3); height: 20vw; max-height: 300px; margin: 0 30px 30px 0;} #single-lands .facilities ul li:nth-child(3n) {margin-right: 0;} /*たてまさ*/ #single-lands-page .tatemasa .outline01.container, #single-lands-page .tatemasa .outline02.container, #single-lands-page .tatemasa .outline03.container, #single-lands-page .tatemasa .outline04.container {max-width: 980px;} #single-lands-page .tatemasa .discription {margin: 100px 0;} #single-lands-page .tatemasa .discription h2 {margin: 0 auto 70px;} #single-lands-page .tatemasa .discription h2 img {margin: 0 auto;} #single-lands-page .tatemasa .discription p {line-height: 1.75; text-align: center;} #single-lands-page .tatemasa .discription img.mori {margin: 45px auto;} #single-lands-page .tatemasa .outline .txt p {line-height: 1.75; margin: 25px 0 0;} #single-lands-page .tatemasa .outline .txt h3 {font-size: 2rem; font-weight: 700; line-height: 1.25; background-position: 0 2px; background-repeat: no-repeat; padding: 25px 0 6px; border-bottom: 3px solid #669933;} #single-lands-page .tatemasa .outline .outline01 {flex-wrap: wrap;} #single-lands-page .tatemasa .outline .outline01 h3 {background-image: url(../img/tatemasa/no1.png); padding-left: 84px;} #single-lands-page .tatemasa .outline .outline01 .txt, #single-lands-page .tatemasa .outline .outline01 .img02 {width: 400px;} #single-lands-page .tatemasa .outline .outline01 .img01, #single-lands-page .tatemasa .outline .outline01 .img03 {width: 768px; margin-right: -188px;} #single-lands-page .tatemasa .outline .outline01 .txt {padding-right: 40px; box-sizing: border-box;} #single-lands-page .tatemasa .outline .outline01 .img01 figure, #single-lands-page .tatemasa .outline .outline01 .img02 figure {position: relative;} #single-lands-page .tatemasa .outline .outline01 .img01 figure figcaption, #single-lands-page .tatemasa .outline .outline01 .img02 figure figcaption {position: absolute;} #single-lands-page .tatemasa .outline .outline01 .img01 figure figcaption {bottom: 6px; left: 20px; color: #fff;} #single-lands-page .tatemasa .outline .outline01 .img02 figure figcaption {top: calc(-6px + -1.5em);} #single-lands-page .tatemasa .outline .outline01 .img02 figure {width: 340px; margin-left: auto;} #single-lands-page .tatemasa .outline .outline01 .img03 img {margin: 48px 0 0 52px;} #single-lands-page .tatemasa .outline .outline02 {flex-wrap: nowrap; margin-bottom:100px; margin-top:-100px;} #single-lands-page .tatemasa .outline .outline02 h3 {background-image: url(../img/tatemasa/no2.png); padding-left: 110px;} #single-lands-page .tatemasa .outline .outline02 .txt {width:450px; vertical-align: top; padding-top: 190px } #single-lands-page .tatemasa .outline .outline02 .img01 {width:712px; vertical-align: top;} #single-lands-page .tatemasa .outline .outline03 {flex-wrap: nowrap; flex-direction: row-reverse; margin-bottom:200px;} #single-lands-page .tatemasa .outline .outline03 h3 {background-image: url(../img/tatemasa/no3.png); padding-left: 100px;} #single-lands-page .tatemasa .outline .outline03 .txt {width:400px; vertical-align: top;} #single-lands-page .tatemasa .outline .outline03 .img01 { width:768px; vertical-align: top; padding-right: 30px; margin-left:-188px;} #single-lands-page .tatemasa .outline .outline04 {margin-bottom:100px; position: relative; min-height: 900px;} #single-lands-page .tatemasa .outline .outline04 h3 {background-image: url(../img/tatemasa/no4.png); padding-left: 95px;} #single-lands-page .tatemasa .outline .outline04 .txt {width:400px;} #single-lands-page .tatemasa .outline .outline04 .img01 {position: absolute; top: 0; right: 0; width: 730px; margin-right: -188px;} #single-lands-page .tatemasa .outline .outline04 .img02 {position: absolute; top: 400px; left: 0; } #single-lands-page .tatemasa .outline .outline04 .img03 {position: absolute; top: 600px; left: 355px; } #single-lands-page .tatemasa .outline .outline04 .img04 {position: absolute; top: 600px; left: 655px; } #single-lands-page .tatemasa .outline .outline04 img.tb {display: none;} #single-lands-page .tatemasa .outline .outline05 .container {flex-wrap: wrap; width: 740px;} #single-lands-page .tatemasa .outline .outline05 {padding:340px 0 250px 0; background-color: #669933; background-image:url(../img/tatemasa/05_bg_head.png),url(../img/tatemasa/05_bg_foot.png); background-repeat: repeat-x,repeat-x; background-position: top,bottom;} #single-lands-page .tatemasa .outline .outline05 dl.caution { margin:0 auto 70px auto;} #single-lands-page .tatemasa .outline .outline05 dl.caution dt {color: #be272d; font-weight: 700; background: #fcee21; width: 178px; padding: 3px 0; text-align: center;} #single-lands-page .tatemasa .outline .outline05 dl.caution dd {color: #be272d; font-size:1.1rem; background-color: #c1d6ad; padding:33px 50px;} #single-lands-page .tatemasa .outline .outline05 p {color: #000;} #single-lands-page .tatemasa .outline .outline05 h3 {background-image: url(../img/tatemasa/no5.png); padding-left: 105px; border-color:#fff ;} #single-lands-page .tatemasa .outline .outline05 .program-outline {margin:0 auto 100px auto;} #single-lands-page .tatemasa .outline .outline05 .program-outline .txt {width:420px; margin-right: 30px;} #single-lands-page .tatemasa .outline .outline05 .program-outline p { } #single-lands-page .tatemasa .outline .outline05 .nobito {width:300px; position: relative;} #single-lands-page .tatemasa .outline .outline05 .nobito .pro {position: absolute; top:208px; left:167px;} #single-lands-page .tatemasa .outline .outline05 .nobito figcaption {background: #fff; padding:15px 0;} #single-lands-page .tatemasa .outline .outline05 .nobito figcaption span {color: #000; font-size: 1.2rem; display: block; text-align: center; margin-bottom: 25px; background: url(../img/tatemasa/dotline.png) no-repeat center bottom;} #single-lands-page .tatemasa .outline .outline05 .nobito figcaption img {margin:0 auto; } #single-lands-page .tatemasa .outline .outline05 .nobito figcaption a {color: #000; display: block; text-align: center; } #single-lands-page .tatemasa .outline .outline05 .tb {display: none;} #single-lands-page .tatemasa .outline .outline05 .program {width: 980px; margin: 0 auto; flex-wrap: nowrap; text-align: center;} #single-lands-page .tatemasa .outline .outline05 .program img.program_menu {margin:0 auto 50px auto;} #single-lands-page .tatemasa .outline .outline05 .program ul {flex-wrap: nowrap;} #single-lands-page .tatemasa .outline .outline05 .program ul li {width:32%; display: inline-flex; flex-wrap: wrap;} #single-lands-page .tatemasa .outline .outline05 .program ul li figure {width: 100%;} #single-lands-page .tatemasa .outline .outline05 .program ul li figcaption {width: 100%; text-align: center; margin-bottom: 30px;} @media screen and (min-width: 768px) and (max-width: 1024px) { #single-lands .price table, #single-lands .about table {width: 100%; min-width: 100%;} #single-lands .price table th, #single-lands .price table td, #single-lands .about table th, #single-lands .about table td {font-size: 1rem;} #single-lands .parcel-photo ul {margin-bottom: -30px;} #single-lands .parcel-photo ul li {width: calc((100% - 30px) / 2); margin: 0 30px 30px 0;} #single-lands .facilities ul {margin-bottom: -20px;} #single-lands .facilities ul li {width: calc((100% - 40px) / 3); height: 20vw; max-height: 300px; margin: 0 20px 20px 0;} } @media screen and (min-width: 1560px) { #single-lands .parcel-photo ul li {width: calc((100% - 80px) / 3);} #single-lands .parcel-photo ul li:nth-child(even) {margin-right: 40px;} #single-lands .parcel-photo ul li:nth-child(3n) {margin-right: 0;} #single-lands .facilities ul li {position: relative; width: calc((100% - 90px) / 4);} #single-lands .facilities ul li:nth-child(3n) {margin-right: 30px;} #single-lands .facilities ul li:nth-child(4n) {margin-right: 0;} } @media screen and (min-width: 1700px) { #single-lands h2 span:before {left: calc( -1 * ((100vw - 1700px) / 2)); width: calc(100% + (100vw - 1700px) / 2);} } @media screen and (min-width: 768px) and (max-width: 1090px) { #single-lands-page .tatemasa .outline .outline01 .txt {margin-bottom: 30px; width: 100%;} #single-lands-page .tatemasa .outline .outline01 .img01, #single-lands-page .tatemasa .outline .outline01 .img02 {margin-bottom: 20px; width: 100%;} #single-lands-page .tatemasa .outline .outline01 .img01 figure, #single-lands-page .tatemasa .outline .outline01 .img02 figure {position: relative; width: 100%;} #single-lands-page .tatemasa .outline .outline01 .img01 figure img, #single-lands-page .tatemasa .outline .outline01 .img02 figure img {width: 100%} #single-lands-page .tatemasa .outline .outline01 .img01 figure figcaption, #single-lands-page .tatemasa .outline .outline01 .img02 figure figcaption {position: absolute;} #single-lands-page .tatemasa .outline .outline01 .img01 figure figcaption, #single-lands-page .tatemasa .outline .outline01 .img02 figure figcaption {top: 10px; left: 20px; color: #fff;} #single-lands-page .tatemasa .outline .outline01 .img03 {display: none;} #single-lands-page .tatemasa .outline .outline02 {flex-wrap: wrap;} #single-lands-page .tatemasa .outline .outline02 .txt {margin-bottom: 30px; width: 100%; padding-top: 0;} #single-lands-page .tatemasa .outline .outline02 .img01 {width:100%;} #single-lands-page .tatemasa .outline .outline02 .img01 img {margin:0 auto;} #single-lands-page .tatemasa .outline .outline03 {flex-wrap: wrap;} #single-lands-page .tatemasa .outline .outline03 .txt {margin-bottom: 30px; width: 100%;} #single-lands-page .tatemasa .outline .outline03 .img01 {width:100%; margin-left:0;} #single-lands-page .tatemasa .outline .outline03 .img01 img {margin:0 auto;} #single-lands-page .tatemasa .outline .outline04 .txt {margin-bottom: 30px; width: 100%;} #single-lands-page .tatemasa .outline .outline04 .img01, #single-lands-page .tatemasa .outline .outline04 .img02, #single-lands-page .tatemasa .outline .outline04 .img03, #single-lands-page .tatemasa .outline .outline04 .img04 {display: none;} #single-lands-page .tatemasa .outline .outline04 img.tb {display: block; margin:0 auto;} #single-lands-page .tatemasa .outline .outline05 .program-outline {margin-bottom: 25px;} #single-lands-page .tatemasa .outline .outline05 .program-outline .txt {margin:0 auto 30px; width: 100%;} #single-lands-page .tatemasa .outline .nobito.pc {display: none;} #single-lands-page .tatemasa .outline .outline05 .tb {display: block; margin:0 auto;} #single-lands-page .tatemasa .outline .outline05 .program {width:80%; margin: 0 auto;} #single-lands-page .tatemasa .outline .outline05 .program ul li {width:48%;} #single-lands-page .tatemasa .outline .outline05 .program ul li img { margin:0 auto; } #single-lands-page .tatemasa .outline .outline01, #single-lands-page .tatemasa .outline .outline02, #single-lands-page .tatemasa .outline .outline03, #single-lands-page .tatemasa .outline .outline04 { margin-bottom: 50px; margin-top: 0;} } /*-------------------------------------------------------------------------- 分譲地一覧 --------------------------------------------------------------------------*/ #archive-lands .back {margin: -25px 0 100px;} /*-------------------------------------------------------------------------- 404 --------------------------------------------------------------------------*/ #notfound .g-h span.big {font-size: 2rem;}