@charset "utf-8";

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

/* ────────────────────── *
 *                                              *
 * ページネーション                             *
 *                                              *
 * ────────────────────── */

.contents ul#pagination {
    margin: 0 auto 11.666666666666666%;
}

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

.contents h2 {
    margin: 0 auto 5.833333333333333%;
}
.contents h3 {
    margin: 0 auto 1.25%;
}
.contents p.section-copy {
    margin: 0 auto 4.166666666666666%;
}

/* ────────────────────── *
 *                                              *
 * セキュリティ                                 *
 *                                              *
 * ────────────────────── */


.contents #safety-24 {
    margin: 0 auto 5.833333333333333%;
}
.contents #safety-24 p {
    width: 22.083333333333332%;
}
.contents #safety-24 figure {
    width: 74.16666666666667%;
}

/* ────────────────────── *
 *                                              *
 * Flexbox                                      *
 *                                              *
 * ────────────────────── */

.contents .flexbox {
    margin: 0 auto 5.833333333333333%;
}
.contents .flexbox.end {
    margin: 0 auto 12.5%;
}
.contents .flexbox ul li {
    width: 21.833333333333332%;
}
.contents .flexbox ul.column3 li {
    width: 30.5%;
    margin-left: 4.25%;
}

}

@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 ul#pagination {
    margin: 0 auto 14.0rem;
    display: block;
}
.contents ul#pagination li {
    text-align: right;
    width: 100%;
}
.contents ul#pagination li:nth-child(1) {
    margin-bottom: 2.0rem;
}

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

.contents ul.character {
    margin: 0 auto 13.0rem;
   display: block;
}
.contents ul.character li {
    width: 100%;
    max-width: 38.5rem;
    margin: 0 auto 2.0rem;
}

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

.contents h2 {
    width: 100%;
    margin: 0 auto 5.0rem;
}
.contents h3 {
    padding: 0.5rem 0;
    margin: 0 auto 2.0rem;
}
.contents h3.subtitle-amenity {
    margin: 0 auto 4.0rem;
}
.contents h3 img,
.contents p#subtitle-all img {
    width: 42.0rem;
}
.contents h4 {
    font-size: 2.4rem;
    padding: 2.0rem 0;
}
.contents p.section-copy {
    font-size: 2.8rem;
    margin: 0 auto 5.0rem;
}
.contents p.txt {
    font-size: 2.4rem;
    margin: 0 auto 3.0rem;
}

/* ────────────────────── *
 *                                              *
 * 画像                                         *
 *                                              *
 * ────────────────────── */

.contents figure#triple {
    margin: 0 auto 5.0rem;
}
.contents figure#triple figcaption {
    padding-top: 1.0rem;
}

/* ────────────────────── *
 *                                              *
 * セキュリティ                                 *
 *                                              *
 * ────────────────────── */

.contents #security-key {
    padding: 3.0rem;
    margin: 0 auto 10px;
    display: block;
}
.contents #security-key p {
    text-align: center;
    width: 100%;
    margin-bottom: 3.0rem;
}
.contents #security-key dl {
    width: 100%;
}
.contents #security-key dl dt {
    font-size: 2.4rem;
    margin-bottom: 2.0rem;
}
.contents #security-key dl dd {
    font-size: 2.8rem;
    padding: 2.5rem 0;
}

.contents #iot {
    padding: 3.0rem;
    margin: 0 auto 100px;
}
.contents #iot p#icon-iot {
    width: 14.6rem;
    left: -1.0rem;
    top: 3.0rem;
    transform: none;
}
.contents #iot dl {
    display: block;
}
.contents #iot dl dt {
    font-size: 2.4rem;
    width: 100%;
    padding-left: 12.0rem;
    margin-bottom: 3.0rem;
    box-sizing: border-box;
}
.contents #iot dl dd {
    width: 100%;
    display: block;
}
.contents #iot dl dd ul {
    font-size: 2.6rem;
    width: 100%;
    margin-bottom: 2.0rem;
}
.contents #iot dl dd ul li {
    padding: 1.0rem;
}
.contents #iot dl dd p {
    width: 32.0rem;
    margin: 0 auto;
}
.contents #iot dl dd p img {
    width: 100%;
}

.contents #safety-24 {
    margin: 0 auto 7.0rem;
    display: block;
}
.contents #safety-24 p {
    font-size: 2.2rem;
    width: 100%;
    margin: 0 auto 3.0rem;
}
.contents #safety-24 figure {
    width: 100%;
}

.contents #emergency {
    padding: 3.0rem;
    margin: 0 auto 10.0rem;
    display: block;
}
.contents #emergency .flexitem {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4.0rem;
}
.contents #emergency .flexitem:nth-of-type(2) {
    margin-bottom: 0;
}
.contents #emergency .flexitem p {
    margin-bottom: 2.0rem;
}
.contents #emergency .flexitem:nth-of-type(2) p {
    width: 100%;
    height: auto;
    margin-bottom: -2.0rem;
}
.contents #emergency .flexitem dl dt {
    font-size: 2.8rem;
    padding-bottom: 1.0rem;
    margin-bottom: 1.0rem;
}
.contents #emergency .flexitem dl dd {
    font-size: 2.4rem;
}

/* ────────────────────── *
 *                                              *
 * Flexbox                                      *
 *                                              *
 * ────────────────────── */

.contents .flexbox {
    margin: 0 auto 5.0rem;
}
.contents .flexbox.end {
    margin: 0 auto 10.0rem;
}
.contents .flexbox ul li {
    width: 29.0rem;
    margin-top: 0;
    margin-bottom: 6.0rem;
}
.contents .flexbox ul.column3 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.contents .flexbox ul.column3 li {
    width: 29.0rem;
    margin-left: 0;
}
.contents .flexbox ul.column3 li:nth-child(3n+1) {
    margin-left: 0;
}
.contents .flexbox ul.column3 li:nth-child(n+4) {
    margin-top: 0;
}
.contents .flexbox ul li:nth-child(n+5) {
    margin-top: 2.0rem;
}
.contents .flexbox ul li img {
    width: 100%;
}
.contents .flexbox ul li dl dt {
    font-size: 2.6rem;
    margin: 0 auto 1.0rem;
}
.contents .flexbox ul li dl dt span.small {
    font-size: 10px;
}
.contents .flexbox ul li dl dd {
    font-size: 2.0rem;
}
.contents .flexbox ul li p {
    margin-bottom: 2.0rem;
}

}