@charset "UTF-8";

/*==============================================================
紹介
==============================================================*/
.intro {
    margin-bottom: 9%;
}

.intro > p.image {
    margin-bottom: 9%;
}

.intro > p.image > img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

.intro > h2 {
    margin-bottom: 50px;
    font-size: 25px;
    text-align: center;
    letter-spacing: 3px;
}

.intro > p.copy_1 {
    margin-bottom: 10%;
    text-align: center;
    line-height: 3;
    letter-spacing: 3px;
}

.intro > ul {
    width: 100%;
    margin: 0 auto;
}

.intro > ul > li {
    width: 50%;
    float: left;
}

.intro > ul > li > img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

@media screen and (max-width:1024px) {

    .intro > h2 {
        margin-bottom: 40px;
        font-size: 24px;
    }

    .intro > p.copy_1 {
        font-size: 15px;
        line-height: 2.4;
    }

}

@media screen and (max-width:896px) {

    .intro > h2 {
        margin-bottom: 33px;
        font-size: 21px;
    }

    .intro > ul > li > img {
        height: 270px;
    }

}

@media screen and (max-width:480px) {

    .intro {
        margin-bottom: 12%;
    }

    .intro > p.image {
        margin-bottom: 14%;
    }

    .intro > p.image > img {
        height: 180px;
    }

    .intro > h2 {
        margin-bottom: 30px;
        font-size: 20px;
    }

    .intro > p.copy_1 {
        line-height: 2.1;
        text-align: justify;
    }

    .intro > p.copy_1 > br {
        display: none;
    }

    .intro > ul > li > img {
        height: 180px;
    }

}

/*==============================================================
理由
==============================================================*/
.reason {
    margin-bottom: 9%;
}

.reason > h2 {
    margin-bottom: 39px;
    font-size: 25px;
    text-align: center;
    letter-spacing: 3px;
}

.reason > p {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 4.5%;
    line-height: 2.7;
    letter-spacing: 2px;
}

.reason > div {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 9%;
}

.reason > div > p {
    width: 42%;
    float: left;
}

.reason > div > p:first-child {
    margin-right: 16%;
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:896px) {

    .reason > h2 {
        margin-bottom: 30px;
        font-size: 21px;
    }

    .reason > div {
        max-width: 390px;
        margin: 0 auto 10%;
    }

    .reason > div {
        max-width: 100%;
        margin: 0 auto 15%;
    }

    .reason > div > p {
        width: 47%;
    }

    .reason > div > p:first-child {
        margin-right: 6%;
    }

}

@media screen and (max-width:480px) {

    .reason > p {
        margin: 0 auto 9%;
        line-height: 2.1;
        letter-spacing: 1px;
    }

}

/*==============================================================
インソール
==============================================================*/
.insole {
    margin-bottom: 75px;
}

