@charset "utf-8";

/* =============================================================================
   レイアウト
============================================================================= */

/* MV
--------------------------------------------*/
.hdPage{
	position: relative;
	background: url("/_common/images/bg_texture.png"), linear-gradient(135deg, #aee4e0 0%,#efe2f7 100%);
}
.hdPage_inner{
	position: relative;
	z-index: 1;
	padding-bottom: 62px;
}

.hdPage_block{
	padding: 16px 0;
}
.hdPage_img{
	position: absolute;
	right: 10%;
	bottom: -8px;
	width: 138px;
	height: 85px;
	background: url("/faq/_images/mv_faq.png") center / 100% auto no-repeat;
}
.hdPage_img::before{
	position: absolute;
	left: calc(100% + 12px);
	top: 0;
	content: "";
	display: inline-block;
	width: 25px;
	height: 36px;
	background: url("/faq/_images/mv_question.png") center / 100% auto no-repeat;
	animation: questionmove 2s steps(2) infinite;
}

@media print, screen and (min-width:960px) {
	.hdPage{
		padding-bottom: 0;
	}
	.hdPage::before{
		height: 86px;
	}
	.hdPage_block{
		padding: 32px 40px;
		width: 50%;
		max-width: 650px;
		border-radius: 0 0 32px 32px;
		background-color: rgba(255, 255, 255, 0.8);
	}
	.hdPage_img{
		right: 80px;
		bottom: -24px;
		width: 448px;
		height: 275px;
	}
	.hdPage_img::before{
		left: calc(100% + 16px);
		width: 47px;
		height: 67px;
	}
}

@keyframes questionmove{
	from{
		transform:rotate(8deg)
	}
	to{
		transform:rotate(-24deg)
	}
}

/* NAV
--------------------------------------------*/
.pagenavs{
	width: 100%;
	background: url("/_common/images/bg_texture.png"), #5b5a58;
}
.pagenavs_inner{
}
.pagenavs_listitem a{
	position: relative;
	display: block;
	padding: 8px;
	color: #fff;
	font-weight: boldl;
	letter-spacing: .2em;
}


.pagenavs_listitem a::before{
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 0;
	height: 2px;
	content: "";
	transform: translateX(-50%);
	border-radius: 50vw;
	background: #a7cc09;
	transition: -webkit-width .2s ease;
	transition: width .2s ease;
	transition: width .2s ease, -webkit-width .2s ease;
}
.pagenavs_listitem.is-active{
	width: calc(100% - 32px);
}

.pagenavs_listitem .m-ico{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
	font-size: 2.0rem;
    transition: transform 0.5s ease-in-out;
}
.pagenavs_listitem a.is-current{
	color: #e3d278;
	font-weight: bold;
}
.pagenavs_listitem a.is-current .m-ico{
	transform: translateY(-50%) rotate(-90deg);
}
.pagenavs_listitem a.is-top .m-ico {
    transform: translateY(-50%) rotate(-180deg);
}
@media screen and (max-width:959px) {
	.pagenavs_list{
		display: flex;
		flex-wrap: wrap;
	}
	.pagenavs_listitem{
		width: calc(100% / 2);
	}
	body:not(.pagenavFixed) .pagenavs_listitem:nth-child(odd){
		border-right: dashed 1px rgba(255,255,255,0.5);
	}
	body:not(.pagenavFixed) .pagenavs_listitem:not(:last-child){
		border-bottom: dashed 1px rgba(255,255,255,0.5);
	}
	body:not(.pagenavFixed) .pagenavs_listitem:nth-child(odd):nth-child(2){
		border-bottom: none;
	}
	
	.pagenavFixed .pagenavs{
		position: sticky;
		left: 0;
		top: 0;
		z-index: 10;
		padding: 65px 0 8px;
		width: 100%;
		animation: animationNav 0.3s forwards;
	}
	.pagenavFixed .pagenavs_inner{
		overflow-x: auto;
	}
	.pagenavFixed .pagenavs_list{
		flex-wrap: nowrap;
	}
	.pagenavFixed .pagenavs_listitem:not(:first-child){
		border-left: dashed 1px rgba(255,255,255,0.5);
	}
	.pagenavFixed .pagenavs_listitem a{
		padding: 0 calc(1em + 16px) 0 16px;
		white-space: nowrap;
	}
	.pagenavFixed .pagenavs_listitem .m-ico{
		right: 8px;
	}
	
}
@media print, screen and (min-width:960px) {
	.pagenavs{
		position: sticky;
		left: 0;
		top: 120px;
		z-index: 10;
		padding: 0 24px;
		width: 300px;
		border-radius: 32px;
	}
	.pagenavs_inner{
		margin: 0 auto;
		padding: 16px 0;
		width: 100%;
		max-width: 1400px;
	}
	.pagenavs_list{
		margin-left: -8px;
	}
	.pagenavs_listitem:not(:first-child){
		border-top: dashed 1px rgba(255,255,255,0.5)
	}
	.pagenavs_listitem a{
		padding: 8px 16px;
	}
	.pagenavs_listitem a:not(.is-current):hover{
		color: #efe8c0;
	}
}
@keyframes animationNav {
    0% {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(0)
    }
}


/* =============================================================================
   PAGE
============================================================================= */
.faq{
	padding-bottom: 40px;
	background: #f5f5f1;
}
.faqWp{
}
.faqBd{
	margin-top: 40px;
}

.faqSect{
	margin: 0 8px;
}
.faqSect:not(:first-child) {
	margin-top: 30px
}
.ttl{
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: .2em;
}

.faqBlock {
    margin-top: 16px;
	padding: 8px;
	border-radius: 16px;
	background: #fff;
}
.faqItem:not(:first-of-type) {
	border-top: dashed 1px #ccc
}

.faqTtl {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity .2s;
    padding: 16px 0 16px 8px;
}

.faqTtl span {
	position: relative;
    display: flex;
	padding-left: 46px;
	font-weight: 500;
	transition: color .3s ease;
}
.faqTtl span:before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	display: inline-block;
    margin: -2px 8px 0 0;
	width: 30px;
	height: 30px;
	background: url("/faq/_images/faq_q.svg") center / 100% auto no-repeat;
}
.faqTtl .m-ico {
    margin: 0 0 0 5px;
    font-size: 2.6rem
}

