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



.ac {
}



.ac-trigger {
width: 90vw;
height: 20px;
cursor: pointer;
transition: color 0.25s ease;
position: relative;
text-decoration: none;
padding: 0vw 0vw 0vw 0vw;
margin: 20px auto 20px auto;
/*background-color: #00FF00;*/
}
.ac-trigger p#works {
width: 30vw;
height: 20px;
font-size: 14px;
line-height: 20px;
text-align: center;
margin: 0px auto 0px auto;
/*background-color: #FF0000;*/
}
.ac-trigger::after {
content: "▼";
text-align: right;
width: 4vw;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
right: 0px;
top: 50%;
/*background-color: #0000FF;*/
}



.ac-panel {
overflow: hidden;
transition-property: height, visibility;
transition-timing-function: ease;
}
.ac-panel p {
font-size: 14px;
line-height: 20px;
width: 90vw;
margin: 0px auto 25px auto;
padding: 4vw 4vw 4vw 4vw;
background-color: #F2F2F2;
}



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



.ac-trigger:focus {
}

.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 : 700px){



.ac {
}



.ac-trigger {
width: 1180px;
height: 20px;
cursor: pointer;
background-color: transparent;
transition: color 0.25s ease;
position: relative;
text-decoration: none;
margin: 50px auto 50px auto;
}
.ac-trigger p#works {
width: 150px;
height: 20px;
line-height: 20px;
text-align: center;
margin: 0px auto 0px auto;
}
.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-panel {
overflow: hidden;
transition-property: height, visibility;
transition-timing-function: ease;
}
.ac-panel p {
width: 1060px;
margin: 0px auto 100px auto;
padding: 50px 60px 50px 60px;
background-color: #F2F2F2;
}



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



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



}