@import url('https://use.typekit.net/fhl5gtw.css');

.unisize-guide img {
    width: 100%;
}

.l-container {
    width: 100%;
}

@media only screen and (min-width: 769px) {
    .unisize-guide .sp {
        display: none;
    }

    .unisize-guide {
        width: 100%;
        background-color: #F3F3F3;
    }

    .unisize-guide .mv {
        width: 100%;
        height: auto;
        padding: 10px 0 41px;
    }

    .unisize-guide .mv h2 {
        width: 1140px;
        height: auto;
        margin: 0 auto;
    }

    .unisize-guide .main-contents {
        width: 100%;
        text-align: center;
        background-color: #F4EBDC;
        padding-top: 43px;
    }

    .unisize-guide .lead {
        width: 1140px;
        height: auto;
        margin: 0 auto 91px;
        text-align: center;
        font: normal 400 16px/32px "Noto Sans JP", sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #5D564E;
        border-bottom: #707070 1px solid;
        padding-bottom: 32px;
    }

    .unisize-guide h3.heading {
        display: inline-block;
        padding: 9px 65px 12px;
        font: normal 700 32px/32px "Noto Sans JP", sans-serif;
        letter-spacing: calc(50/ 1000 * 1em);
        color: #fff;
        border-radius: 30px;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide h3.heading01 {
        background-color: #E69513;
        margin: 0 auto 65px;
    }
    .unisize-guide h3.heading02 {
        background-color: #D07C8C;
        padding: 9px 45px 12px;
        margin: 0 auto 79px;
    }
    .unisize-guide h3.heading03 {
        background-color: #7CA6D0;
        margin: 0 auto 60px;
        padding: 9px 35px 12px;
    }

    .unisize-guide .step-no {
        font: normal 400 80px/1 din-condensed, sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #758430;
        margin: 0 auto;
    }
    .unisize-guide .detail-blk {
        width: 1000px;
        margin: 61px auto 71px;
        padding-bottom: 80px;
        display: flex;
        border-bottom: 1px solid #707070;
    }
    .unisize-guide .detail-blk03 {
        margin-bottom: 138px;
    }
    .unisize-guide .detail-blk .detail-img {
        position: relative;
        margin: 0 0 0 45px;
        width: 325px;
    }
    .unisize-guide .detail-blk .detail-img img {
        width: 325px;
        position: relative;
        z-index: 10;
    }
    .unisize-guide .detail-blk .detail-img::before {
        content: "";
        display: block;
        position: absolute;
        top: 7px;
        left: -109px;
        z-index: 0;
        width: 540px;
        height: 540px;
        background-color: #FFFAD1;
        border-radius: 50%;
    }
    .unisize-guide .detail-blk.other-blk .detail-img::before {
        background-color: #FFD9E1;
    }
    .unisize-guide .detail-blk .detail-txt {
        position: relative;
        z-index: 10;
        text-align: left;
        margin: 87px 0 0 134px;
    }
    .unisize-guide .detail-blk .detail-txt h4.heading {
        font: normal 700 40px/60px "Noto Sans JP", sans-serif;
        letter-spacing: calc(10/ 1000 * 1em);
        color: #000000;
        margin: 0 0 35px 0;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .detail-blk .other-no {
        font: normal 400 60px/60px din-condensed, sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #758430;
        margin: 91px 10px 0 128px;
    }
    .unisize-guide .detail-blk .detail-txt .txt {
        font: normal 400 26px/36px "Noto Sans JP", sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #707070;
        margin: 0 0 38px 0;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .detail-blk .detail-txt .desc {
        font: normal 400 16px/26px "Noto Sans JP", sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #5D564E;
        margin: 0 0 0 0;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .detail-blk.other-blk {
        border: none;
        margin: 0 auto 22px;
    }
    .unisize-guide .detail-blk.other-blk .detail-txt {
        margin: 87px 0 0 0;
    }
    .unisize-guide .detail-blk.other-blk .detail-txt h4.heading,
    .unisize-guide .detail-blk.other-blk .detail-txt .txt {
        letter-spacing: calc(-20/ 1000 * 1em);
    }
    .unisize-guide .detail-blk.other-blk.other-blk03 {
        width: 1140px;
        margin: 29px auto 0;
        padding-bottom: 90px;
    }
    .unisize-guide .detail-blk.other-blk.other-blk03 .detail-img {
        margin: 0 0 0 115px;
    }
    .unisize-guide .detail-blk.other-blk.other-blk03 .other-no {
        margin: 91px 10px 0 128px;
    }
    .unisize-guide .detail-blk.other-blk.other-blk03 .detail-txt .txt {
        letter-spacing: calc(-65/ 1000 * 1em);
    }
    .unisize-guide .line {
        width: 1140px;
        height: 1px;
        background-color: #707070;
        display: block;
        margin: 0 auto 149px;
    }
    .unisize-guide .brand-list {
        width: 1140px;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        padding-bottom: 140px;
    }
    .unisize-guide .brand-list li {
        width: 178px;
        margin: 0 14px 10px 0;
    }
    .unisize-guide .brand-list li:nth-child(6n) {
        margin: 0 0 10px 0;
    }
    .unisize-guide .bt-blk {
        width: 1080px;
        margin: 0 auto;
        display: flex;
        padding: 74px 0 92px;
    }
    .unisize-guide .bt-blk dl {
        width: 540px;
        font: normal 400 16px/32px "Noto Sans JP", sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #5D564E;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .bt-blk dl dt {
        font-weight: 700;
    }
    /* ----- slick ----- */
    .unisize-guide .slick {
        width: 325px;
    }
    .unisize-guide .slick img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .l-footer {
        margin: 0;
    }
}

/*----- SP -----*/

@media only screen and (max-width: 769px) {
    .unisize-guide .pc {
        display: none;
    }

    .unisize-guide {
        width: 100%;
        background-color: #F3E5CB;
    }

    .unisize-guide .mv {
        width: 100%;
        height: auto;
    }

    .unisize-guide .mv h2 {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .unisize-guide .main-contents {
        width: 100%;
        text-align: left;
    }

    .unisize-guide .lead {
        width: calc(345*(100vw/375));
        height: auto;
        margin: calc(27*(100vw/375)) auto calc(49*(100vw/375));
        font: normal 400 calc(16*(100vw/375))/calc(32*(100vw/375)) "Noto Sans JP", sans-serif;
        letter-spacing: calc(48/ 1000 * 1em);
        color: #5D564E;
        border-bottom: #707070 1px solid;
        padding-bottom: calc(11*(100vw/375));
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }

    .unisize-guide h3.heading {
        width: calc(260*(100vw/375));
        display: flex;
        justify-content: center;
        padding: calc(10*(100vw/375)) 0 calc(10*(100vw/375));
        font: normal 700 calc(20*(100vw/375))/calc(20*(100vw/375)) "Noto Sans JP", sans-serif;
        letter-spacing: calc(50/ 1000 * 1em);
        color: #fff;
        border-radius: calc(27*(100vw/375));
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide h3.heading01 {
        background-color: #E69513;
        margin: 0 auto calc(33*(100vw/375));
    }
    .unisize-guide h3.heading02 {
        background-color: #D07C8C;
        margin: 0 auto calc(33*(100vw/375));
    }
    .unisize-guide h3.heading03 {
        width: calc(320*(100vw/375));
        background-color: #7CA6D0;
        margin: 0 auto calc(29*(100vw/375));
        font: normal 700 calc(18*(100vw/375))/calc(20*(100vw/375)) "Noto Sans JP", sans-serif;
    }

    .unisize-guide .step-no {
        text-align: center;
        font: normal 400 calc(48*(100vw/375))/1 din-condensed, sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #758430;
        margin-bottom: calc(13*(100vw/375));
    }
    .unisize-guide .detail-blk {
        width: calc(345*(100vw/375));
        margin: 0 auto calc(36*(100vw/375));
        padding-bottom: calc(30*(100vw/375));
        border-bottom: 1px solid #707070;
        display: flex;
        flex-direction: column-reverse;
    }
    .unisize-guide .detail-blk03 {
        margin-bottom: calc(58*(100vw/375));
    }
    .unisize-guide .detail-blk .detail-img {
        position: relative;
        margin: 0 0 0 0;
        width: calc(345*(100vw/375));
    }
    .unisize-guide .detail-blk .detail-img img {
        width: calc(225*(100vw/375));
        position: relative;
        top: 0;
        left: calc(60*(100vw/375));
        z-index: 10;
    }
    .unisize-guide .detail-blk .detail-img::before {
        content: "";
        display: block;
        position: absolute;
        top: calc(5*(100vw/375));
        left: calc(1*(100vw/375));
        z-index: 0;
        width: calc(343*(100vw/375));
        height: calc(343*(100vw/375));
        background-color: #FFFAD1;
        border-radius: 50%;
    }
    .unisize-guide .detail-blk.other-blk .detail-img::before {
        background-color: #FFD9E1;
    }
    .unisize-guide .detail-blk .detail-txt {
        position: relative;
        z-index: 10;
        text-align: left;
        margin: 0 0 calc(33*(100vw/375)) 0;
    }
    .unisize-guide .detail-blk .detail-txt h4.heading {
        font: normal 700 calc(24*(100vw/375))/calc(36*(100vw/375)) "Noto Sans JP", sans-serif;
        letter-spacing: calc(10/ 1000 * 1em);
        color: #000000;
        margin: 0 0 calc(18*(100vw/375)) 0;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .detail-blk .detail-txt .txt {
        font: normal 400 calc(18*(100vw/375))/calc(24*(100vw/375)) "Noto Sans JP", sans-serif;
        letter-spacing: calc(10/ 1000 * 1em);
        color: #707070;
        margin: 0 0 calc(28*(100vw/375)) 0;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .detail-blk .detail-txt .desc {
        font: normal 400 calc(16*(100vw/375))/calc(24*(100vw/375)) "Noto Sans JP", sans-serif;
        letter-spacing: calc(10/ 1000 * 1em);
        color: #5D564E;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .detail-blk.other-blk {
        position: relative;
        border: none;
        margin: 0 auto calc(45*(100vw/375));
    }
    .unisize-guide .detail-blk.other-blk03 {
        margin: 0 auto calc(6*(100vw/375));
    }
    .unisize-guide .detail-blk .other-no {
        font: normal 400 calc(36*(100vw/375))/calc(36*(100vw/375)) din-condensed, sans-serif;
        letter-spacing: calc(0/ 1000 * 1em);
        color: #758430;
        position: absolute;
        top: 0;
    }
    .unisize-guide .detail-blk.other-blk .detail-txt {
        margin: 0 0 calc(5*(100vw/375)) 0;
    }
    .unisize-guide .detail-blk.other-blk .detail-txt h4.heading {
        margin: calc(-2*(100vw/375)) 0 calc(18*(100vw/375)) calc(42*(100vw/375));
    }


    .unisize-guide .line {
        width: calc(345*(100vw/375));
        height: 1px;
        background-color: #707070;
        display: block;
        margin: 0 auto calc(78*(100vw/375));
    }
    .unisize-guide .brand-list {
        width: calc(345*(100vw/375));
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        padding-bottom: calc(20*(100vw/375));
    }
    .unisize-guide .brand-list li {
        width: calc(112*(100vw/375));
        margin: 0 calc(4*(100vw/375)) calc(7*(100vw/375)) 0;
    }
    .unisize-guide .brand-list li:nth-child(3n) {
        margin: 0 0 calc(7*(100vw/375)) 0;
    }
    .unisize-guide .bt-blk {
        background-color: #F3F3F3;
        width: 100%;
        margin: 0 auto;
        padding: calc(32*(100vw/375)) calc(15*(100vw/375)) calc(50*(100vw/375));
    }
    .unisize-guide .bt-blk .bt-txt01 {
        margin-bottom: calc(72*(100vw/375));
    }
    .unisize-guide .bt-blk dl {
        font: normal 400 16px/32px "Noto Sans JP", sans-serif;
        letter-spacing: calc(-20/ 1000 * 1em);
        color: #5D564E;
        -webkit-font-feature-settings: 'palt' 1;
        font-feature-settings: 'palt' 1;
    }
    .unisize-guide .bt-blk dl dt {
        font-weight: 700;
    }
    /* ----- slick ----- */
    .unisize-guide .detail-blk .detail-img .slick {
        width: calc(225*(100vw/375));
        margin: 0 auto;
    }
    .unisize-guide .detail-blk .detail-img .slick img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        left: 0;
    }
    .l-footer {
        margin: 0;
    }

}