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

/* PC
---------------------------------------------------------------------- */

@media (min-width: 1001px) {
	
/* visual
---------------------------------------------------------------------- */
#pageTitleVox {
	width: 100%;
	height: 345px;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/pageTitleBg.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
}
#pageTitleVox .inner{
	width: 90%;
	height: 345px;
	margin: 0 auto;
	position: relative;
}

/* inner
---------------------------------------------------------------------- */	
.faq {
	padding-top: 155px;
	text-align: center;
}

/*nav*/
.faqNav {
	margin: 100px auto 0;
	padding: 0;
	width: 100%;
}
.faqNav .inner {
	width: 100%;
	margin: 0 auto;
	max-width: 1100px;
	text-align: center;
}
.faqNav .inner ul.Nav {
	margin: 0 auto 30px;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-left: 1px solid #cdcdcd;
}
.faqNav .inner ul.Nav li {
	width: 25%;
}
.faqNav .inner ul.Nav li.code a{
	height: 100px;
	padding: 10px 0 0 0;
}
.faqNav .inner ul.Nav li a {
	display: block;
	color: #000;
	height: 100px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	position: relative;
	font-weight: bold;
	font-size: 20px;
	text-decoration: none;
	transition: 0.3s ease-in-out;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	}
.faqNav .inner ul.Nav li a::after {
  content: '';
  top: 0;
  right: 0;
  height: 100px;
  position: absolute;
  border-right: 1px solid #ccc;
}
.faqNav .inner ul.Nav li a:hover{
	background: #efefef;
}

/*faq__item*/
  .faq__item {
	  width: 100%;
	  max-width: 1100px;
	  margin: 0 auto;
	  padding: 170px 0 0;
  }
  .faq__item:last-child{
	  margin: 0 auto;
  }
  .faq__item h2 {
	  text-align: left;
  }
  .faq__item dl {
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #efefef;
  }
  .faq__item dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
    padding: 18px 30px;
    letter-spacing: 0.2em;
    position: relative;
  }
  .faq__item dt span {
    display: inline-block;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    color: #000;
	  font-size: 24px;
    font-weight: bold;
	font-family: 'Zen Kaku Gothic New', sans-serif;
  }
  .faq__item dt i {
    position: absolute;
    top: 50%;
    right: 2.5%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 17px;
    height: 17px;
  }
  .faq__item dt i::before {
    content: "";
    height: 2px;
    width: 17px;
    background-color: #B94047;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .faq__item dt i::after {
    content: "";
    height: 2px;
    width: 17px;
    background-color: #B94047;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .faq__item dt.active i::after {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  .faq__item dt::before {
    content: "Q";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-self: center;
    width: 50px;
	font-size: 2.5rem;
    color: #B94047;
	font-weight: bold;
	font-family: 'Josefin Sans', sans-serif;
  }
  .faq__item dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    padding: 18px 0;
	margin: 0 30px;
	border-top: 1px solid #cccccc;
  }
  .faq__item dd span {
    text-align: justify;
    display: inline-block;
    padding: 10px;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; */
  }
  .faq__item dd span a {
    display: inline-block;
    text-decoration: underline;
    padding: 0 4px;
  }
  .faq__item dd::before {
    content: "A";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-self: center;
    width: 50px;
	font-weight: bold;
	font-family: 'Josefin Sans', sans-serif;
    font-size: 2.5rem;
    color: #999999;
  }
}

/* SP
---------------------------------------------------------------------- */
@media screen and (max-width:1000px){
/* visual
---------------------------------------------------------------------- */
#pageTitleVox {
	width: 100%;
	height: 250px;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/pageTitleBg_sp.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
	margin-top: -80px;
}
#pageTitleVox .inner{
	width: 90%;
	height: 250px;
	margin: 0 auto;
	position: relative;
}

/* inner
---------------------------------------------------------------------- */	
.faq {
	margin-top: 0;
	text-align: left;
}

/*nav*/
.faqNav {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.faqNav .inner {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.faqNav .inner ul.Nav {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.faqNav .inner ul.Nav li {
	width: 100%;
	border-top: 1px solid #ccc;
}
.faqNav .inner ul.Nav li.line{
	border-bottom: 1px solid #ccc;
}
.faqNav .inner ul.Nav li a {
	display: block;
	color: #000;
	margin: 0 auto;
	position: relative;
	font-weight: bold;
	font-size: 20px;
	padding: 20px 0;
	text-decoration: none;
	transition: 0.3s ease-in-out;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	}
.faqNav .inner ul.Nav li a::after {
  content: '';
  top: 0;
  right: 0;
  height: 80px;
  position: absolute;
}

/*faq__item*/
  .faq__item {
	  width: 90%;
	  margin: 0 auto 80px;
	  padding: 0;
  }
  .faq__item:last-child{
	  margin: 0 auto;
  }
  .faq__item h2 {
	  text-align: left;
  }
  .faq__item dl {
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #efefef;
  }
  .faq__item dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
    padding: 18px 30px;
    letter-spacing: 0.2em;
    position: relative;
  }
  .faq__item dt span {
    display: inline-block;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    color: #000;
	/* font-size: 1.5rem; */
	font-size: 1.2rem;
    font-weight: bold;
	line-height: 1.5;
	font-family: 'Zen Kaku Gothic New', sans-serif;
  }
  .faq__item dt i {
    position: absolute;
    top: 50%;
    right: 2.5%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 17px;
    height: 17px;
  }
  .faq__item dt i::before {
    content: "";
    height: 2px;
    width: 17px;
    background-color: #B94047;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .faq__item dt i::after {
    content: "";
    height: 2px;
    width: 17px;
    background-color: #B94047;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .faq__item dt.active i::after {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  .faq__item dt::before {
    content: "Q";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-self: center;
    width: 50px;
	font-size: 2rem;
    color: #B94047;
	font-weight: bold;
	font-family: 'Josefin Sans', sans-serif;
  }
  .faq__item dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 18px 0;
	margin: 0 30px;
	border-top: 1px solid #cccccc;
  }
  .faq__item dd span {
    text-align: justify;
    display: inline-block;
    padding: 10px;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; */
  }
  .faq__item dd span a {
    display: inline-block;
    text-decoration: underline;
    padding: 0 4px;
  }
  .faq__item dd::before {
    content: "A";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-self: center;
    width: 50px;
	font-weight: bold;
	font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    color: #999999;
  }
}