@charset "UTF-8";

/*///////////////////////////////////////////////////////////////////////////

    共通設定

///////////////////////////////////////////////////////////////////////////*/

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

    /* 商品情報共通 */
    .product-info-item {
        font-size: 0.9rem;
    }

    /* 足データ確認 - 足の評価あり */
    .eval-desc > * {
        font-size: 100%;
    }
    .foot-length .value {
        font-size: 120%;
    }

}

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

    /* 商品情報共通 */
    .product-info-items {
        flex-flow: column;
        align-items: center;
    }
    .product-info-items > li {
        width: 80%;
        margin: 4rem auto;
    }
    .product-info-item {
        font-size: 1.1rem;
    }

    /* 足データ確認 */
    .content-table-info > dl > dt,
    .content-table-info > section > dl > dt {
        font-size: 1rem;
    }
    .content-table-info > dl > dd,
    .content-table-info > section > dl > dd {
        font-size: 0.9rem;
    }
    /* 足データ確認 - 足の評価あり */
    .content-foot-result {
        font-size: 0.9rem;
    }

    .foot-evaluation-description > * {
        display: block;
    }
    .foot-evaluation-description .img {
        float: left;
        font-size: 120%;
        height: 8em;
    }

    .summary-content-wrap,
    .details-content-wrap {
        font-size: 90%;
    }
    .measurement-summary-content {
        margin-top: 2em;
    }
    
    .foot-eval-desc {
        margin: 2em auto;
    }
    .trouble-example {
        padding: 2em 0.4em 0.5em;
    }
    .trouble-example > li {
        width: calc((100% - 6em) / 4 - 1em);
    }
    .trouble-example > li:first-child {
        position: absolute;
        width: 70%;
        top: -1em;
        left: 15%;
        margin: 0;
    }
    .trouble-example > li {
        margin-left: 0;
        margin-right: 1em;
        width: calc((100% - 3em) / 4 - 1em);
    }
    .trouble-example > li:last-child {
        margin-right: 1em;
    }
    .trouble-example .speech-bubble .img {
        display: none;
    }
    .trouble-example .speech-bubble .text {
        transform: rotate(0deg);
        position: relative;
        top: auto;
        left: auto;
        color: #fff;
        font-size: 70%;
        padding: 0.4em 0;
        background: #ff86e5;
        border-radius: 2em;
    }
    .trouble-example .speech-bubble .text.ST-wide {
        display: none;
    }
    .trouble-example .speech-bubble .text.ST-middle {
        display: block;
        text-align: center;
        width: 100%;
    }
    .trouble-example .speech-bubble .text.ST-middle::before {
        content: '';
        position: absolute;
        bottom: -6px;
        left: calc(50% - 4px);
        border-top: 8px solid #ff86e5;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
    }
    .shoe-select-point {
        padding: 1.25em 1em;
    }

    .foot-length.LY-left {
        left: 0px;
    }
    .foot-length.LY-right {
        right: 0px;
    }

    .eval-desc .center-title {
        font-size: 85%;
        width: 6rem;
    }

    .heel-arch-content > li > * {
        width: 48%;
    }
    .heel-arch-content > li > *:first-child {
        margin-left: 0;
    }
    .heel-arch-content > li > *:last-child {
        margin-right: 0;
    }
    .ruler-content > li {
        width: 100%;
    }
}

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

    .header-btns {
        font-size: 90%;
    }
    .header-btns .icon {
        width: 1.6em;
    }

    /* 商品情報共通 */
    .product-info-item {
        font-size: 1rem;
    }

    /* 商品一覧 */
    .content-product-list > li {
        width: 21%;
        margin: 0% 2% 4%;
    }

    /* 足データ確認 */
    .tab-title li {
        font-size: 85%;
    }
    .measure-data-list .value p {
        font-size: 150%;
    }
    /* 足データ確認 - 足の評価あり */
    .measurement-summary-content {
        width: 45%;
    }
    .content-foot-result {
        width: 96%;
    }
    .foot-eval-content {
        margin-left: 1em;
    }
    .foot-eval-desc {
        width: 94%;
    }
    .trouble-example {
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.8em;
        row-gap: 1em;
        padding: 2em 0.4em 0.5em;
    }
    .trouble-example > li {
        margin: 0;
        width: 100%;
    }
    .trouble-example > li:first-child {
        width: 13em;
        left: calc(50% - 6.5em);
    }
    .trouble-example .content .text {
        padding-left: 0.2em;
        line-height: 1.2;
    }
    .shoe-select-point {
        margin-top: 1em;
        padding: 1.8em 1.2em 1.5em;
    }
    .shoe-select-point ul {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 0.8em;
    }
    .middle-content {
        padding: 2.3em 0 0 1.5em;
    }
    .middle-content .content {
        padding: 1.5em 1em 0;
    }

    .recommend-insole {
        display: block;
    }
    .recommend-insole .text {
        padding: 0;
    }
    .recommend-insole .img {
        float: right;
        width: 10em;
    }
    .recommend-insole:after {
        content: '';
        display: block;
        clear: both;
    }

}


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

    :root {
        font-size: 16px;
    }

    /* header */
    .content-header {
        padding: 0.6rem 0;
    }
    .content-header .logo {
        width: 18%;
        margin: 0 1rem;
    }
    .header-btns {
        margin: 0 0.5rem 0 0;
        justify-content: flex-end;
    }
    .header-btns li {
        width: 6em;
        font-size: 0.9rem;
        flex-flow: column;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
    .header-btns .text {
        padding: 0.35em 0 0;
    }
    .header-btns li:before,
    .header-btns li:after {
        display: none;
    }


    /* content */
    .content-title {
        flex-flow: column;
        align-items: flex-start;
    }
    .content-title h2 {
        font-size: 1.8rem;
    }
    .content-common {
        width: 92%;
        padding: 10% 0 20%;
    }

    .content-simple-form-items {
        width: 100%;
        margin-top: 1.8em;
    }
    /* .content-simple-form-items > li > dl {
        justify-content: flex-end;
    } */
    .content-title .content-simple-form-items {
        margin-top: 2.5em;
    }
    .content-title .content-simple-form-items:last-child {
        margin-top: 1em;
    }
    .content-simple-form-items select {
        font-size: 1rem;
    }

    .content-figure {
        flex-flow: column;
    }
    .content-figure > .img {
        width: 100%;
        text-align: center;
    }
    .content-figure > .img > .img-title {
        text-align: left;
    }
    .content-figure > .img img {
        width: 70%;
    }
    .content-figure > .figcaption {
        margin: 0 auto;
        width: 90%;
    }

    .content-table-info {
        flex-flow: column;
    }
    .content-table-info > section {
        width: 100%;
    }
    .content-table-info > section:first-child {
        margin-bottom: 12%;
    }

    /* form item */
    .LY-main select {
        font-size: 1rem;
    }

    /* button */
    .content-buttons {
        margin-top: 10%;
    }
    .text-link-btn {
        margin-top: 1em;
    }
    .text-link-btn .text {
        font-size: 1rem;
    }
    
    .round-btn {
        width: 5.5rem;
        height: 5.5rem;
    }
    .round-btn > .img {
        width: 50%;
    }
    .round-btn > .text {
        font-size: 0.85rem;
    }

    /* 商品情報 */
    .product-info-items > li {
        width: 95%;
        margin: 15% 0;
    }
    .product-info-items > li:last-child {
        margin-bottom: 0;
    }
    .product-info-items .content-buttons {
        margin-top: 1.5rem;
    }
    .product-info-item > .title {
        margin-bottom: 1.8em;
    }
    .product-info-item > .content > .left {
        width: 39%;
    }
    .product-info-item > .content > .right {
        width: 55%;
    }
    .product-info-item .product-img {
        width: 100%;
    }
    .product-thumbnail.LY-mobile {
        display: flex;
        flex-wrap: wrap;
        margin: 1em 0 0;
    }
    .product-thumbnail.LY-mobile > * {
        width: 29%;
        margin: 0 2% 4%;
    }
    .product-info-item .content-info-list {
        width: 100%;
        margin: 0;
        font-size: 90%;
    }
    .content-info-list > dl {
        align-items: flex-start;
        flex-flow: column;
    }
    .content-info-list > dl > dt {
        width: auto;
        text-align: left;
        padding: 0;
    }
    .content-info-list > dl > dd {
        padding-left: 0.8em;
    }
    .product-info-item .shoes-info-surefit {
        width: 100%;
    }
    .shoes-info-surefit {
        font-size: 1.1rem;
        margin: 1.5em auto 0;
    }

    /* おすすめの靴 */
    .recommend-result {
        margin: 8% 0 0;
    }

    /* 商品一覧 */
    .content-product-list > li {
        width: 29.3%;
        font-size: 0.9rem;
        margin: 0 2% 8%;
    }

    /* サイズレコメンド */
    .content-sizerecommend {
        padding: 10% 6% 20%;
    }
    .content-sizerecommend .product-info-item {
        font-size: 1.1rem;
    }
    .recommend-not-found {
        padding: 0.5rem 0 0;
    }

    /*  フィルタ設定  */
    .content-filter {
        font-size: 0.8rem;
    }
    .content-filter dt {
        padding: 0;
        border: 0;
        margin: 9px 0;
    }
    .content-filter dt .icon {
        width: 1.1rem;
    }
    .content-filter dt .text {
        padding-left: 0.3rem;
        text-decoration: underline;
    }
    .content-filter dd {
        font-size: 90%;
        margin-left: 0.6em;
    }

    /*  モーダル設定  */
    .content-modal {
        width: 96%;
    }
    .modal-view-limit {
        padding: 1.5em 0.8em;
        max-height: 56vh;
    }
    .content-form-items > li.LY-half {
        width: 100%;
    }
    .content-modal .common-btn {
        min-width: 9rem;
    }
    .modal-content .content-buttons {
        padding-top: 0.5em;
    }
    .content-modal .content-buttons > li {
        margin: 0 0.5em;
    }

    /*  モーダル - 履き心地編集  */
    .content-modal .content-figure > .img img {
        width: 55%;
    }
    .shape-category-thumbnail-list {
        width: 100%;
        margin: 1.5em auto 0;
    }
    .shape-category-thumbnail-list .swiper {
        padding: 0 20px;
    }
    .shape-category-thumbnail-list .thumbnail-img.ST-selected:before {
        top: calc( 50% - 18px );
        left: calc( 50% - 18px );
        width: 36px;
        height: 36px;
    }

    /* 足データ確認 - 足の評価あり */
    .content-foot-result {
        width: 98%;
        flex-flow: column;
    }
    .foot-evaluation-description {
        margin: 2em 0 3em;
    }
    .foot-evaluation-description .text {
        padding: 0 0.5em;
    }
    .foot-evaluation-description .img {
        height: auto;
        padding-left: 0;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        max-width: 220px;
    }
    .foot-evaluation-description img {
        width: 100%;
        height: auto;
    }
    .foot-measuredata {
        width: 100%;
        margin: 20% 0 0;
    }
    .result-speech-bubble {
        padding: 1em;
    }

    .summary-content-wrap,
    .details-content-wrap {
        flex-direction: column;
    }
    .measurement-summary-content {
        width: calc(100% - 2em);
    }
    .summary-content-wrap > * {
        margin: 0 auto;
    }
    .ruler-content > li .title {
        width: 3.5em;
    }
    .ruler-content > li:last-child .center-content p {
        font-size: 85%;
    }
    .ruler-content > li:last-child .center-content p.ST-active {
        font-size: 100%;
    }
    .foot-print-content {
        margin: 1.5em auto;
    }
    .heel-arch-content {
        margin: 2.5em auto;
    }
    .foot-print-img {
        width: calc(100% - 2.5em);
    }

    .eval-desc > * {
        width: 6rem;
    }
    .eval-desc .center-title {
        font-size: 80%;
        width: 5rem;
    }
    .content-heat-map {
        margin: 1.5em auto;
    }
    .left-view-content-switch > * {
        width: 50%;
        max-width: 13em;
    }

    .foot-eval-content {
        width: 100%;
        margin: 5em auto 0;
    }
    .trouble-example > li:first-child {
        width: 15em;
        left: calc(50% - 7.5em);
    }
    .trouble-example .content {
        display: flex;
        text-align: left;
        align-items: center;
    }
    .trouble-example .content .img {
        order: 1;
    }
    .trouble-example .content .text {
        order: 2;
        padding-left: 0.2em;
        line-height: 1.3;
    }

    .recommend-insole .img {
        width: 45%;
    }
    .measurement-details-content {
        width: 90%;
        margin: 0 auto 3.5em;
    }

    .foot-each-eval-content {
        width: 100%;
    }
    .LY-2column .foot-each-eval-item {
        margin: 1.5em auto;
    }
    .foot-each-eval-item > dl > dt em {
        font-size: 100%;
    }
    .foot-each-eval-item > dl > dt {
        letter-spacing: 0;
    }
    .foot-each-eval-item > dl > dd {
        font-size: 90%;
        padding: 0.4em 0 0 0.4em;
    }
}

@media screen and (max-width: 420px) {
    /* button */
    .round-btn {
        width: 5rem;
        height: 5rem;
    }
    .round-btn > .img {
        width: 50%;
    }
    .round-btn > .text {
        font-size: 0.8rem;
        line-height: 1.1;
    }
}


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

    /* 足データ確認 - 足の評価あり */
    .foot-evaluation-result {
        font-size: 0.9rem;
    }
    .measure-data-list > li > .value {
        font-size: 80%;
    }

    /*  モーダル - 履き心地編集  */
    .content-simple-form-items {
        font-size: 0.9rem;
    }

    /* button */
    /* .round-btn {
        width: 5.8rem;
        height: 5.8rem;
    }
    .round-btn > .text {
        font-size: 0.85rem;
    } */
}