@charset "UTF-8";
/* =====================
  single-link
===================== */
.single-link{
    text-decoration: underline;
}
.single-link:hover{
    text-decoration: none;
}
.single-link[data-color="darkBrown"]{
    color: var(--darkBrown);
}
.single-link[target="_blank"]::after{
    content: '';
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAARElEQVQYlWP8//8/AwhEWclCGDgAEz5JZMCCzFl27DEjNkUg24g2kYmQ2+AKyXIjPtPhCnF5BAYYIy1lcJoC18zAwAAA2ygSceP2pokAAAAASUVORK5CYII=");
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 10px;
    height: 9px;
    margin-left: 0.5em;
}

/* =====================
  second head
===================== */
.second-head{
    background: #f9f9f9;
    border-bottom: 1px solid #ebebeb;
    padding: 55px 49px 36px;
    position: relative;
}
.second-head .head{
    font-size: 32px;
    color: var(--mostblack);
    letter-spacing: -0.3px;
}
.second-head .head::before{
    content: attr(data-name);
    display: block;
    font-size: 14px;
    color: var(--brown);
    font-family: var(--trajan);
    font-weight: 400;
    margin-bottom: 0.2em;
    letter-spacing: -0.1px;
}

/* =====================
  breadcrumb
===================== */
.breadcrumb{
    position: absolute;
    right: 50px;
    bottom: 21px;
}
.breadcrumb li {
    font-size: 12px;
    display: inline;
}
.breadcrumb li a{
    color:var(--brown);
}
.breadcrumb li + li::before{
    content: '/';
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 0.9em;
}

