@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 751px) {
	.faq__boxTtl{
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
}

	.faq__box  {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 750px) {
	.faq__box  {
    width: 84vw;
}
}



/*============
.faq__boxLinkButton 
=============*/
.faq__box .faq__boxLinkButton {
}
.faq__box .faq__boxLinkButton ul{
    letter-spacing: -.40em;/* 文字間を詰めて隙間を削除する。 */
    text-align: justify;
    text-justify: distribute-all-lines;
}
.faq__box .faq__boxLinkButton ul:after {
	content:"";
	display: inline-block;
	width: 100%;
	line-height:0;
	height: 0;
} 
.faq__box .faq__boxLinkButton li{
    letter-spacing: 0.1em;
    display: inline-block;/*ブロックレベル要素に横並びにする*/
    width: 314px;
    text-align: center;
    border: 1px solid #000000;
    border-radius: 70px;
    font-size: 16.2px;
    line-height: 35px;
    margin-bottom: 18px;
}
.faq__box .faq__boxLinkButton li {
    position: relative;
}
.faq__box .faq__boxLinkButton li a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.faq__box .faq__boxLinkButton li:hover{
    background-color: #578EBD;
    color: #FFFFFF;
    border: 1px solid #578EBD;
}
.faq__box .faq__boxInner .faq__boxInner__group{
	padding-top: 70px;
	margin-top: -70px;
}
@media screen and (max-width: 750px) {
	.faq__box .faq__boxLinkButton li{
    width: 84vw;
    font-size: 3.466vw;
    line-height: 9.333vw;
    margin-bottom: 2.933vw;
}
	.faq__box .faq__boxInner .faq__boxInner__group{
	padding-top: 30vw;
	margin-top: -30vw;
}
}


/*============
.faq__box__border
=============*/
.faq__box .faq__boxInner .faq__box__border{
    background-color: #578EBD;
    color: #FFFFFF;
    text-align: center;
    font-size: 24px;
}



/*============
.faq__boxInner
=============*/
.faq__boxInner .faq__group {
    margin-bottom: 90px;
}
.faq__item {
    cursor: pointer;
    display: block;
    margin-bottom: 60px;
    text-align: justify;
}
.faq__item__link {
    display: block;
    position: relative;
    color: #2271AA;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 38px;
    margin-bottom: 8px;
	cursor:default;
}
.faq__item__link:after {
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}
.faq__item__link.on:after {
  content: '\f068';
	color: #578ebd;
}
 
.submenu {
  background: #fff;
	cursor:default;
}
@media screen and (max-width: 750px) {
	.faq__boxInner .faq__group {
    margin-bottom: 15.6vw;
}
	.submenu {
        display: none;
	}
	.faq__item__link {
    font-size: 3.466vw;
    margin-top: 6.933vw;
    margin-bottom: 0px;
    padding-bottom: 0px;
	cursor:pointer;
	}
	.faq__item__link p{
		width: 75vw;
	}
	.faq__item {
    border-bottom: 1px solid #000000;
    padding-bottom: 6.933vw;
	}
	}
@media screen and (min-width: 751px) {
	.faq__item__link:after {
		display: none;
	}
	.faq__item__link.on:after {
		display: none;
	}
	}


/*20200407追加分*/
.voice__boxTtl h2 {
    background-image: url("../img/faq/faq.png");
}

/* ============================================================
   コーポレートデザイン統一オーバーライド
   ============================================================ */

/* Q&Aタブボタン */
.faq__box .faq__boxLinkButton li {
    border-color: #cdd8e8;
    border-radius: 4px;
    color: #1c2b3a;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.faq__box .faq__boxLinkButton li:hover {
    background-color: #e6eef8;
    color: #1a5fa8;
    border-color: #1a5fa8;
}

/* Q（質問）帯 */
.faq__box .faq__boxInner .faq__box__border {
    background-color: #1a5fa8 !important;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* A（回答）リンクカラー */
.faq__box .faq__boxInner h4 {
    color: #0b1f38 !important;
}
.faq__box .faq__boxInner a {
    color: #1a5fa8 !important;
}


/* ============================================================
   タブレット対応（751px〜1024px）
   ============================================================ */
@media screen and (min-width: 751px) and (max-width: 1024px) {
    .faq__boxTtl {
        width: 90%;
        max-width: 1000px;
    }
    .faq__box {
        width: 90%;
        max-width: 1000px;
    }
    .faq__box .faq__boxLinkButton li {
        width: 45%;
        min-width: 200px;
    }
}