.insole h2 {
    padding: 30px 0;
    border-top: 1px solid rgb(210, 210, 210);
    border-bottom: 1px solid rgb(210, 210, 210);
    margin-bottom: 75px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 3px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.insole > ul {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.insole > ul > li {
    width: 27%;
    margin-right: 9.5%;
    float: left;
}

.insole > ul > li:nth-child(3) {
    margin-right: 0;
}

.insole > ul > li > p {
    margin-bottom: 6%;
}

.insole > ul > li > h3 {
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "游ゴシック", YuGothic, Arial, "メイリオ", Meiryo, "MS Pゴシック", 'MS PGothic', arial, helvetica, sans-serif;
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:896px) {}

@media screen and (max-width:480px) {

    .insole {
        margin-bottom: 45px;
    }

    .insole h2 {
        padding: 20px 0;
        margin-bottom: 25px;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .insole > ul > li {
        width: 31%;
        margin-right: 3.5%;
    }

    .insole > ul > li > p {
        margin-bottom: 15px;
    }

    .insole > ul > li > h3 {
        font-size: 11px;
        line-height: 1.5;
    }

}

/*==============================================================
デザイン
==============================================================*/
.design {
    margin-bottom: 9%;
}

.design h2 {
    padding: 30px 0;
    border-top: 1px solid rgb(210, 210, 210);
    border-bottom: 1px solid rgb(210, 210, 210);
    margin-bottom: 75px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 3px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.design > ul {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.design > ul > li {
    width: 27%;
    margin-right: 9.5%;
    float: left;
}

.design > ul > li:nth-child(3) {
    margin-right: 0;
}

.design > ul > li > a {
    margin-bottom: 6%;
    display: block;
}

.design > ul > li > a:hover {
    opacity: 0.8;
}

.design > ul > li > h3 {
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "游ゴシック", YuGothic, Arial, "メイリオ", Meiryo, "MS Pゴシック", 'MS PGothic', arial, helvetica, sans-serif;
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:896px) {}

@media screen and (max-width:480px) {

    .design {
        margin-bottom: 45px;
    }

    .design h2 {
        padding: 20px 0;
        margin-bottom: 25px;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 1.6;
    }

    .design > ul > li {
        width: 31%;
        margin-right: 3.5%;
    }

    .design > ul > li > p {
        margin-bottom: 15px;
    }

    .design > ul > li > h3 {
        font-size: 11px;
        line-height: 1.4;
    }

}

/*==============================================================
採寸風景
==============================================================*/
.measurement {
    margin-bottom: 12%;
}

.measurement > h2 {
    margin-bottom: 6%;
    font-size: 27px;
    text-align: center;
    line-height: 1;
    letter-spacing: 3px;
}

.measurement > ul li {
    width: 22%;
    margin-right: 4%;
    float: left;
}

.measurement > ul li:nth-child(4) {
    margin-right: 0;
}

.measurement > ul li > h3 {
    margin-bottom: 6%;
}

.measurement > ul li > p {
    font-size: 12px;
    letter-spacing: 3px;
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:896px) {

    .measurement > ul li > p {
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1.9;
    }

}

@media screen and (max-width:480px) {

    .measurement > h2 {
        margin-bottom: 9%;
        font-size: 24px;
        letter-spacing: 2px;
    }

    .measurement > ul li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        float: none;
    }

    .measurement > ul li:last-child {
        margin-bottom: 0;
    }

    .measurement > ul li > h3 {
        margin-bottom: 8.7%;
    }

    .measurement > ul li > p {
        font-size: 14px;
        line-height: 1.9;
    }

}

/*==============================================================
オーダーシート
==============================================================*/
.attraction {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 12%;
}

.attraction > p {
    width: 30%;
    margin-right: 6%;
    float: left;
}

.attraction > div {
    width: 63%;
    float: right;
}

.attraction > div > h2 {
    margin-bottom: 40px;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 2px;
}

.attraction > div > p {
    font-size: 17px;
    line-height: 2.1;
    letter-spacing: 2px;
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:896px) {

    .attraction > div > h2 {
        margin-bottom: 21px;
        font-size: 18px;
        letter-spacing: 1px;
    }

    .attraction > div > p {
        font-size: 15px;
        line-height: 2.1;
        letter-spacing: 1px;
    }

}

@media screen and (max-width:480px) {

    .attraction {
        margin: 0 auto 15%;
    }

    .attraction > p {
        width: 100%;
        margin-right: 0;
        margin-bottom: 45px;
        float: none;
    }

    .attraction > div {
        width: 100%;
        float: none;
    }

    .attraction > div > h2 {
        margin-bottom: 30px;
        font-size: 21px;
        line-height: 2;
        text-align: center;
    }

}

/*==============================================================
工程
==============================================================*/
#flow {
    margin-bottom: 9%;
}

#flow > h2 {
    margin-bottom: 6%;
    font-size: 27px;
    text-align: center;
    line-height: 1;
    letter-spacing: 3px;
}

#flow > ul {
    display: flex;
    flex-wrap: wrap;
}

#flow > ul > li {
    width: 23.5%;
    padding: 12px 12px 24px;
    margin-right: 2%;
    margin-bottom: 2%;
    background-color: #fff;
    box-sizing: border-box;
}

