@charset "utf-8";

/*
************************************************************************
* ドレス&タキシード一覧
* @copyright Revolme Inc.
************************************************************************
*/
.costume-link {
	margin-top: 15px;
	text-align: center;
	box-sizing: border-box;
	border: 1px #000 solid;
	padding: 0.5em;
}
/*
************************************************************************
* ドレス&タキシード
************************************************************************
*/


.dress-demand
{
    font-size: 1.3rem;
}
.dress-demand .block
{
    margin-top: 1em;
    padding: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 0.5em;
}
.dress-demand .block
{
    margin-bottom: 1em;
}
.dress-demand .block .block-01
{
    max-width: 540px;
    width: 50%;
    float: left;
}
.dress-demand .block .block-02
{
    max-width: 540px;
    width: 50%;
    padding-left: 25px;
    float: right;
}

.dress-demand .block > ul li
{
    margin: 0;
    list-style: none;
    line-height: 1.5;
}
.dress-demand .caption {
    font-size: 1.2rem;
    color: #666666;
    line-height: 1.625;
}



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

    margin:-1em;
}
.dress-link > .dress-link-item
{
    width:calc(25% - 2em);
    margin:1em;
}
.dress-link > .dress-link-item:hover
{
    text-decoration:none;
}
.dress-link > .dress-link-item .image
{
    border-radius:0.5em;
    border-radius:0.5em;
    overflow:hidden;
}
.dress-link > .dress-link-item .title
{
    margin-top:1.0em;
    line-height:1;
}
.dress-link > .dress-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);

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

/*===大きいサイズタグ===*/
.costume-list li .thumbnail .large_title {
	position: absolute;
	line-height: 0.8;
	bottom: 0.5em;
	left: 0.5em;
	width: 60%;
}
.costume-list li .thumbnail .large_title p{
	display: inline-block;
	background-color: #000000;
	color: #FFFFFF;
	font-size:.8em;
	padding: 0.4em;
	border-radius: .5em;
}
.costume-list li .title .limit {
	font-size: .75em;
	color: #ee0000;
}
/*===新作タグ===*/

.costume-list li .thumbnail.newcostume{
	/*border:2.5px solid #9e8876;
	border-radius: 0.7em*/
}
.costume-list li .thumbnail .newcostume_title{
	display:none;
	
	/*position: absolute;
	line-height: 1;
	bottom: 0.5em;
	left: 0.5em;
	width: 50%;*/
}
.costume-list li .thumbnail .newcostume_title p{
	display:none;
	
	/*display: inline-block;
	background-color: #9e8876;
	color: #FFFFFF;
	padding: 0.4em;*/
}
.costume-list li .thumbnail .newcostume_title p:first-of-type{
	border-radius: 0.5em 0.5em 0.5em 0;
}
.costume-list li .thumbnail .newcostume_title p:last-of-type{
	border-radius: .5em;
}

/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {

}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {

    .dress-demand
    {
        font-size: 2.4rem;
    }
    .dress-demand .block
    {
        padding: 3vw 4vw;
    }
    .dress-demand .block
    {
        font-size: 2.2rem;
    }
    .dress-demand .block .block-01
    {
        max-width: 767px;
        /*width: 100%;
        float: none;*/
        margin-bottom: 4vw;
    }
    .dress-demand .block .block-02
    {
        max-width: 767px;
        /*width: 100%;
        float: none;*/
        padding-left: 0px;
    }
    .dress-demand .block > ul li
    {

    }
    .dress-demand .caption {
        font-size: 2.2rem;
    }

    .dress-link
    {
        margin:-0.75em;
    }
    .dress-link > .dress-link-item
    {
        width:calc(50% - 1.5em);
        margin:0.75em;
    }
    .dress-link > .dress-link-item:hover
    {
    }
    .dress-link > .dress-link-item .image
    {
    }
    .dress-link > .dress-link-item .title
    {
        margin-top:1.0em;
        line-height:1;
    }
    .dress-link > .dress-link-item .title > span
    {
        font-size:2.6rem;
        font-weight:bold;
    }
    .dress-link > .dress-link-item .title > span.sub
    {
        font-size: 2.0rem;
    }
    .dress-list > .dress-list-item
    {
        width:calc(45% - 1em);
        margin:1em;
    }
    .dress-list > .dress-list-item-before
    {
        margin-right: 0;
    }
    .dress-list > .dress-list-item-after
    {
        margin-left: 0;
    }
    .dress-list > .dress-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;
    }
    .dress-list > .dress-list-item .title > span
    {
        font-size:2.2rem;
    }
}

