/*◆◇◆以下はスマホ用のCSS◆◇◆*/
@media screen and (max-width : 501px){



.ac {
}



.ac-trigger {
height: 30px;
cursor: pointer;
background-color: transparent;
transition: color 0.25s ease;
position: relative;
text-decoration: none;
padding: 0px 50px 0px 0px;
margin: 20px 0px 20px 0px;
}
img.question {
display: block;
width: 30px;
height: 30px;
float: left;
}
.ac-trigger p {
width: 68vw; /*実機検証の結果、68が限界*/
margin: 5px 0px 0px 10px;
float: left;
font-size: 14px;
line-height: 20px;
}



.ac-panel {
overflow: hidden;
transition-property: height, visibility;
transition-timing-function: ease;
}
img.answer {
display: block;
width: 30px;
height: 30px;
float: left;
padding: 0px 0px 20px 0px; /*下と揃える*/
}
.ac-panel p {
width: 80vw;
margin: 1px 0px 0px 10px;
float: left;
padding: 5px 0px 20px 0px; /*上と揃える*/
font-size: 14px;
line-height: 20px;
}



.ac-trigger::after {
content: "+";
text-align: center;
width: 15px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
right: 10px;
top: 50%;
}
.ac-trigger:focus {
}



hr.hr_ac {
border: none;
border-top: 1px dashed #C6C6C6;
margin-top: 0px;
margin-bottom: 0px;
}



.ac.js-enabled .ac-panel {
visibility: hidden;
}
.ac.is-active .ac-panel {
visibility: visible;
}
.ac.is-active > .ac-trigger::after {
content: "–";
}



}










/*◆◇◆以下はPC用のCSS◆◇◆*/
/*ビューエリアの最小幅がこのサイズより大きい場合に以下のスタイルを適用*/
@media screen and (min-width : 500px){



.ac {
}



.ac-trigger {
height: 30px;
cursor: pointer;
background-color: transparent;
transition: color 0.25s ease;
position: relative;
text-decoration: none;
padding: 0px 50px 0px 0px;
margin: 20px 0px 20px 0px;
}
img.question {
display: block;
width: 30px;
height: 30px;
float: left;
}
.ac-trigger p {
width: 960px;
margin: 1px 0px 0px 10px;
float: left;
}



.ac-panel {
overflow: hidden;
transition-property: height, visibility;
transition-timing-function: ease;
}
img.answer {
display: block;
width: 30px;
height: 30px;
float: left;
padding: 0px 0px 20px 0px; /*下と揃える*/
}
.ac-panel p {
width: 980px;
margin: 1px 0px 0px 10px;
float: left;
padding: 0px 0px 20px 0px; /*上と揃える*/
}



.ac-trigger::after {
content: "+";
text-align: center;
width: 15px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
right: 10px;
top: 50%;
}
.ac-trigger:focus {
}



hr.hr_ac {
border: none;
border-top: 1px dashed #C6C6C6;
margin-top: 0px;
margin-bottom: 0px;
}



.ac.js-enabled .ac-panel {
visibility: hidden;
}
.ac.is-active .ac-panel {
visibility: visible;
}
.ac.is-active > .ac-trigger::after {
content: "–";
}



}