/* =====================
  secondbox
===================== */
.secondbox .inner{
    text-align: center;
}
.secondbox .head{
    position: relative;
    text-align: center;
    display: inline-block;
}
.secondbox .head::before,
.secondbox .head::after{
    content: '';
    width: 318px;
    height: 1px;
    display: block;
    position: absolute;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-color: #000;
    opacity: 0.5;
}
.secondbox .head::before{
    left: -220%;
    background: -moz-linear-gradient(left,  rgba(6,6,6,0) 0%, rgba(6,6,6,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(6,6,6,0) 0%,rgba(6,6,6,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(6,6,6,0) 0%,rgba(6,6,6,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.secondbox .head::after{
    right: -220%;
    background: -moz-linear-gradient(left,  rgba(6,6,6,1) 0%, rgba(6,6,6,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(6,6,6,1) 0%,rgba(6,6,6,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(6,6,6,1) 0%,rgba(6,6,6,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.secondbox .head h3{
    color: var(--mostblack);
    display: inline-block;
    font-size: 41px;
    line-height: 1;
}
.secondbox .head h3::after{
    content: attr(data-name);
    display: block;
    text-align: justify;
    font-family: var(--tenmin);
    font-weight: 40;
    line-height: 1;
    font-size: 16px;
    font-style: normal;
    margin-top: 0.5em;
}
.secondbox .unit{
    margin-top: 37px;
}
.secondbox .anchor{
    margin-top: 3.7em;
    text-align: center;
}
.secondbox .anchor a{
    font-size: 18px;
    font-weight: normal;
}
.secondbox + .secondbox{
    margin-top: 60px;
}

/* =====================
  並べるボックス
===================== */
.link-item {
    padding: 30px 30px 35px;
}
.link-item .inner{
    background: #f7f6f4;
    padding: 51px 60px 50px 60px;
}
.link-item .item-box{
    display: -ms-grid;
    display: grid;
    grid-template :
        "img title" auto
        "img text" auto
        "img anchor" 1fr
        / auto 1fr;
    -ms-grid-rows: auto auto 1fr;
    -ms-grid-columns: auto 1fr;
}
.link-item .item-box + .item-box{
    margin-top: 25px;
}
.link-item .item-box .img{
    grid-area: img;
    width: 332px;
    height: 205px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row-span: 3;
}
.link-item .item-box h4{
    grid-area: title;
    font-size: 16px;
    text-decoration: underline;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    padding-left: 34px;
    padding-top: 1em;
}
.link-item .item-box p{
    grid-area: text;
    font-size: 14px;
    line-height: 1.857;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    padding-left: 35px;
    padding-top: 1.05em;
}
.link-item .item-box .anchor{
    grid-area: anchor;
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    padding-left: 34px;
    text-align: right;
    margin-top: 1.5em;
}
.link-item .item-box .anchor .e-btn{
    background: #fff;
}
.link-item .item-box .anchor .e-btn:hover{
    background: var(--black);
}

/* =====================
  テキストunit
===================== */
.single-unit{
    padding-top: 26px;
}
.single-unit + .single-unit{
    padding-top: 6px;
}
.single-unit .item{
    padding-top: 22px;
    padding-bottom: 24px;
}
.single-unit p{
    font-size: 14px;
    line-height: var(--lhL);
}
.single-unit .img{
    margin-top: 1.1em;
    margin-bottom: 0.9em;
}
.single-unit .list{
    font-size: 14px;
}
.single-unit .list .head + ul{
    margin-top: 0.4em;
}
.single-unit .list ul li{
    line-height: var(--lhL2);
    text-indent: -1em;
    padding-left: 1em;
    word-break: break-all;
}
.single-unit .list ul li::before{
    content: '・';
    color: var(--purple);
}
.single-unit .attention{
    margin-top: 1.75em;
    font-size: 14px;
    line-height: var(--lh);
    text-indent: -1em;
    padding-left: 1em;
}
.single-unit .attention + .attention{
    margin-top: 0.45em;
}
.single-unit .in-anchor{
    display: block;
    padding: 1.75em 1em 1.75em;
}
.single-unit .u-table{
    margin-top: 1em;
}

/* =====================
  table style
===================== */
.u-table table{
    font-size: 14px;
    width: 100%;
}
.u-table th{
    background: #f2f2f2;
    width: 176px;
    padding: 0.55em 0 0.55em 1.5em;
    vertical-align: top;
}
.u-table th span{
    position: relative;
    display: block;
}
.u-table th{
    line-height: 2;
    vertical-align: top;
    border: 1px solid #dcdcdc;
}
.u-table td{
    border: 1px solid #dcdcdc;
    padding: 0.55em 1.5em;
}
.u-table td span + span{
    padding-left: 0.75em;
}
.u-table tr.must th{
    padding-right: 0px;
}
.u-table tr.must th span::after{
    content: '必須';
    font-size: 13px;
    color: var(--purple);
    display: inline-block;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--purple);
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;
    padding: 4px 7px;
}
.u-table tr.must th.vat::after{
    top: 21px;
    transform: none;
}
/* style2 */
.u-table[data-style="2"] table{
    font-size: 15px;
}
.u-table[data-style="2"] tr.active th{
    color: var(--purple);
}
.u-table[data-style="2"] th{
    width: 216px;
    font-weight: bold;
}
.u-table[data-style="2"] th.vat{
    vertical-align: top;
}
.u-table[data-style="2"] th,
.u-table[data-style="2"] td{
    padding: 0.95em 1.5em;
    vertical-align: middle;
}

/* =====================
  e-table
===================== */
.e-table{
    font-size: 14px;
}
.e-table[data-col="2"]{
    display: flex;
    justify-content: center;
}
.e-table[data-col="2"] .e-table-item{
    width: 50%;
}
.e-table[data-col="2"] .e-table-item + .e-table-item{
    border-left: 1px solid #dcdcdc;
    position: relative;
    left: -1px;
}
.e-table[data-col="2"] table{
    width: 100%;
}
.e-table[data-col="2"] table + table{
}
.e-table[data-col="2"] th,
.e-table[data-col="2"] td{
    text-align: center;
    border: 1px solid #dcdcdc;
    padding: 5px 3px;
    word-break: break-all;
}
.e-table[data-col="2"] thead th{
    background: #565656;
    color: #fff;
}
.e-table[data-col="2"] tbody tr:nth-child(even) td{
    background: #f7f6f4;
}

/* =====================
  フォーム部品
===================== */
.form-table input[type="text"],
.form-table input[type="tel"],
.form-table input[type="email"],
.form-table textarea,
.form-table select{
    transition: border 250ms ease 0s;
    border-radius: 4px;
    border: 2px solid #a9a9a9;
    padding: 0.85em 1.25em;
    font-size: 15px;
    word-break: break-all;
}
.form-table select{
    background-repeat: no-repeat;
    background-position: 97% center;
    background-image: var(--arrowSelect);
    min-width: 378px;
    background-size: 11px 7px;
    padding-right: 30px;
    padding: 15.25px 30px 15.25px 0.75em;
    background-color: #fff;
}
.form-table input[type="text"],
.form-table input[type="tel"],
.form-table input[type="email"],
.form-table textarea{
    width: 100%;
}
.form-table textarea{
    min-height: 207px;
}
.form-table input[type="text"]:focus,
.form-table input[type="tel"]:focus,
.form-table input[type="email"]:focus,
.form-table textarea:focus,
.form-table select:focus{
    border: 2px solid var(--purple);
}
.form-table select:focus{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAA10lEQVQYlW3PPUoDURQF4C9GUli6haQVOxECYzUwVlpoGrUUcQ/TZQoXYGMpiEWwUYQ887roBizsQnANFjaKkQdRyOiBW9x7fjjXbDb7M6P+sBj1h63/uCU1xCrs4x6DWIVmnV8wxCps4wpJuIPLWIUFze8Sq7CFG7RwjTcc4DxWobFgiFXYwC1WcIFD7OIdpzj7MTS7y5treMDqPPk4L4uvdtZ5nY4nz9hDNh1PPttZ57Ex6g+f0MVdIvOy+Kj91ZsHJaynSumQavTq4oS8LAY4wVFeFi/fz8xaWDTDhy4AAAAASUVORK5CYII=');
}
.form-table .postalcode{
    display: flex;
    align-items: center;
}
.form-table .postalcode input{
    width: 110px;
}
.form-table .postalcode span{
    display: inline-block;
    padding-left: 1em;
    font-size: 14px;
}
.form-table .postalcode span::before{
    content: '※';
    color: var(--salmon);
}

/* =====================
  エラー表示
===================== */
.form-error{
    display: block;
    font-size: 14px;
    color: var(--salmon);
    padding-top: 0.5em;
}
.form-error:empty{
    display: none;
}

/* =====================
  フォームボタン
===================== */
.form-agree{
    margin-top: 2.2em;
}
.form-agree .agree{
    margin-top: 28px;
    padding-left: 14px;
}
.form-agree .agree span{
    font-weight: bold;
    font-size: 14px;
}
.form-agree input[type="checkbox"]{
    display: none;
}
.form-agree label{
    cursor: pointer;
    width: 18px;
    height: 18px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: 3px;
    margin-right: 0.5em;
    -webkit-transition: all 250ms ease 0s;
    -moz-transition: all 250ms ease 0s;
    -ms-transition: all 250ms ease 0s;
    -o-transition: all 250ms ease 0s;
    transition: all 250ms ease 0s;
    position: relative;
    top: -1px;
}
.form-agree label + span{
    font-size:14px;
}
.form-agree input[type="checkbox"]:checked + label{
    border: 2px solid var(--purple);
    background: var(--purple);
}
.form-agree input[type="checkbox"] + label i{
    font-size: 10px;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
    background-position: center;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check%22%20class%3D%22svg-inline--fa%20fa-check%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    width: 10px;
    height: 10px;
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.1);
    -moz-transform: translate(-50%, -50%) scale(0.1);
    -ms-transform: translate(-50%, -50%) scale(0.1);
    -o-transform: translate(-50%, -50%) scale(0.1);
    transform: translate(-50%, -50%) scale(0.1);
    -webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    -moz-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    -ms-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    -o-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    line-height: 1;
}
.form-agree input[type="checkbox"]:checked + label i{
    color: var(--purple);
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

/* =====================
  送信ボタン
===================== */
.form-submit{
    margin-top: 3.2em;
}
.form-submit .submit{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.form-submit .submit + .submit{
    margin-top: 43px;
}

/* =====================
  アイテムループ
===================== */
.itemloop{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: var(--hirakaku);
    font-weight: normal;
}
.itemloop[data-col="3"]{
    width: 787px;
    margin-left: auto;
    margin-right: auto;
}
.itemloop .itemloop-unit{
    width: 212px;
}
.itemloop::before,
.itemloop::after{
    content: '';
    display: block;
    width: 212px;
}
.itemloop::before{
    order: 1;
}
.itemloop[data-col="3"]::before{
    display: none;
}
.itemloop .itemloop-unit{
    position: relative;
}
.itemloop .itemloop-unit.new::before{
    z-index: 2;
    position: absolute;
    content: 'new';
    font-family: serif;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    line-height: 0;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background: var(--gold);
    font-family: var(--mincho);
    font-weight: 500;
    width: 38px;
    height: 38px;
    top: -10px;
    left: -10px;
}
.itemloop .itemloop-unit a{
    display: block;
    position: relative;
}
.itemloop .itemloop-unit a span{
    display: block;
}
.itemloop .itemloop-unit a .img{
    width: 212px;
    position: relative;
    overflow: hidden;
    padding-top: 100%;
}
.itemloop .itemloop-unit a .img span{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fafafa;
    width: 212px;
    padding-top : 100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(1);
    transition: all 1000ms ease 0s;
}
.itemloop .itemloop-unit a:hover .img span{
    transform:translate(-50%,-50%) scale(1.1);
}
.itemloop .itemloop-unit a .title{
    font-size: 13px;
    margin-top: 1em;
    word-break: break-all;
}
.itemloop .itemloop-unit a .price{
    word-break: break-all;
    font-size: 14px;
    margin-top: 0.5em;
}
.itemloop[data-col="3"] .itemloop-unit:nth-child(n + 4),
.itemloop .itemloop-unit:nth-child(n + 5){
    margin-top: 2.5em;
}

/* =====================
 .head-style
===================== */
.head-style{
    background: #f3f3f3;
    font-size: 18.02px;
    padding: 9px 0;
}

/* =====================
 recent-check
===================== */
.recent-check{
    margin-top: 5.7em;
}
.mt-reset .recent-check{
    margin-top: 0em;
}
.recent-check .unit{
    margin-top: 3.1em;
}

/* =====================
  narrow
===================== */
.u-narrow-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =====================
  narrow item
===================== */
.narrow-item{
    display: flex;
    font-size: 14px;
    align-items: center;
}
.narrow-item select{
    border: 2px solid #a9a9a9;
    border-radius: 4px;
    background-color: #fff;
    min-width: 138px;
    padding: 8px 36px 8px 13px;
    background-repeat: no-repeat;
    background-position: 95% center;
    background-image: var(--arrowSelect);
    background-size: 9px 6px;
    transition: all 250ms ease 0s;
}
.narrow-item select:focus{
    border: 2px solid var(--purple);
}
.narrow-item .anchor{
    cursor: pointer;
    display: inline-block;
    transition: all 250ms ease 0s;
    position: relative;
    background: var(--sky);
    color: #fff;
    font-family: var(--hirakaku);
    font-weight: normal;
    font-size: 13px;
    padding: 9px 24px;
    border-radius: 5px;
}
.narrow-item .anchor:hover{
    background: var(--skyHover);
}
.narrow-item .anchor::before{
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: var(--searchIcon);
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 0.5em;
}
.narrow-item .item + .item{
    margin-left: 1em;
}

/* =====================
  narrow pager
===================== */
.u-narrow .pager ul{
    display: flex;
    font-size: 16px;
    align-items: center;
}
.u-narrow .pager .prev.disable,
.u-narrow .pager .next.disable{
    pointer-events: none;
    opacity: 0.5;
}
.u-narrow .pager a,
.u-narrow .pager span{
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #a8a7a5;
    border-bottom: 1px solid #a8a7a5;
    line-height: 1;
    padding: 10px 13px;
    min-width: 38px;
    min-height: 38px;
    transition: all 250ms ease 0s;
}
.u-narrow .pager .prev a::before,
.u-narrow .pager .next a::before{
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: var(--arrowNP);
    width: 6px;
    height: 9px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.u-narrow .pager .prev a::before{
    transform:translate(-50%,-50%) scale(-1,1);
}
.u-narrow .pager .prev a:hover::before,
.u-narrow .pager .next a:hover::before{
    background-image: var(--arrowNPWhite);
}
.u-narrow .pager li.active a{
    background: var(--black);
    color: #fff;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}
.u-narrow .pager li + li a,
.u-narrow .pager li + li span{
    border-left: 1px solid #a8a7a5;
}
.u-narrow .pager ul li:first-child a,
.u-narrow .pager ul li:first-child span{
    border-left: 1px solid #a8a7a5;
}
.u-narrow .pager ul li:last-child a,
.u-narrow .pager ul li:last-child span{
    border-right: 1px solid #a8a7a5;
}
.u-narrow .pager li + li a:hover{
    background: var(--black);
    color: #fff;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}
.u-narrow .pager .dots{
    pointer-events: none;
}
.u-narrow .pager .dots span{
    position: relative;
}
.u-narrow .pager .dots span::before{
    line-height: 1;
    content: '...';
    display: inline-block;
    position: absolute;
    top: 0.4em;
}

/* =====================
  boxloop
===================== */
.boxloop{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: var(--hirakaku);
    font-weight: normal;
}
.boxloop .boxloop-unit{
    width: 210px;
}
.boxloop::before,
.boxloop::after{
    content: '';
    display: block;
    width: 210px;
}
.boxloop::before{
    order: 1;
}
.boxloop .boxloop-unit{
    position: relative;
}
.boxloop .boxloop-unit a{
    display: block;
    position: relative;
}
.boxloop .boxloop-unit a .img{
    display: block;
    width: 210px;
    position: relative;
    overflow: hidden;
    padding-top: 66.6%;
    margin-bottom: 1.7em;
}
.boxloop .boxloop-unit a .img span{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fafafa;
    width: 210px;
    padding-top : 66.6%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(1);
    transition: all 1000ms ease 0s;
}
.boxloop .boxloop-unit a:hover .img span{
    transform:translate(-50%,-50%) scale(1.1);
}
.boxloop .boxloop-unit a .time{
    font-size: 13px;
    color: #a2a2a2;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
.boxloop .boxloop-unit a .title{
    font-size: 14px;
    margin-top: 0.5em;
    display: block;
    line-height: var(--lhS3);
    word-break: break-all;
    line-break: anywhere;
}
.boxloop .boxloop-unit:nth-child(n + 5){
    margin-top: 2.5em;
}

/* =====================
  ポリシー
===================== */
.policy-p{
    font-size: 14px;
    line-height: 1.571;
}
.policy-unit{
    line-height: 1.571;
    margin-top: 2.6em;
}
.policy-ol{
    font-size: 14px;
    margin-top: 1em;
}
.policy-ol li{
    display: flex;
}
.policy-ol li > span:first-child{
    line-height: 1.571;
}
.policy-ol li > span:last-child{
    flex: 1;
    line-height: 1.571;
}
.policy-ol li + li{
    margin-top: 1.85em;
}
.policy-head2{
    font-size: 18px;
    font-weight: bold;
    background: #f3f3f3;
    padding: 8px 0;
}
.policy-body{
    padding-top: 1em;
    padding-bottom: 1em;
}
.policy-table{
    margin-top: 1.5em;
}
.policy-table th,
.policy-table td{
    padding: 1em;
    line-height: 1.571;
}

/* =====================
  single
===================== */
/* grid 処理 */
.singleloop .singleloop-unit{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns : auto 1fr;
    -ms-grid-rows : auto auto auto auto 1fr auto;
    grid-template :
        "img title"  auto
        "img price"  auto
        "img text"   auto
        "img tag"    1fr
        "img anchor" auto
        / auto 1fr;
}
.singleloop .singleloop-unit .img{
    grid-area         : img;
    -ms-grid-row      : 1;
    -ms-grid-column   : 1;
    -ms-grid-row-span : 5;
}
.singleloop .singleloop-unit .title{
    grid-area         : title;
    -ms-grid-row      : 1;
    -ms-grid-column   : 2;
}
.singleloop .singleloop-unit .price{
    grid-area         : price;
    -ms-grid-row      : 2;
    -ms-grid-column   : 2;
}
.singleloop .singleloop-unit .text{
    grid-area         : text;
    -ms-grid-row      : 3;
    -ms-grid-column   : 2;
}
.singleloop .singleloop-unit .tag{
    grid-area         : tag;
    -ms-grid-row      : 4;
    -ms-grid-column   : 2;
}
.singleloop .singleloop-unit .anchor{
    grid-area         : anchor;
    -ms-grid-row      : 5;
    -ms-grid-column   : 2;
}

/* コンテンツ処理 */
.singleloop .singleloop-unit{
    padding: 2em 0;
    cursor: pointer;
    border-bottom: 1px dotted #acacac;
    transition: all 250ms ease 0s;
    position: relative;
}
.singleloop .singleloop-unit:hover{
    opacity: 0.7;
}
.singleloop[data-option="ranking"] {
    counter-reset: ranking;
}
.singleloop[data-option="ranking"] .singleloop-unit .img::before{
    counter-increment: ranking;
    content: counter(ranking);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    background: var(--black);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    text-align: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.singleloop[data-option="ranking"] .singleloop-unit:nth-child(1) .img::before{background-color: #bba87c;}
.singleloop[data-option="ranking"] .singleloop-unit:nth-child(2) .img::before{background-color: #bcbcbc;}
.singleloop[data-option="ranking"] .singleloop-unit:nth-child(3) .img::before{background-color: #a08777;}

/* img */
.singleloop .singleloop-unit .img{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fafafa;
    width: 212px;
    height: 212px;
}

.singleloop .singleloop-unit .title,
.singleloop .singleloop-unit .price,
.singleloop .singleloop-unit .tag,
.singleloop .singleloop-unit .text{
    padding-left: 27px;
    padding-left: 27px;
}

/* title */
.singleloop .singleloop-unit .title{
    font-size: 16px;
    word-break: break-all;
    padding-top: 0.75em;
    font-weight: bold;
}

/* price */
.singleloop .singleloop-unit .price{
    word-break: break-all;
    font-family: var(--hirakaku);
    font-weight: bold;
    font-size: 17px;
    margin-top: 0.25em;
}

/* tag */
.singleloop .singleloop-unit .tag{
    padding-top: 2.8em;
    word-break: break-all;
}

/* text */
.singleloop .singleloop-unit .text{
    word-break: break-all;
    font-family: var(--hirakaku);
    font-size: 13px;
    color: #878787;
    margin-top: 1.7em;
    line-height: 1.769;
}

/* anchor */
.singleloop .singleloop-unit .anchor{
    display: none;
}