@charset "utf-8";

/*
************************************************************************
* よくあるご質問
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* よくあるご質問
************************************************************************
*/
.title-faq
{
	margin-bottom:1.5em;
}
.title-faq .main
{
	display:block;
	border-bottom:1px solid #222222;
	padding-bottom:1em;
	font-size:2.2rem;
	line-height:1;
}

.qanda {
    margin-bottom: 20px;
}
hr.hr-qanda
{
    margin-top: 20px;
    border-bottom: 1px solid #000;
}
.question
{
    width: 100%;
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1;
    padding-right: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #8a8998;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.question:hover {
    text-decoration: none;
    opacity:0.7;
}
.question:before
{
    content: "";
    position: absolute;
    right: 36px;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-top: 1px solid #222222;
    transform: rotate(90deg);
}
.question:after{
    content: "";
    position: absolute;
    top: -12px;
    right: 25px;
    display: inline-block;
    width: 24px;
    height:24px;
    border-bottom: 1px solid #222222;
}
.question.open:before
{
	content:none;
}

.question > span {
    float: left;
    display: inline-block;
    width: calc(100% - 55px);
}
.question span.ff-amiri
{
    width: 55px;
    padding: 0 15px 0 20px;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 0.5625;
}
.answer
{
    padding-top: 25px;
    font-size: 1.4rem;
    line-height: 1.8;
    
    height:0px;
    overflow:hidden;
    display:none;
}
.answer .ff-amiri
{
    float: left;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1;
    padding-left: 55px;
    padding-right: 15px;
    width: 100px;
    color: #e52b45;
}
.answer .text
{
    width: calc(100% - 100px);
    float: left;
    padding-top: 5px;
    padding-bottom: 25px;
    line-height: 1.8;
}
.answer a.link
{
    text-decoration: underline;
}
.answer a.link:hover
{
    text-decoration: none;
}

.icon-faq:before
{
    content: "";
    display: inline-block;
    background-position: 0 50%;
    background-repeat: no-repeat;
    margin-right: 0.5em;
    vertical-align: top;
}
.icon-faq-q:before
{
    width: 30px;
    height: 28px;
    background-image: url(../../../_img/icon/faq-q.svg);
}
.icon-faq-reserve:before
{
    width: 30px;
    height: 33px;
    background-image: url(../../../_img/icon/faq-reserve.svg);
}
.icon-faq-camera:before
{
    width: 33px;
    height: 27px;
    background-image: url(../../../_img/icon/faq-camera.svg);
}
.icon-faq-costume:before
{
    width: 29px;
    height: 31px;
    background-image: url(../../../_img/icon/faq-costume.svg);
}
.icon-faq-other:before
{
    width: 30px;
    height: 28px;
    background-image: url(../../../_img/icon/faq-other.svg);
}


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

}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.title-faq
	{
		margin-bottom:1.5em;
	}
	.title-faq .main
	{
		border-bottom:1px solid #222222;
		padding-bottom:1em;
		font-size:3.2rem;
		line-height:1;
	}
    .qanda {
        margin-bottom: 2.0vw;
    }
    hr.hr-qanda
    {
        margin-top: 2.67vw;
    }
    .question
    {
        font-size: 2.6rem;
        line-height: 1.5;
        padding-right: 0px;
        padding-bottom: 3.5vw;
    }
    .question:hover {
    }
    .question:before
    {
        display: none;
    }
    .question:after{
        display: none;
    }
    .question > span {
        width: calc(100% - 6.67vw);
    }
    .question span.ff-amiri
    {
        font-size: 4.0rem;
        padding-top: 1vw;
        padding-left: 1.3vw;
        padding-right: 1.3vw;
        width: 6.67vw;
    }
    .answer
    {
        padding-top: 2.67vw;
        font-size: 2.6rem;
        line-height: 1.7;
    }
    .answer .ff-amiri
    {
        float: left;
        font-size: 4.0rem;
        padding-left: 6.3vw;
        padding-right: 1.3vw;
        width: 13.3vw;
    }
    .answer .text
    {
        width: calc(100% - 13.3vw);
        padding-top: 0;
	    padding-bottom: 2.67vw;
    }
	.icon-faq-q:before
	{
	    width: 6.0vw;
	    height: 6.0vw;
	    transform: translateY(-10%);
	    background-image: url(../../../_img/icon/faq-q.svg);
	}
	.icon-faq-reserve:before
	{
	    width: 6.0vw;
	    height: 6.0vw;
	    transform: translateY(-10%);
	    background-image: url(../../../_img/icon/faq-reserve.svg);
	}
	.icon-faq-camera:before
	{
	    width: 6.0vw;
	    height: 6.0vw;
	    transform: translateY(-10%);
	    background-image: url(../../../_img/icon/faq-camera.svg);
	}
	.icon-faq-costume:before
	{
	    width: 6.0vw;
	    height: 6.0vw;
	    transform: translateY(-10%);
	    background-image: url(../../../_img/icon/faq-costume.svg);
	}
	.icon-faq-other:before
	{
	    width: 6.0vw;
	    height: 6.0vw;
	    transform: translateY(-10%);
	    background-image: url(../../../_img/icon/faq-other.svg);
	}
}

/*
************************************************************************
* モーダル
************************************************************************
*/
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);
	}
}
/*
************************************************************************
* モーダル（ページ内）
************************************************************************
*/
#modalKatsura
{
	height:100%;
	padding:50px;
	overflow-y:scroll;
}
.modal-contents .modal-title
{
	font-size:1.8rem;
	
	padding-bottom:0.5em;
	margin-bottom:0.5em;
	
	border-bottom:1px solid #aaaaaa;
}
.modal-contents .modal-description
{
	margin-bottom:1em;
}
.modal-description img {
	display: block;
	width: 90%;
	margin: 0 auto;
}
.modal-contents .modal-table
{
	width:100%;
}
.modal-contents .modal-table th
{
	vertical-align:top;
	text-align:left;
}
.modal-contents .modal-table td
{
	padding-bottom:0.5em;
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	#modalKatsura
	{
		padding:4vw;
	}
	.modal-contents .modal-title
	{
		font-size:2.8rem;
		
		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;
	}
	.modal-contents .modal-table td
	{
		padding-bottom:0.5em;
	}
}