@charset "UTF-8";

/*==================================================================

CONTENTS_HEADER

==================================================================*/
@media screen and (min-width:1024px) {
.smp{
display:none;
}
.contents_header{
width:100%;
height:350px;
margin:100px auto 130px;
background:url("../../faq/images/header_faq.jpg") no-repeat 50%;
background-size:cover;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
.contents_header{
width:100%;
height:200px;
margin:100px auto 100px;
background:url("../../faq/images/header_faq_smp.jpg") no-repeat 50%;
background-size:cover;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
.contents_header{
width:100%;
height:150px;
margin:80px auto;
background:url("../../faq/images/header_faq_smp.jpg") no-repeat 50%;
background-size:cover;
}
}









/*==================================================================

FAQ_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.faq_area{
width:1000px;
margin:60px auto 100px;
padding:0;
}
.faq_area p{
text-align:center;
}
.faq_area h3{
font-family:TsukuMinPr6-L;
font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.1em;
}
.faq_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.faq_area h3 span::before, .faq_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.faq_area h3 span::before{
left:100%;
}
.faq_area h3 span::after{
right:100%;
}
.accordion{
width:100%;
margin:3em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom: 1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-family:TsukuMinPr6-D;
font-size:16px;
border:solid 1px #000;
padding:1.5em;
display:block;
color:#000;
}
.title:first-letter{
font-family:TsukuAOldMinPr6-R;
font-size:20px;
margin-right:1.0em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.75em;
top:1.75em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:90%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.content p{
margin:1em;
line-height:1.6em;
text-align:justify;
text-indent:-2.5em;
padding-left:3em;
}
.content p:first-letter{
font-family:TsukuAOldMinPr6-R;
font-size:20px;
margin-right:1.0em;
}
.toggle:checked + .title + .content{
max-height:500px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform: rotate(90deg) !important;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.faq_area{
width:98%;
margin:50px auto 80px;
padding:0;
}
.faq_area p{
text-align:center;
}
.faq_area h3{
font-family:TsukuMinPr6-L;
font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.1em;
}
.faq_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.faq_area h3 span::before, .faq_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.faq_area h3 span::before{
left:100%;
}
.faq_area h3 span::after{
right:100%;
}
.accordion{
width:100%;
margin:3em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom: 1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-family:TsukuMinPr6-D;
font-size:15px;
border:solid 1px #000;
padding:1.5em;
display:block;
color:#000;
}
.title:first-letter{
font-family:TsukuAOldMinPr6-R;
font-size:20px;
margin-right:1.0em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.75em;
top:1.75em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:90%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.content p{
margin:1em;
line-height:1.6em;
text-align:justify;
text-indent:-2.5em;
padding-left:3em;
}
.content p:first-letter{
font-family:TsukuAOldMinPr6-R;
font-size:20px;
margin-right:1.0em;
}
.toggle:checked + .title + .content{
max-height:500px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform: rotate(90deg) !important;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.faq_area{
width:98%;
margin:30px auto 60px;
padding:0;
}
.faq_area p{
text-align:center;
line-height:1.6em;
}
.faq_area h3{
font-family:TsukuMinPr6-L;
font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:2em auto 1em;
letter-spacing:0.1em;
}
.faq_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.faq_area h3 span::before, .faq_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.faq_area h3 span::before{
left:100%;
}
.faq_area h3 span::after{
right:100%;
}
.accordion{
width:100%;
margin:3em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom: 1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-family:TsukuMinPr6-D;
font-size:15px;
border:solid 1px #000;
display:block;
color:#000;
line-height:1.35em;
text-indent:-2.5em;
padding:1em 2.5em 1em 3.5em;
text-align:justify;
}
.title:first-letter{
font-family:TsukuAOldMinPr6-R;
font-size:20px;
margin-right:0.8em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.25em;
top:1.25em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:90%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.content p{
font-size:13px;
margin:1em;
line-height:1.35em;
text-align:justify;
text-indent:-2.5em;
padding-left:3em;
}
.content p:first-letter{
font-family:TsukuAOldMinPr6-R;
font-size:20px;
margin-right:1.0em;
}
.toggle:checked + .title + .content{
max-height:500px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform: rotate(90deg) !important;
}
}