/*
************************************************************************
* 一覧制御
************************************************************************
*/
.tag-list
{
    margin:0;
    padding:0;
    list-style:none;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;

    line-height:1;

    margin:-0.5em;
}
.tag-list li
{
    margin:0;
    padding:0;

    margin:0.5em;
    padding:0.5em 1.2em;

    border-radius:2em;

    border:1px solid #000000;

    cursor:pointer;

    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
.tag-list li:last-child
{
    margin-right:0em;
    margin-left:1em;
}
.tag-list li span.tag:after
{
    content:"";

    display:inline-block;

    margin-left:0.5em;

    width:0.6em;
    height:0.6em;

    transform:translateY(-25%) rotate(45deg) skew(10deg, 10deg);

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

    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
.tag-list li span.check:before
{
    content:"";

    display:inline-block;

    margin-right:0.5em;

    width:0.8em;
    height:0.6em;

    transform:translate(-50%, -30%) rotate(-45deg);

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

    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
.tag-list li:hover,
.tag-list li.active
{
    background-color:#000000;
    color:#FFFFFF;
}
.tag-list li:hover span.tag:after,
.tag-list li.active span.tag:after
{
    border-right:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
}
.tag-list li:hover span.check:before,
.tag-list li.active span.check:before
{
    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
    .tag-list li:last-child
    {
        margin:0.5em;
    }
}

/*
************************************************************************
* 一覧
************************************************************************
*/
.costume-list
{
    margin:0;
    padding:0;
    list-style:none;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;

    margin:-1em;
}
.costume-list li
{
    width:calc(20% - 2em);
    margin:1em;

    cursor:pointer;

    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
.costume-list li:hover
{
    opacity: 0.7;
}
.costume-list li .thumbnail img
{
    border-radius:0.5em;
    width:100%;
}
/*===左 タグ（黒背景・白文字）===*/
.costume-list li .thumbnail .tagLeft{
	position: absolute;
	bottom: 0.5em;
	left: 0.5em;
	background: rgba(0,0,0,0.7);
	padding: 0 3px ;
	border-radius: 0.5em;
	max-width:50%;
}
.costume-list li .thumbnail .tagLeft p{
	color:#fff;
	font-size: 0.7em;
	line-height: 2;
	letter-spacing: -0.05px;
}
/*===右 タグ（白背景・黒文字）===*/
.costume-list li .thumbnail .tagRight{
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	background: rgba(255,255,255,0.7);
	padding: 0 2px 0 5px;
	border-radius: 0.5em;
	max-width:45%;
}
.costume-list li .thumbnail .tagRight p{
	font-size: 0.7em;
	line-height: 2;
}
/*===フラグメンツタグ===*/
.costume-list li .thumbnail .designers_title{
	position: absolute;
	line-height: 0.8;
	bottom: 0.5em;
	left: 0.5em;
	width: 50%;
}
.costume-list li .thumbnail .designers_title p{
	display: inline-block;
	background-color: #000000;
	color: #FFFFFF;
	padding: 0.4em;
}
.costume-list li .thumbnail .designers_title p:first-of-type{
	border-radius: 0.5em 0.5em 0.5em 0;
}
.costume-list li .thumbnail .designers_title p:last-of-type{
	border-radius: 0 0 0.5em 0.5em;
	padding-top: 0;
}

.costume-list li .title
{
    margin-top:0.8em;
}
.costume-list li .title .main
{
    /*display:block;*/
    font-size:1.4rem;
    line-height:1.4;
}
.costume-list li .title .size {
	margin-left: 1.5em;
	font-size :1.25rem;
	color:#777;
}
.costume-list li .title .sub
{
    display:block;
    font-size:1.0rem;
    line-height:1.2;

    margin-top:0.5em;
}

.costume-list li .btnCheck
{
    position:absolute;

    top:1em;
    right:1em;

    /*
    width:1.5em;
    height:1.5em;
    */
    
	top:0.5em;
	right:0.5em;

	width:1.8em;
	height:1.8em;
	
	opacity:0.5;
}
.costume-list li .btnCheck:before
{
    content:"";

    display:block;

    position:absolute;

    /*
    width:1.5em;
    height:1.5em;
	*/
	
	width:1.8em;
	height:1.8em;
	
    border-radius:100%;

    border:1px solid #FFFFFF;

    background-color:transparent;
}
.costume-list li .btnCheck:after
{
    content:"";

    display:block;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-49%, -65%) rotate(-45deg);

    width:0.8em;
    height:0.6em;

    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;

    background-color:transparent;
}
.costume-list li.checked .btnCheck
{
	opacity:1.0;
}
.costume-list li.checked .btnCheck:before
{
    background-color:#FFFFFF;
}
.costume-list li.checked .btnCheck:after
{
    border-left:2px solid #bca53c;
    border-bottom:2px solid #bca53c;
}
.costume-list.layouted
{
    display:block;
}
.costume-list.layouted li
{
    position:absolute;
}
@media screen and (max-width: 1100px) {
    .costume-list
    {
        margin:-2em;
    }
    .costume-list li
    {
        width:calc(25% - 2em);
        margin:1em;
    }
}

@media screen and (max-width: 1023px) {
    .costume-list
    {
        margin:-1em;
    }
    .costume-list li
    {
        width:calc(33.3333% - 1em);
        margin:0.5em;
    }

}


/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
    .costume-list
    {
        margin:-0.5em;
    }
    .costume-list li
    {
        width:calc(33.3333% - 1em);
        margin:0.5em;
    }
    .costume-list li .thumbnail img
    {
        border-radius:0.5em;
        width:100%;
    }
    .costume-list li .title
    {
        margin-top:0.6em;
        margin-bottom:0.2em;
    }
    .costume-list li .title .main
    {
        font-size:2.4rem;
    }
	.costume-list li .title .size {
		margin-left: 1.3em;
		font-size :2.25rem;
	}
    .costume-list li .title .sub
    {
        font-size:1.6rem;
    }

    .costume-list li .btnCheck
    {
        position:absolute;

        /*
        top:1em;
        right:1em;

        width:1.5em;
        height:1.5em;
        */
        
		top:0.5em;
		right:0.5em;

		width:1.8em;
		height:1.8em;
    }
    .costume-list li .btnCheck:before
    {
        content:"";

        display:block;

        position:absolute;

        /*
        width:1.5em;
        height:1.5em;
        */
        
		width:1.8em;
		height:1.8em;

        border-radius:100%;

        border:1px solid #FFFFFF;

        background-color:transparent;
    }
    .costume-list li .btnCheck:after
    {
        content:"";

        display:block;

        position:absolute;

        top:50%;
        left:50%;

        transform:translate(-50%, -60%) rotate(-45deg);

        width:0.8em;
        height:0.6em;

        border-left:1px solid #FFFFFF;
        border-bottom:1px solid #FFFFFF;

        background-color:transparent;
    }
    .costume-list li.checked .btnCheck:before
    {
        background-color:#FFFFFF;
    }
    .costume-list li.checked .btnCheck:after
    {
        border-left:2px solid #bca53c;
        border-bottom:2px solid #bca53c;
    }
    .costume-list.layouted
    {
        display:block;
    }
    .costume-list.layouted li
    {
        position:absolute;
    }
}

@media screen and (max-width: 639px) {
    .costume-list
    {
        margin:-0.5em;
    }
    .costume-list li
    {
        width:calc(50% - 1em);
        margin:0.5em;
    }
}


/*
************************************************************************
* モーダル
************************************************************************
*/
div.modal_w
{
	position:absolute;
	
	top:calc(50%);
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:960px;
	height:calc(90vh);
	
	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
}
iframe.modal
{
	width:960px;
	height:calc(90vh);
	
	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
}
button.btnModalClose
{
    position:absolute;

    /*
    top:calc(50% - 40vh - 2.0em);
    left:calc(50% + 480px - 4em);
    */
    top:2em;
    right:2em;
    

    border-radius:4em;

    width:4em;
    height:4em;

    border:1px solid rgba(0,0,0,1.0);
    background-color:rgba(0,0,0,1.0);
}
button.btnModalClose:before,
button.btnModalClose:after
{
    content:"";
    display:block;
    position:absolute;

    top:50%;
    left:23%;

    width:2.2em;
    height:2px;

    background-color:#FFFFFF;
}
button.btnModalClose:before
{
    transform:rotate(45deg);
}
button.btnModalClose:after
{
    transform:rotate(-45deg);
}

/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	div.modal_w
	{
		position:absolute;
		
		top:0vw;
		left:0;
		
		transform:translate(0%, 0%);
		
		width:100vw;
		height:calc(100vh - 0vw) !important;
		
		border-radius:0em;
		border:0px solid #FFFFFF;
		background-color:#FFFFFF;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	iframe.modal
	{
		width:100vw;
		height:calc(100vh - 0vw) !important;
		
		border-radius:0.5em;
		border:1px solid #FFFFFF;
		background-color:#FFFFFF;
	}
    button.btnModalClose
    {
        position:absolute;

        top:4.0vw;
        left:auto;
        right:4.0vw;

        border-radius:10vw;

        width:12vw;
        height:12vw;

        border:0px solid rgba(0,0,0,1.0);
        background-color:rgba(0,0,0,1.0);
    }
    button.btnModalClose:before,
    button.btnModalClose:after
    {
        content:"";
        display:block;
        position:absolute;

        top:50%;
        left:25%;

        width:6vw;
        height:1px;

        background-color:#FFFFFF;
    }
    button.btnModalClose:before
    {
        transform:rotate(45deg);
    }
    button.btnModalClose:after
    {
        transform:rotate(-45deg);
    }
}