@charset "utf-8";

@media only screen and (min-width: 0px) and (max-width: 750px) {

/* ────────────────────── *
 *                                              *
 * コンテンツ                                   *
 *                                              *
 * ────────────────────── */

.contents {
    background: url("../../image/common/bg-border.png") repeat left top / 0.9rem auto;
    padding-top: 12.0rem;
    padding-bottom: 2.0rem;
}
.contents .inner {
    width: 72.0rem;
}
.contents h2 {
    width: 48.4rem;
    margin: 0 auto 4.0rem;
}
.contents p.subtitle {
    font-size: 4.8rem;
    line-height: 1.3;
    margin: 0 auto 5.0rem;
}

/* ────────────────────── *
 *                                              *
 * エレベーション                               *
 *                                              *
 * ────────────────────── */

.contents .inner #elevation {
    margin: 0 auto 11.0rem;
}

/* ────────────────────── *
 *                                              *
 * 建物内モデルルーム                           *
 *                                              *
 * ────────────────────── */

.contents .inner #modelroom {
    margin: 0 auto 9.0rem;
}
.contents .inner #modelroom ul li {
    width: 32.2rem;
}
.contents .inner #modelroom ul li span {
    height: 1.4rem;
    border: 0.2rem solid #fff;
}
.contents .inner #modelroom ul li:nth-child(1) {
    left: 2.6rem;
    top: 15.0rem;
}
.contents .inner #modelroom ul li:nth-child(1) span {
    width: 3.6rem;
    left: 16.5rem;
    top: 25.0rem;
}
.contents .inner #modelroom ul li:nth-child(2) {
    right: 2.6rem;
    top: 15.0rem;
}
.contents .inner #modelroom ul li:nth-child(2) span {
    width: 3.4rem;
    left: -11.2rem;
    top: 25.0rem;
}
.contents .inner #modelroom ul li:nth-child(3) {
    left: 2.6rem;
    bottom: 2.6rem;
}
.contents .inner #modelroom ul li:nth-child(3) span {
    width: 3.0rem;
    right: 2.2rem;
    top: -10.3rem;
}
.contents .inner #modelroom ul li:nth-child(4) {
    right: 2.6rem;
    bottom: 2.6rem;
}
.contents .inner #modelroom ul li:nth-child(4) span {
    width: 3.0rem;
    left: 4.2rem;
    top: -13.4rem;
}

/* ────────────────────── *
 *                                              *
 * セレクト                                     *
 *                                              *
 * ────────────────────── */

.contents .inner #select {
    padding: 2.0rem 3.0rem 3.0rem;
    margin: 0 auto 8.0rem;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
}
.contents .inner #select h3 {
    font-size: 3.2rem;
    margin: 0 auto 1.5rem;
}
.contents .inner #select ul {
    text-align: center;
    margin: 0 auto 1.0rem;
    display: block;
}
.contents .inner #select ul li:first-child {
    margin-bottom: 1.0rem;
}
.contents .inner #select p {
    font-size: 10px;
    line-height: 1;
    text-align: right;
}

/* ────────────────────── *
 *                                              *
 * ウゴクロ                                     *
 *                                              *
 * ────────────────────── */

.contents .inner p#ugoclo {
    margin: 0 auto 11.0rem;
}
.contents .inner p#ugoclo img {
    -webkit-filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0,0,0, 0.2));
}

/* ────────────────────── *
 *                                              *
 * 一覧                                         *
 *                                              *
 * ────────────────────── */

.contents .inner #list ul {
    text-align: center;
    margin: 0 auto 7.0rem;
}
.contents .inner #list ul li {
    width: 35.0rem;
    margin-bottom: 2.0rem;
}
.contents .inner #list ul li .icon {
    width: 12.0rem;
    bottom: 0.2rem;
}

/* SVG */
.contents svg.bg#bg-01 {
    height: 12.8rem;
}
.contents svg.bg#bg-02 {
    height: 72.0rem;
    top: -16.0rem;
}
.contents svg.bg#bg-03 {
    height: 43.6rem;
}

.contents p.caption {
    font-size: 2.0rem;
    padding: 0 1.5rem;
    text-align: justify;
    text-justify: inter-ideograph;
}

/* ────────────────────── *
 *                                              *
 * ポップアップヘッダー                         *
 *                                              *
 * ────────────────────── */

body#popup {
    padding: 0;
}
#popup-header {
    background: url("../../image/common/bg-border.png") repeat left top / 0.9rem auto, url("../../plan/image/popup/bg-contents.png") no-repeat center center / cover;
    padding: 5.0rem 0 2.0rem;
}
#popup-header .inner h1 {
    padding: 3.0rem 0;
}
#popup-header .inner h1 img {
    width: 72.0rem;
    margin: 0 auto;
}

/* ────────────────────── *
 *                                              *
 * ポップアップコンテンツ                       *
 *                                              *
 * ────────────────────── */

#popup-contents {
    width: 72.0rem;
    padding-bottom: 4.0rem;
}
#popup-contents p#layout {
    margin: 0 auto 4.0rem;
}
#popup-contents ul#icons {
    margin: 0 auto 1.0rem;
}
#popup-contents ul#icons li {
    margin-right: 1.5rem;
    margin-bottom: 1.0rem;
}
#popup-contents ul#icons li span:last-of-type {
    margin-left: 5px;
}
#popup-contents p.notice {
    margin-bottom: 2.0rem;
}
#popup-contents p#border {
    margin-bottom: 4.0rem;
}
#popup-contents ul#btn {
    display: block;
}
#popup-contents ul#btn li {
    margin: 0 0 2.0rem;
}

}

@media only screen and (min-width: 0px) and (max-width: 414px) {

.contents .inner p.image span.caption {
    width: 100%;
    transform: scale(0.8);
    transform-origin: right top;
}

.contents p.caption {
    width: 125%;
    transform: scale(0.8);
    transform-origin: left bottom;
    box-sizing: border-box;
}

}