@charset "utf-8";

/*
************************************************************************
* 着物一覧
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* 着物一覧
************************************************************************
*/

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

    margin:-1em;
}
.kimono-link > .kimono-link-item
{
    width:calc(25% - 2em);
    margin:1em;
}
.kimono-link > .kimono-link-item:hover
{
    text-decoration:none;
}
.kimono-link > .kimono-link-item .image
{
    border-radius:0.5em;
    border-radius:0.5em;
    overflow:hidden;
}
.kimono-link > .kimono-link-item .title
{
    margin-top:1.0em;
    line-height:1;
}
.kimono-link > .kimono-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;
}
.kimono-link > .kimono-link-item .title > span
{
    font-size:1.8rem;
}
.kimono-link > .kimono-link-item .title > span > small {
	font-weight: normal;
	font-size: .7em;
	margin-left: .6em;
	margin-right: .3em;
	vertical-align: 16%;
}
.kimono-link > .kimono-link-item .title > span.sub
{
    font-size: 1.2rem;
    vertical-align: text-top;
}
a.link
{
    text-decoration: underline;
}
a.link:hover
{
    text-decoration: none;
}

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

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

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

	width:0.5em;
	height:0.5em;

	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.newcostume{
	/*border:2.5px solid #ee6c91;
	border-radius: 0.7em*/
}
.costume-list li .thumbnail .newcostume_title{
	display:none;
	
	/*position: absolute;
	line-height: 1;
	top: 0.5em;
	left: 0.5em;
	width: 50%;*/
}
.costume-list li .thumbnail .newcostume_title p{
	display:none;
	
	/*display: inline-block;
	background-color: #ee6c91;
	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;
}


.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 .sub
{
	display:block;
	font-size:1.0rem;
	line-height:1.2;

	margin-top:0.5em;
}
.costume-list li .title .limit {
	font-size: .75em;
	color: #ee0000;
}

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

	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.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.5em;

	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 .sub
	{
		font-size:1.6rem;
	}

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

		top:0.5em;
		right:0.5em;

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

		display:block;

		position:absolute;

		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%, -65%) rotate(-45deg);

		width:0.8em;
		height:0.5em;

		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% + 0em);
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:100%;
	height:calc(100vh);
	
	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
}
iframe.modal,
div.modal
{
	/*
	position:absolute;

	top:calc(50% + 2em);
	left:50%;

	transform:translate(-50%, -50%);

	width:100%;
	height:calc(80vh - 2em);

	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
	*/
	width:100%;
	height:calc(100vh);
	
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
	
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}
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:0px solid transparent;
    background-color:transparent;
}
button.btnModalClose:before,
button.btnModalClose:after
{
	content:"";
	display:block;
	position:absolute;

	top:50%;
	left:23%;

	width:50px;
	height:2px;

	background-color:#000000;
}
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; */
		height:100% !important;
		
		border-radius:0em;
		border:0px solid #FFFFFF;
		background-color:#FFFFFF;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	iframe.modal,
	div.modal
	{
		width:100vw;
		/* height:calc(100vh - 0vw) !important; */
		height:100% !important;
		
		border-radius:0.5em;
		border:1px solid #FFFFFF;
		background-color:#FFFFFF;
		/*
		position:absolute;

		top:15vw;
		bottom:0;
		left:0;
		right:0;

		transform:translate(0%, 0%);

		width:100%;
		height:calc(100% - 15vw);

		border-radius:0em;
		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 transparent;
	    background-color:transparent;
	}
	button.btnModalClose:before,
	button.btnModalClose:after
	{
		content:"";
		display:block;
		position:absolute;

		top:50%;
		left:25%;

		width:8vw;
		height:1px;

		background-color:#000000;
	}
	button.btnModalClose:before
	{
		transform:rotate(45deg);
	}
	button.btnModalClose:after
	{
		transform:rotate(-45deg);
	}
}
/*
************************************************************************
* モーダル（ページ内）
************************************************************************
*/
#modalShiromuku,
#modalIrouchikake
{
	height:100%;
	padding: 100px;
	overflow-y:scroll;
}
.modal-contents .modal-title
{
	font-size:1.8rem;
	font-weight:bold;
	
	padding-bottom:0.5em;
	margin-bottom:0.5em;
	
	border-bottom:1px solid #aaaaaa;
}
.modal-contents .modal-description
{
	margin-bottom:1em;
}
.modal-contents .modal-table
{
	width:100%;
}
.modal-contents .modal-table th
{
	vertical-align:top;
	text-align:left;
	font-weight:bold;
}
.modal-contents .modal-table td
{
	padding-bottom:0.5em;
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	#modalShiromuku,
	#modalIrouchikake
	{
		padding: 12vw 8vw 8vw;
	}
	.modal-contents .modal-title
	{
		font-size:2.8rem;
		font-weight:bold;
		
		padding-bottom:0.5em;
		margin-bottom:0.5em;
		
		border-bottom:1px solid #aaaaaa;
	}
	.modal-contents .modal-description
	{
		margin-bottom:1em;
	}
	.modal-contents .modal-table
	{
		width:100%;
	}
	.modal-contents .modal-table th
	{
		vertical-align:top;
		text-align:left;
		font-weight:bold;
	}
	.modal-contents .modal-table td
	{
		padding-bottom:0.5em;
	}
}