#flow > ul > li:nth-child(4n) {
    margin-right: 0;
}

#flow > ul > li > p {
    margin-bottom: 12px;
}

#flow > ul > li > dl {
    color: #000;
}

#flow > ul > li > dl > dt {
    margin-bottom: 5px;
    font-size: 16px;
    text-align: center;
}

#flow > ul > li > dl > dd {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: justify;
}

@media screen and (max-width:1024px) {

    #flow > ul > li > p {
        margin-bottom: 9px;
    }

    #flow > ul > li > dl > dt {
        margin-bottom: 4px;
        font-size: 15px;
    }

    #flow > ul > li > dl > dd {
        line-height: 1.6;
    }

}

@media screen and (max-width:896px) {

    #flow > ul > li,
    #flow > ul > li:nth-child(4n) {
        width: 48%;
        padding: 18px 18px 30px;
        margin-right: 4%;
        margin-bottom: 4%;
    }

    #flow > ul > li:nth-child(2n) {
        margin-right: 0;
    }

}

@media screen and (max-width:480px) {

    #flow {
        padding-bottom: 45px;
        border-bottom: 1px solid #fff;
        margin-bottom: 45px;
    }

    #flow > h2 {
        margin-bottom: 9%;
        font-size: 24px;
        letter-spacing: 2px;
    }

    #flow > ul > li,
    #flow > ul > li:nth-child(4n) {
        width: 100%;
        padding: 20px 20px 30px;
        margin-right: 0;
        margin-bottom: 6%;
    }

    #flow > ul > li:last-child {
        margin-bottom: 0;
    }

    #flow > ul > li > p {
        margin-bottom: 15px;
    }

    #flow > ul > li > dl > dt {
        margin-bottom: 6px;
        font-size: 18px;
    }

    #flow > ul > li > dl > dd {
        font-size: 14px;
        line-height: 1.8;
    }

}

/*==============================================================
お客様の声
==============================================================*/
.comment {
    width: 100%;
    max-width: 750px;
    padding: 60px 55px 60px;
    margin: 0 auto;
    background-color: #fff;
    box-sizing: border-box;
}

.comment > div:nth-child(1) {
    margin-bottom: 45px;
    color: #000;
}

.comment > div:nth-child(1) > h2 {
    padding-bottom: 12px;
    border-bottom: 1px solid #3c3c3c;
    margin-bottom: 24px;
    font-size: 24px;
}

.comment > div:nth-child(1) > p {
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 1px;
}

.comment > div:nth-child(2) {
    padding: 40px 45px 45px;
    border: 1px solid rgb(90, 90, 90);
    border-radius: 5px;
    color: #000;
}

.comment > div:nth-child(2) > h2 {
    margin-bottom: 18px;
    font-size: 18px;
}

.comment > div:nth-child(2) > p {
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 1px;
}

@media screen and (max-width:1024px) {

    .comment {
        max-width: 100%;
        padding: 65px 60px 65px;
    }

    .comment > div:nth-child(1) > p {
        font-size: 15px;
        line-height: 1.9;
    }

}

@media screen and (max-width:896px) {}

@media screen and (max-width:480px) {

    .comment {
        padding: 30px 25px;
    }

    .comment > div:nth-child(1) > h2 {
        padding-bottom: 15px;
        margin-bottom: 21px;
        font-size: 21px;
        text-align: center;
    }

    .comment > div:nth-child(1) > p {
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 1px;
    }

    .comment > div:nth-child(2) {
        padding: 30px 25px;
    }

    .comment > div:nth-child(2) > h2 {
        margin-bottom: 12px;
        font-size: 17px;
    }

    .comment > div:nth-child(2) > p {
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 1px;
    }

}