@charset "utf-8";

/*
************************************************************************
* ヘアアクセサリー
************************************************************************
*/

.accessory-link
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;

    margin:-1em;
}
.accessory-link > .accessory-link-item
{
    width:calc(25% - 2em);
    margin:1em;
}
.accessory-link > .accessory-link-item:hover
{
    text-decoration:none;
}
.accessory-link > .accessory-link-item .image
{
    border-radius:0.5em;
    border-radius:0.5em;
    overflow:hidden;
}
.accessory-link > .accessory-link-item .title
{
    margin-top:1.0em;
    line-height:1;
}
.accessory-link > .accessory-link-item .title:after
{
    content:"";

    display:inline-block;

    width:0.5em;
    height:0.5em;

    border-right:1px solid #000000;
    border-bottom:1px solid #000000;

    transform:rotate(45deg) skew(5deg, 5deg);

    margin-left:0.75em;
    margin-bottom:0.3em;
}
.accessory-link > .accessory-link-item .title > span
{
    font-size:1.8rem;
    font-weight:bold;
}
.accessory-link > .accessory-link-item .title > span.sub
{
    font-size: 1.2rem;
    line-height: 1.5;
    vertical-align: text-bottom;
}



.accessory-coordinate
{
}
.accessory-coordinate .image
{
    width:50%;
    float: left;
}
.accessory-coordinate .image img
{
     border-radius: 0.5em;
}
.accessory-coordinate .text
{
    width:50%;
    padding-left: 2em;
    font-size: 1.4rem;
    float: right;
    box-sizing: border-box;
}
.accessory-coordinate .text .title
{
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.0;
    margin-bottom: 0.8em;
}
.accessory-coordinate .text .sub
{
    font-weight: normal;
    font-size: 2.0rem;
    line-height: 1.5;
    vertical-align: text-bottom;
}
.accessory-coordinate .text .sub-title
{
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.0;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.accessory-coordinate .text hr
{
    border-color: #000;
}
.accessory-coordinate .text .description
{
    margin-top: 2em;
}
.accessory-collection .title
{
    font-size: 2.4rem;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 1em;
    line-height: 1;
}
.sample-list {
	margin-top: 1.5em;
}
.sample-list .grid {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.sample-list .cell {
	width: calc(96%/5);
	margin-bottom: .75em;
	margin-left: 0;
}
.cell.is-empty {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
/*
    .sample-slide ul li
    {
        width:calc(25% - 1em);
    }
*/
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.row > hr
	{
		margin-top: 6.66666vw;
	}
    .accessory-link
    {
        margin:-0.75em;
    }
    .accessory-link > .accessory-link-item
    {
        width:calc(50% - 1.5em);
        margin:0.75em;
    }
    .accessory-link > .accessory-link-item:hover
    {
    }
    .accessory-link > .accessory-link-item .image
    {
    }
    .accessory-link > .accessory-link-item .title
    {
        margin-top:1.0em;
        line-height:1;
    }
	.accessory-link > .accessory-link-item .title:after
	{
	    margin-left:0.75em;
	    margin-bottom:0.3em;
	}
    .accessory-link > .accessory-link-item .title > span
    {
        font-size:2.6rem;
        font-weight:bold;
    }
    .accessory-link > .accessory-link-item .title > span.sub
    {
        font-size: 2.0rem;
    }


    .accessory-list > .accessory-list-item
    {
        width:calc(45% - 1em);
        margin:1em;
    }
    .accessory-list > .accessory-list-item-before
    {
        margin-right: 0;
    }
    .accessory-list > .accessory-list-item-after
    {
        margin-left: 0;
    }
    .accessory-list > .accessory-list-item-arrow
    {
        width:calc(10%);
        background-image: url(../../../_img/icon/arrow-sp.svg);
        background-position: 50% 40%;
        background-repeat: no-repeat;
        background-size: 31px auto;
        margin: 0;
    }
    .accessory-list > .accessory-list-item .title > span
    {
        font-size:2.2rem;
    }

    .accessory-coordinate
    {
        margin:0em;
    }
    .accessory-coordinate .image
    {
        width:100%;
        float: none;
        margin: 0;
    }
    .accessory-coordinate .text
    {
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
        font-size: 2.4rem;
        margin-bottom: 1.5em;
    }
    .accessory-coordinate .text .title
    {
        font-size: 4.0rem;
    }
    .accessory-coordinate .text .sub
    {
        font-size: 2.8rem;
    }
    .accessory-coordinate .text > hr {
    }
    .accessory-collection .title
    {
        font-size: 3.2rem;
    }

.sample-list .cell {
	width: calc(97.5%/2);
	}
}