@charset "UTF-8";
.faq-anchor-box{
display: flex;
justify-content: space-between;
margin: 0 0 6%;
}
.faq-anchor{
}
.faq-anchor a{
display: block;
position: relative;
text-align: center;
font-size: 14px;
font-weight: 400;
background: #fff;
padding: 8px 34px 8px 18px;
letter-spacing: 0;
}
.faq-anchor a::before {
position: absolute;
content: '';
width: 12px;
height: 7px;
top: 18px;
right: 14px;
background: url(../images/faq-anchor-ar.svg) no-repeat;
background-size: 100%;
}
.faq-block-ttl{
color: #be914b;
font-size: 24px;
font-weight: 400;
margin: 0 0 40px;
}
.add-pdt{
padding: 28px 0 0;
}
.faq-cat-ttl{
position: relative;
font-size: 16px;
font-weight: 400;
margin: 0 0 30px;
padding: 0 0 0 44px;
}
.faq-cat-ttl::before{
position: absolute;
content: '';
width: 32px;
height: 1px;
background:  #be914b;
left: 0;
top: 14px;
}
ul.faq{
width: 100%;
font-size: 20px;
margin: 0 0 60px;
}
ul.faq li{
font-size: 20px;
font-weight: 400;
}
.faq-q{
position: relative;
padding: 24px 60px 24px 64px;
}
.faq-a{
display: none;
position: relative;
padding: 24px 20px 24px 64px;
border-top: 2px dotted #be914b;
}
.faq-a a{
text-decoration: underline;
}
ul.faq li:nth-child(odd){
background: #f6f6f2;
}
.faq-q:hover{
opacity: 0.7;
cursor: pointer;
}
.faq-q::after{
position: absolute;
content: '';
width: 28px;
height: 28px;
top: 27px;
left: 16px;
background: url("../images/faq-q.svg") no-repeat;
background-size: 100%;
}
.faq-q::before{
position: absolute;
content: '';
width: 22px;
height: 21px;
top: 36px;
right: 16px;
background: url("../images/faq-ar.svg") no-repeat;
background-size: 100%;
transition:transform 0.4s,top 0.4s;
}
.faq-q.active::before{
top: 28px;
transform: rotate(-180deg);
transition:transform 0.4s,top 0.4s ;
}
.faq-a::after{
position: absolute;
content: '';
width: 28px;
height: 28px;
top: 27px;
left: 16px;
background: url("../images/faq-a.svg") no-repeat;
background-size: 100%;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width : 1400px) {
.faq-anchor-box {
display: block;
}
.faq-anchor {
display: inline-block;
margin: 0 24px 12px 0;
}
}

@media only screen and (max-width : 1200px) {
ul.faq li {
font-size: 18px;
}
.faq-block-ttl {
font-size: 22px;
margin: 0 0 30px;
}
.faq-q {
position: relative;
padding: 20px 60px 20px 54px;
}
.faq-a {
padding: 20px 20px 20px 64px;
}
.faq-q::after {
top: 22px;
}
.faq-a::after {
top: 22px;
}
.page-std-contents-ttl {
width: 120px;
flex-shrink: 0;
position: relative;
}
.page-news-contents-ttl h1, .page-food-main-ttl h1 {
font-size: 54px;
left: 60px;
top: 34px;
line-height: 54px;
}
}

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

ul.faq {
margin: 0 0 9%;
}
ul.faq li {
font-size: 3.6vw;
}
.faq-q {
padding: 2.5vw 5vw 2.5vw 8.5vw;
}
.faq-a {
padding: 2.5vw 2vw 2.5vw 8.5vw;
}
.faq-q::after {
width: 4.6vw;
height: 4.6vw;
top: 2.9vw;
left: 1.8vw;
}
.faq-a::after {
width: 4.6vw;
height: 4.6vw;
top: 2.9vw;
left: 1.8vw;
}
.faq-cat-ttl {
font-size: 3.2vw;
margin: 0 0 24px;
padding: 0 0 0 36px;
}
.faq-q::before {
width: 3.2vw;
height: 1.7vw;
top: 4.4vw;
right: 2vw;
background: url(../images/faq-ar.svg) no-repeat;
background-size: 100%;
transition: transform 0.4s, top 0.4s;
}
.faq-q.active::before {
top: 4.4vw;
}
.faq-cat-ttl::before {
width: 28px;
left: 0;
top: 2.4vw;
}
.faq-block-ttl {
font-size: 4vw;
margin: 0 0 5%;
}
.faq-anchor {
display:block;
margin: 0 24px 10px 0;
}
.faq-anchor a{
display:inline-block;
}
.faq-anchor a {
text-align: left;
font-size: 12px;
padding: 8px 28px 8px 12px;
letter-spacing: 0;
}
.faq-anchor a::before {
width: 12px;
height: 7px;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.faq-anchor-box {
margin: 0 0 10%;
}
}