@charset "UTF-8";

/* 共通 */
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-style: normal;
}

html {
    font-size: 20px;
}

#wrap {
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 10px 25px 0 rgb(189 203 210);
    color: #fff;
    background: #1e1e1e;
    overflow: hidden;
}

.inner {
    width: 1100px;
    margin: 0 auto;
}

img {
    width: auto;
    max-width: 100%;
    vertical-align: bottom;
}

a {
    transition: 0.1s;
    text-decoration: none;
    color: #fff;
}

a:hover {
    opacity: 0.8;
    transition: 0.3s;
}

p {
    font-size: 1.1rem;
    line-height: 1.818;
}

h2 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

h2::after {
    content: "";
    display: block;
    width: 9rem;
    height: 2px;
    background: #bca688;
    margin: 0.75em auto 0;
}

.din {
    font-family: din-2014, sans-serif;
    font-weight: 900;
    font-size: 110%;
}

.garamo {
    font-family: adobe-garamond-pro, serif;
    font-weight: 400;
    letter-spacing: initial;
}

.flex {
    display: flex;
    justify-content: space-between;
}

/* ヘッダー */
header {
    background: #171717;
    position: fixed;
    width: 1200px;
    z-index: 99;
}

header .inner {
    align-items: center;
    min-height: 5rem;
}

header h1 img {
    width: 8.55rem;
}

header a img {
    width: 17.1rem;
}

/* KV */
.kv {
    position: relative;
    margin-top: 5rem;
    z-index: 10;
}

.kv .container {
    position: absolute;
    left: 50%;
    bottom: 27.5%;
    transform: translateX(-50%);
}

.kv .container p {
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

/* メリデメ */
.merideme h2 {
    padding: 2.8rem 0 3.5rem;
}

.merideme h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 1% 0;
}

.merideme ul {
    background: #000;
    padding: 6% 6% 6% 14%;
}

.merideme ul li {
    font-size: 1.2rem;
    line-height: 1.25;
    position: relative;
}

.merideme ul li::before {
    content: "";
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    background: url("../img/check_icn.png") no-repeat center;
    background-size: contain;
    position: absolute;
    left: -1.8em;
    top: -2px;
}

.merideme ul li:not(:last-child) {
    margin-bottom: 1.25em;
}

.merit, .demerit {
    width: 47.27%;
}

.merit h3 {
    background: #6d2222;
}

.demerit {
    display: flex;
    flex-direction: column;
}

.demerit h3 {
    background: #3a547f;
}

.demerit ul {
    flex-grow: 1;
    padding-top: 8%;
}

.merideme .inner::after {
    content: "";
    display: block;
    width: 1.65rem;
    height: 3.6rem;
    background: url("../img/arrow_next.png") no-repeat center;
    background-size: contain;
    margin: 2rem auto 1.4rem;
}

/* ポイント */
.point {
    background: url("../img/point_bg.jpg") no-repeat center;
    background-size: cover;
    text-align: center;
    padding: 6% 0 2.67%;
}

.point h2 {
    font-size: 2.25rem;
}

.point .flex picture {
    width: 32.727%;
}

.point p {
    margin: 2em 0;
}

/* 特徴 */
.features {
    padding: 7.5% 0 4%;
}

.features h2 {
    margin-bottom: 2.8rem;
}

.features ul {
    flex-wrap: wrap;
}

.features li {
    width: calc(100% / 3);
    text-align: center;
    margin-bottom: 3em;
}

.features li p {
    line-height: 1.458;
}

.features li span {
    display: block;
    font-weight: 500;
}

.features li img {
    width: 5.8rem;
    height: 5.8rem;
    margin-bottom: 1.8em;
}

/* CTA */
.cta {
    position: relative;
}

.cta .container {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
}

.cta p {
    font-size: 2rem;
    font-weight: 500;
}

.cta p span {
    display: block;
    font-size: 1.2rem;
    font-weight: inherit;
    margin: 0.9em 0 1.2em;
}

/* レイアウト提案 */
.layout h2 {
    margin: 2.5em 0 3.4rem;
}
.layout .flex {
    flex-wrap: wrap;
}

.layout .flex .item {
    width: 48.18%;
    text-align: center;
}

.layout h3 {
    color: #bca688;
    font-size: 3rem;
    margin: 0.56em 0 0.25em;
}