.faqTtl .m-ico::before {
    line-height: 1;
    transform: rotateZ(0deg);
    transition: all .3s ease
}

.faqTtl.is-open span{
	color: #38a5a8;
}
.faqTtl.is-open .m-ico:before {
    transform: rotateZ(179deg)
}

.faqTxt {
    display: none;
    padding: 0 8px 8px;
    line-height: 2
}

.faqTxt_box {
	position: relative;
    display: flex;
	padding: 16px;
	line-height: 1.8;
	border-radius: 16px;
	background: #f0f7f7;
}
.faq-sect__dl dd {
    display: flex!important;
    position: relative
}

.faqTxt a {
    text-decoration: underline;
    transition: opacity .2s
}
@media print, screen and (min-width:960px) {
	.faqWp{
		display: flex;
		align-items: flex-start;
		margin: 0 auto;
		padding: 40px 0;
		max-width: 1400px;
		width: 100%;
	}
	.faqBd{
		flex: 1;
		margin: 0 0 0 40px;
	}
	
	
	.faqSect{
	}
	.faqSect:not(:first-child) {
        margin-top: 40px;
    }
	.ttl{
		font-size: 3.0rem;
	}
	.faqBlock {
		margin-top: 24px;
		padding: 16px;
		border-radius: 32px;
	}
    .faqTtl {
        padding: 24px
    }
	.faqTtl span:before,.faqTxt_box:before {
		margin-right: 16px;
		font-size: 2.6rem;
	}
    .faqTtl:hover {
        opacity: .6
    }
    .faqTxt {
        padding: 0 24px 24px
    }
    .faq-wrap {
        margin-top: 50px
    }
	.faqTxt_box {
		padding: 16px 24px;
		border-radius: 24px;
	}
    .faqTxt_box a:hover {
        opacity: .6
    }
}