@charset "utf-8";

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

/* ────────────────────── *
 *                                              *
 * 見出し                                       *
 *                                              *
 * ────────────────────── */

.contents h2 {
    font-size: 3.1746031746031744vw;
    padding: 2.083333333333333%;
}

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

.contents #elevation {
    padding: 4.166666666666666%;
}
.contents #elevation .inner h3 {
    font-size: 2.2222222222222223vw;
    margin: 0 auto 6.097560975609756%;
}
.contents #type {
    margin: 0 auto 10%;
}

}

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

/* ────────────────────── *
 *                                              *
 * ポップアップ                                 *
 *                                              *
 * ────────────────────── */

header#popup-header {
    padding: 7.222222222222221% 0 5%;
}
header#popup-header h1 {
    background: url(../../plan/image/popup/bg-h1.png) repeat-x bottom center / auto 0.6666666666666667vw;
}
header#popup-header h1 span {
    background: url(../../plan/image/popup/bg-h1-span.png) no-repeat bottom center / auto 0.6666666666666667vw;
}
.contents #plan-detail {
    width: 100%;
}
.contents #plan-detail #description {
    width: 91.11111111111111%;
}

}

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

/* ────────────────────── *
 *                                              *
 * メインビジュアル                             *
 *                                              *
 * ────────────────────── */

#mainvisual {
    overflow: hidden;
}
#mainvisual img {
    width: 150%;
    margin-left: -25%;
}

.contents {
    width: 60.0rem;
    padding: 10.0rem 0 0;
    margin: 0 auto 8.0rem;
}

/* ────────────────────── *
 *                                              *
 * 特徴                                         *
 *                                              *
 * ────────────────────── */

.contents #character {
    display: block;
    width: 59.0rem;
    margin: 0 auto 8.0rem;
}
.contents #character dl {
    width: 100%;
    margin-bottom: 6.0rem;
}
.contents #character dl dt {
    margin-bottom: 1.0rem;
}
.contents #character dl dd {
    font-size: 2.6rem;
}
.contents #character dl dd em {
    font-size: 3.6rem;
    padding-top: 1.0rem;
    margin-top: 1.0rem;
}

/* ────────────────────── *
 *                                              *
 * 見出し                                       *
 *                                              *
 * ────────────────────── */

.contents h2 {
    font-size: 2.8rem;
    padding: 1.2rem;
}
.contents h4 {
    font-size: 2.6rem;
    padding: 0.5rem;
    margin: 0 auto 10.0rem;
}
.contents h4 span {
    padding: 1.4rem 4.0rem;
}
.contents p.more {
    font-size: 2.2rem;
    margin: 0 auto 10.0rem;
}
.contents p.more a {
    padding: 1.5rem;
}

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

.contents #elevation {
    padding: 5.0rem 0;
}
.contents #elevation .inner {
    padding: 0 4.0rem;
    box-sizing: border-box;
}
.contents #elevation .inner h3 {
    font-size: 2.6rem;
    margin-bottom: 4.0rem;
}
.contents #elevation .inner .flexbox {
    display: block;
}
.contents #elevation .inner .flexbox .left {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}
.contents #elevation .inner .flexbox .right {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.contents #type {
    margin: 0 auto 6.0rem;
}
.contents p#gallery {
    width: 57.5rem;
    margin: 0 auto 6.0rem;
}

/* ────────────────────── *
 *                                              *
 * コンテンツ個別                               *
 *                                              *
 * ────────────────────── */

.contents #btn-plan {
    width: 60.0rem;
    margin: 0 auto;
}
.contents #btn-plan ul.type {
    margin-bottom: 0;
    display: block;
}
.contents #btn-plan ul.type li {
    width: 100%;
    max-width: 575px;
    margin: 0 auto 2.0rem;
}


/* ────────────────────── *
 *                                              *
 * ポップアップ                                 *
 *                                              *
 * ────────────────────── */

body#popup {
    padding: 0;
}
header#popup-header {
    padding: 3.0rem 2.0rem 5.0rem;
}
header#popup-header h1 {
    font-size: 0;
    background: url(../../plan/image/popup/bg-h1.png) repeat-x bottom center;
}
header#popup-header h1 span {
    background: none;
    padding-bottom: 4.0rem;
}
header#popup-header.executive h1 span:after {
    left: auto;
    right: 50%;
    bottom: -4.6875vw;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}
.contents #plan-detail {
    width: 56.0rem;
    padding-bottom: 4.0rem;
}
.contents #plan-detail > p img {
    width: 130%;
    max-width: none;
    margin-left: -15%;
}
.contents #plan-detail #description {
    font-size: 8px;
    width: auto;
}
.contents #plan-detail #description ul li {
    font-size: 10px;
    display: inline;
    margin-right: 10px;
}
.contents #plan-detail #description ul li:first-child {
    display: block;
    margin-bottom: 5px;
}
.contents #plan-detail #description p {
    line-height: 1.4;
}
.contents ul#btn-popup {
    padding: 20px 0;
}
.contents ul#btn-popup li {
    display: block;
    margin: 0 auto 10px;
}
.contents ul#btn-popup li:last-child {
    margin: 0 auto;
}

}