.layout h3 span {
    display: block;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.layout .item {
    margin-bottom: 3.4rem;
}

.layout .item li {
    display: inline-block;
    color: #b7b7b7;
    padding: 0.2em 0;
    min-width: 6rem;
    border: 1px solid #b7b7b7;
    border-radius: 0.5rem;
    letter-spacing: initial;
}

.layout .item ul li:first-child {
    margin-right: 0.56rem;
}

.layout .item:last-of-type li:first-of-type {
    padding: 0.2em 1em;
}

.layout .item p {
    line-height: 1.75;
    margin: 1.25em 0;
}

.layout .item a {
    font-size: 1.1rem;
    display: inline-block;
    text-align: center;
    width: 15.15rem;
    line-height: 3.15rem;
    color: #000;
    background: #a1a1a1;
}

.layout {
    padding-bottom: 0.75rem;
}

/* ラインナップ */
.line_up h2 {
    margin: 3em 0 1.5em;
}

.luxury .taste_ttl, .elegant .taste_ttl {
    align-items: center;
    margin-bottom: 1.3rem;
}

.modern .taste_ttl, .casual .taste_ttl {
    align-items: baseline;
}

.line_up .taste_ttl h3 {
    color: #bca688;
    font-size: 6rem;
    letter-spacing: -0.01em;
}

.line_up .taste_ttl img {
    width: auto;
}

.line_up ul.flex {
    flex-wrap: wrap;
}

.line_up .main_img {
    display: block;
    margin-bottom: 3.05rem;
}

.line_up ul.flex li {
    width: 22.727%;
}

.line_up ul.flex li p {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.4583;
    margin-top: 0.6em;
}

.line_up .inner > div {
    margin-bottom: 6rem;
}

.line_up .inner > div.casual {
    margin-bottom: 5.6rem;
}

.line_up img.frau {
    width: 10.55rem;
}

.line_up img.kokuyo {
    width: 17rem;
}

.line_up img.vitra {
    width: 8.35rem;
}

.elegant ul.flex li:last-child {
    width: 48.36%;
}

/* 資料請求 */
.for_details {
    text-align: center;
    position: relative;
}

.for_details .container {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 13%;
    transform: translateX(-50%);
}

.for_details p {
    font-size: 0.9rem;
    line-height: 1.94;
    margin-bottom: 1em;
}

.for_details li {
    display: inline-block;
}

.for_details a {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 3.5rem;
    position: relative;
}

.for_details .estimate {
    background: #4a4a4a;
    width: 17.5rem;
    margin-right: 7.5px;
}

.for_details .estimate::after {
    background: url("../img/arrow_r_wh.png") no-repeat center;
}

.for_details .request {
    color: #000;
    background: #fff;
    width: 13.5rem;
}

.for_details .request::after {
    background: url("../img/arrow_r_bl.png") no-repeat center;
}

.for_details .estimate::after, .for_details .request::after {
    content: "";
    width: 0.8rem;
    height: 1.2rem;
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
}

/* フッター */
footer {
    text-align: center;
    color: #fff;
    background: #000;
    padding: 4.1% 0 7.1%;
}

footer p {
    font-size: 0.7rem;
}

footer a {
    font-size: 0.7rem;
    color: #fff;
    text-decoration: underline;
    display: inline-block;
    margin-bottom: 4.57em;
}

.is_sp {
    display: none;
}

/* レスポンシブ */
@media screen and (max-width: 1199px) {
    #wrap {
        max-width: 100%;
    }

    .inner {
        width: inherit;
        padding: 0 4.16667%;
    }

    html {
        font-size: 1.667vw;
    }

    header {
        width: 96%;
        padding: 0 2%;
    }

    header .inner {
        padding: 0;
    }
}

@media screen and (max-width: 750px) {
    .is_pc {
        display: none;
    }

    .is_sp {
        display: block;
    }

    html {
        font-size: 2.667vw;
    }

    .inner {
        padding: 0 2.6667%;
    }

    h2 {
        letter-spacing: 0.01em;
    }

    p {
        font-size: 1.2rem;
    }

    .kv .container {
        width: 100%;
        text-align: center;
        bottom: 25.67%;
    }

    .kv a img {
        width: 25rem;
    }

    .merideme h2 {
        font-size: 2.4rem;
        letter-spacing: 0.01em;
        padding: 4rem 0 3.5rem;
    }

    .merideme .flex.container {
        flex-direction: column;
    }

    .merit, .demerit {
        width: 100%;
    }

    .merideme ul {
        padding: 5% 6% 4.3% 20%;
    }

    .merideme ul li {
        font-size: 1.4rem;
    }

    .merideme ul li::before {
        left: -2.7em;
        top: 50%;
        transform: translateY(-50%);
    }

    .merit {
        margin-bottom: 2rem;
    }

    .demerit ul {
        padding: 6% 6% 6% 20%;
    }

    .point {
        padding: 10% 0 6%;
    }

    .point h2 {
        font-size: 2rem;
    }

    .point p {
        line-height: 1.4583;
    }

    .point .flex.container {
        flex-direction: column;
    }

    .point .flex picture {
        width: 100%;
        margin-bottom: 2.1rem;
    }

    .features {
        padding: 12% 0 0;
    }

    .features li {
        width: 50%;
        margin-bottom: 4.5em;
    }

    .cta > img {
        height: 19.6rem;
        width: 100%;
        object-fit: cover;
    }

    .cta .container {
        width: 100%;
    }

    .cta .container img {
        width: 26.85rem;
    }

    .layout h2 {
        font-size: 2.25rem;
    }

    .layout .flex {
        flex-direction: column;
    }

    .layout .flex .item {
        width: 100%;
    }

    .layout .flex .item img {
        width: 74.647%;
    }

    .line_up h2 {
        font-size: 2.25rem;
    }

    .layout .item p {
        line-height: 1.4583;
        margin: 1.9em 0;
    }

    .taste_ttl.flex {
        flex-direction: column;
        align-items: center;
    }

    .line_up .taste_ttl h3 {
        margin-bottom: 1rem;
    }

    .luxury .taste_ttl {
        margin-bottom: 3.5rem;
    }

    .modern .taste_ttl {
        margin-bottom: 3.8rem;
    }

    .casual .taste_ttl {
        margin-bottom: 2.2rem;
    }

    .elegant .taste_ttl {
        margin-bottom: 2.6rem;
    }

    .line_up ul.flex {
        width: 75.6338%;
        margin: 0 auto;
    }

    .line_up ul.flex li {
        width: 12.5rem;
        margin-bottom: 1.67rem;
    }

    .elegant ul.flex li:last-child {
        width: 100%;
        margin-bottom: 0;
    }

    .for_details > img {
        height: 14.8rem;
        width: 100%;
        object-fit: cover;
    }

    footer {
        padding: 6% 0 11.8%;
    }
}