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

#faq #topimg{
	padding:10vw 20px;
	margin:auto;
	height: auto;}

#faq #topimg p{
	font-size:1.2vw;
	text-align:center;}

#contents #faq .wrap{
	padding-top:0;}

h3 {
	font-size:1.8vw;
	color:#004e90;
	line-height:2;
}

h3::after {
	content: '';
	display: block;
	background: #004e90;
	height: 2px;
	width: 9999px;
	margin-bottom: 5px;
	position:absolute;
	left:0;	
}


@media screen and (max-width: 769px) {

#faq #topimg{
	padding:80px 20px;}

#faq #topimg p{
	font-size:1.2rem;}

}


@media screen and (max-width: 480px) {

#faq #topimg{
	padding:60px 20px;}

#faq #topimg p{
	text-align:left;}

}



	
/* タブ切替 */

label.panel-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  width: 100%;
  color: #bdc3c7;
  cursor: pointer;
  background-color: #ecf0f1;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

label.panel-label:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ecf0f1;
}


label.panel-label:hover {
  color: #003399;
}

#panels {
  background-color: white;
  width:100%;
  margin:0 auto;
}
#panels .container {
  margin: 0 auto;
  width: 100%;
}
#panels section header label.panel-label {
  padding: 12px 24px;
  box-sizing: border-box;
}
#panels section .main {
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
  overflow-y: hidden;
}

#panel-1-ctrl:checked ~ #panels #panel-1 .main {
  max-height: none;
  opacity: 1;
}

#panel-2-ctrl:checked ~ #panels #panel-2 .main {
  max-height: none;
  opacity: 1;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
  pointer-events: none;
  cursor: default;
  -webkit-transform: translate3d(0, 1px, 0);
  transform: translate3d(0, 1px, 0);
  box-shadow: none;
  border-right: none;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
  background-color: #004e90;
  color: #fff;
  font-size:1.2vw;
}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
  pointer-events: none;
  cursor: default;
  -webkit-transform: translate3d(0, 1px, 0);
  transform: translate3d(0, 1px, 0);
  box-shadow: none;
  border-right: none;
}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
  background-color: #004e90;
  color: #fff;
  font-size:1.2vw;
}

ul#tabs-list {
  display: flex;
  justify-content: center;
  list-style: none;
  text-align: center;
  position: relative;
  top:-3.8vw;
}
ul#tabs-list li {
  text-align: center;
  font-size: 1.2vw;
  width: 30%;
  position: relative;
  margin-right:3vw;
}

ul#tabs-list li:last-of-type{
	margin-right:0;}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label:before,#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #004e90;
}

ul#tabs-list li:hover {
  -webkit-transition: none;
  transition: none;
  border-right: none;
}

ul#tabs-list li label.panel-label {
  position: relative;
  padding: 12px 0;
  font-size: 1.2vw;
}
ul#tabs-list li label.panel-label::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 100%;
  background-color: #003399;
  height: 0;
  -webkit-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

ul#tabs-list li label.panel-label:hover::after {
  height: 6px;
}

.main {
    width: 100%;
    margin: 0 auto;
}
.panel-radios {
  display: none;
}

/*body {
  background: #ccc;
}
*/


@media screen and (max-width: 769px) {

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
  background-color: #004e90;
  color: #fff;
  font-size: 1.3rem;
}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
  font-size: 1.3rem;
}

ul#tabs-list li label.panel-label {
  position: relative;
  padding: 12px 0;
  font-size: 1.3rem;
}

ul#tabs-list li {
  width: 50%;
}

}


<!-- Q&A展開 -->

.accordion-container {
  position: relative;
  width: 100%;
  border: 1px solid #0079c1;
  border-top: none;
  outline: 0;
  cursor: pointer
}

.accordion-container .article-title {
  display: block;
  position: relative;
  margin: 0;
  padding: 2vw 2vw 2vw 4vw;
  font-size: 1.4vw;
  font-weight: normal;
  color: #000;
  background: #fff;
  cursor: pointer;
}

/*.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
  background-color: #00aaa7;
  color: white;
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
}*/

.article-title{
  position: relative;
}


.article-title:before{
  content: "Q";
  position: absolute;
  display:block;
  left:1vw;
  top:0;
  font-size:3vw;
  color: #004e90;
}


.article-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.article-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-content {
  position:relative;
  display: none;
  padding: 2vw 2vw 2vw 6vw;
  margin-bottom:2vw;
  background:#fafafa;
}


.accordion-content:before{
  content: "A";
  position: absolute;
  display:block;
  left:3vw;
  top:0;
  font-size:3vw;
  color: #004e90;
}


/* CSS for CodePen */
.accordion-container {
  width: 100%;
  margin: 20px auto;
}

.accordion-content a:link{
	color:#F90;
	text-decoration: underline;
}


@media screen and (max-width: 769px) {

.accordion-container .article-title {
  padding: 10px 40px 10px 30px;
  font-size: 1.3rem;
}

.article-title:before{
  left:0;
  top:5px;
  font-size:2rem;
}

.accordion-content {
  padding: 10px 40px 10px 30px;
  font-size: 1.2rem;
  margin-bottom:10px;
}

.accordion-content:before{
  left:0;
  top:5px;
  font-size:2rem;
}


}