﻿
.item-link p {
}
body p{
}

.item-link {
    text-align: center;
    padding:  30PX;
}

span.item-name-head {
    display: inline-block;
    color: #000;
    border: 1px solid #000;
    border-radius: 12px;
}

.item-link li {
    float: left;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #1b1e21;
    box-shadow: 5px 5px #b5b5b5;
    padding-top: 10px;
    background-color : #fff;
}

.item-link li a:hover .item-link-img {
    opacity: 0.5;
}

.item-link li a .item-link-img {
     margin : 0;
     background-color: #fff;
}

.item-link li a .item-link-name {
    background-color: #ccc;
}

.item-link li a .item-link-name span.item-name-head {
    color: #fff;
    border: 1px solid #fff;
}

.item-link li a .item-link-name h2 {
    color: #fff;
    font-weight:  bold;
}

.item-link li a .item-more {
    background-color: #1b1e21;
    font-family: 'Oswald', sans-serif;
    margin:0;
}

.item-link li:nth-child(1) .item-link-name,
#item-01 .item-head {
    background-color: #70aa7f;
}

#item-01 .item-head{

display: block;
}
.item-link li:nth-child(2) .item-link-name,
#item-02 .item-head {
    background-color: #d57c7c;
}

.item-link li:nth-child(3) .item-link-name,
#item-03 .item-head {
    background-color: #d89c71;
}

.item-link li:nth-child(4) .item-link-name,
#item-04 .item-head {
    background-color: #a18db2;
}

.item-link li:nth-child(5) .item-link-name,
#item-05 .item-head {
    background-color: #7394bc;
}

.item-link li:nth-child(6) .item-link-name,
#item-06 .item-head {
    background-color: #86b4c5;
}

.contents {
    display:grid;
}
.contents .inner{
    background-color:rgba(255, 255, 255, 0.00);
}
.contents .item-link li{
    background-color:#fff;
}

.item-section {
    background-color: #fff;
    padding-top: 0;
}

.item-section .item-head {
    display: block;
    color: #fff;
    margin: 0;
    text-align: center;
}

.item-section img {
    display: block;
}

.item-section hr {
    border: solid #dedede;
    border-width: 1px 0 0;
}

@media print, screen and (min-width: 751px) {
    .item-link {
        max-width: 800px;
        width: 100%;
        margin-left : 5px;
        margin-right: 5px;
        display: inline-block;
        font-size: 0;
        text-align: center;
    }

    .item-section img {
        max-width: 600px;
        width: 100%;
        margin-left: 5px;
        margin-right: 5px;
    }
    .item-link p {
        margin-top: 0;
        font-size: small;
        color: #fff;
    }

    body p {
        line-height: normal;
    }

    span.item-name-head {
        display: inline-block;
        font-size: 14px;
        padding: 1px 10px 3px 10px;
        margin: 10px 0;
    }

    .item-link li {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .item-link li a .item-link-img {
        width: 216px;
        margin: 0 auto;
        line-height: 0;
    }

    .item-link li a .item-link-name {
        padding: 10px 0;
        margin: 0;
    }

    .item-link li a .item-link-name span.item-name-head {
    }

    .item-link li a .item-link-name h2 {
        font-size: 20px;
        letter-spacing: 0.11em;
    }

    .item-link li a .item-more {
        padding: 10px;
        font-size: 14px;
        margin: 0;
    }      

    .item-section {
        padding-top: 0;
        margin-top: 120px;
    }

    .item-section .item-head {
        margin: 0;
        padding: 5px;
        font-weight: bold;
        letter-spacing: 1rem;
    }

    .item-section img {
        margin: 40px auto 40px auto;
        display: block;
    }

    .item-section hr {
        width: 70%;
    }

}

@media only screen and (max-width: 750px) {
    .item-link {
        /* margin-left : 10px; */
        padding : 0;
        display: inline-block;
    }

    .item-section img {
        width: 100%;
        margin-left: 10px;
        margin-right: 10px;
    }

    .item-link p {
        margin-top: 0;
        font-size: small;
    }

    body p {
        line-height: normal;
    }

    .item-link {
        font-size: 0;
        text-align: center;
        margin-top: 30px;
    }

    span.item-name-head {
        display: inline-block;
        font-size: 12px;
        padding: 3px 7px 3px 6px;
        margin: 7px 0;
    }

    .item-link li {
        width: 43%;
        margin-left: 7px;
        margin-right: 7px;
        max-width: 180px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .item-link li a .item-link-img {
        width : 90%;
        margin: 0 auto;
        line-height: 0;
    }

    .item-link li a .item-link-img img{
        width: 100%;
        height:auto;
        margin: 0 auto;
    }

    .item-link li a .item-link-name {
        padding: 8px;
        margin: 0;
        height: 100px;
    }

    .item-link li a .item-link-name span.item-name-head {
        margin-top: 10px;
    }

    .item-link li a .item-link-name p.serif {
        display : none;
    }

    .item-link li a .item-link-name h2 {
        font-size: 14px;
        letter-spacing: 0.11em;
    }

    .item-link li a .item-more {
        padding: 10px;
        font-size: 12px;
        margin: 0;
        color:  #fff;
    }      

    .item-section {
        padding-top: 0;
        margin-top: 120px;
    }

    .item-section .item-head {
        margin: 0;
        padding: 5px;
        font-weight: bold;
        letter-spacing: 0.4rem;
        font-size: 14px;
    }

    .item-section img {
        margin: 20px 0 20px 0;
        display: inline-grid;
    }

    .item-section hr {
        width: 70%;
    }
}



@media print, screen and (min-width: 751px) {
    .tm-site-header {
        background: url('../img/product/lineup_pre-mv-pc.jpg') no-repeat;
        padding: 80px 60px;
        text-align: right;
    }

    .tm-main-content {
        background: url('../img/product/lineup_pre-bg-pc.jpg') repeat;
        text-align: center;
    }
}

@media only screen and (max-width: 750px) {
    .tm-site-header {
        background: url('../img/product/top-mv-pc.jpg') no-repeat;
        /* padding: 60px 80px; */
        background-position-x: -900px;
        background-position-y: -200px;
    }

    .tm-main-content {
        background: #fff;
        text-align: center;
        padding : 35px 15px;
    }
}
