@charset "utf-8";

/*
************************************************************************
* ご家族衣装レンタル一覧
* @copyright Revolme Inc.
************************************************************************
*/


/*
************************************************************************
* 料金一覧
************************************************************************
*/
.rental-price-title {
	font-size: 1.35em;
	font-weight: bold;
}
.rental-price-title:before{
	display: inline-block;
	content: url(../../../_img/icon/price.svg);
	width: 35px;
	height: auto;
	vertical-align: -10px;
}
.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: 100%;
    width: 100%;
    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.8;
}
.dress-demand .caption {
    font-size: 1.2rem;
    color: #666666;
    line-height: 1.625;
}
/* == スマートフォンサイズ ======================================================*/
@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;
    }
    .dress-demand .block .block-02
    {
        max-width: 767px;
        width: 100%;
        padding-left: 0px;
        float: none;
    }
    .dress-demand .block > ul li
    {

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

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

.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;
    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;
    font-weight:bold;
}
.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;
        font-weight:bold;
    }
    .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;
    }
}
/*
************************************************************************
* キッズドレス アクセサリー注釈
************************************************************************
*/
.k_dress_disc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 50px;
}

.disc_left {
	width: 40%;
}
.disc_right {
	width: 58%;
	box-sizing: border-box;
	padding: 4vw 2.5em;
	border-top: 1px #ccc dotted;
	border-bottom: 1px #ccc dotted;
}
.disc_right p {
	line-height: 2;
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.k_dress_disc {
		display: block;
	}

	.disc_left,.disc_right {
		width: 100%;
	}
	.disc_right {
		padding: 4vw 2.5em;
		border-top: 0;
		border-bottom: 1px #ccc dotted;
	}
	.disc_right p {
		font-size: 0.75em;
	}
}

/*
************************************************************************
* 一覧制御
************************************************************************
*/
.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 .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 .thumbnail.newcostume{
	border:2.5px solid #bca53c;
	border-radius: 0.7em
}
.costume-list li .thumbnail .newcostume_title{
	position: absolute;
	line-height: 1;
	top: 0.5em;
	left: 0.5em;
	width: 50%;
}
.costume-list li .thumbnail .newcostume_title p{
	display: inline-block;
	background-color: #bca53c;
	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
{
	display: flex;
    align-items: center;
	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 .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 .size {
		margin-left: 1.3em;
		font-size :2.25rem;
	}
 
	.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:960px;
	height:calc(90vh);
	
	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:960px;
	height:calc(80vh - 2em);

	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
	*/
	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: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: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,
	div.modal
	{
		width:100vw;
		height:calc(100vh - 0vw) !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: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:25%;

		width:6vw;
		height:1px;

		background-color:#FFFFFF;
	}
	button.btnModalClose:before
	{
		transform:rotate(45deg);
	}
	button.btnModalClose:after
	{
		transform:rotate(-45deg);
	}
}
/*
************************************************************************
* モーダル（ページ内）
************************************************************************
*/
#modalTomesize
{
	height:100%;
	padding:50px;
	overflow-y:scroll;
}
.modalWap img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
.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) {
	#modalTomesize
	{
		padding:4vw;
	}
	.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;
	}
}