/* header */
#header{
width: 100vw;
display: block;
padding: 140px 0 0 0;
text-align: center;
}
.logo_coop{
width: 331px;
height: 0;
display: block;
padding-top: 56px;
background: url(../img/logo_un_y.png) no-repeat center center;
background-size: auto 56px;
overflow: hidden;
position: absolute;
top: 20px;
left: 30px;
}
#header h1{
display: block;
color: var(--blue);
font-size: var(--font-xxxl);
line-height: 1.2;
}
#header h2{
display: block;
margin: 40px 0 0 0;
}

/* faq */
#faq{
display: block;
margin: 80px 0 0 0;
padding: 80px 0 120px 0;
background: url(../img/bg_outline.png) no-repeat center top 50px;
background-size: auto 683px;
background-color: var(--blue);
}
#faq .wrapper{
display: block;
padding: 50px 60px 50px 60px;
background-color: var(--white);
border-radius: 50px;
}

.q_list ul{
display:flex;
flex-direction: column;
gap: 16px;
}
.q_list ul li{
display: block;
padding: 10px 10px 10px 4em;
background-color: var(--light-gallery);
border-radius: 30px;
position: relative;
font-weight: 500;
text-align: left;
}
.q_list ul li:before{
content: "Q";
width: 2em;
height: 2em;
display: block;
background-color: var(--blue);
color: var(--white);
border-radius: 1em;
font-weight: 700;
line-height: 2em;
text-align: center;
position: absolute;
top: 10px;
left: 20px;
}

#qa{
display: block;
margin: 100px 0 100px 0;
}
#qa_list{
display: block;
}
.qa_list ul{
display:flex;
flex-direction: column;
gap: 32px;
}
.qa_list ul li{
display: block;
padding: 30px 60px 30px 60px;
border: 2px solid var(--blue);
border-radius: 50px;
position: relative;
}
.qa_list ul li dl{
display: block;
}
.qa_list ul li dt{
display: block;
padding: 0 0 0 70px;
position: relative;
font-size: var(--font-xxl);
font-weight: 700;
text-align: left;
}
.qa_list ul li dd{
display: block;
margin: 24px 0 0 0;
padding: 24px 0 0 70px;
border-top: 2px solid var(--blue);
position: relative;
font-weight: 500;
text-align: left;
}
.qa_list ul li dt:before{
content: "Q";
width: 2em;
height: 2em;
display: block;
background-color: var(--blue);
color: var(--white);
border-radius: 1em;
font-weight: 700;
line-height: 2em;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.qa_list ul li dd:before{
content: "A";
width: 2em;
height: 2em;
display: block;
background-color: var(--orange);
color: var(--white);
border-radius: 1em;
font-weight: 700;
line-height: 2em;
text-align: center;
position: absolute;
top: 20px;
left: 0.3em;
}
.qa_list li a{
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.qa_list li a:hover{
color: var(--black);
text-underline-offset: 3px;
}
.faq_rule{
display:flex;
flex-direction: column;
gap: 5px !important;
margin: 15px 0 0 0;
}
.faq_rule li{
display: block;
padding: 0 0 0 1.5em !important;
border: none !important;
position: relative;
font-weight: 500;
text-align: left;
}
.faq_rule li:before{
content: "○";
width: 1.5em;
display: block;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.faq_step{
display:flex;
flex-direction: column;
gap: 5px !important;
margin: 15px 0 0 0;
}
.faq_step li{
display: block;
padding: 0 0 0 1.5em !important;
border: none !important;
position: relative;
font-weight: 500;
text-align: left;
}
.faq_step li:before{
width: 1.5em;
display: block;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.faq_step li:nth-child(1)::before{
content: "1.";
}
.faq_step li:nth-child(2)::before{
content: "2.";
}
.faq_step li:nth-child(3)::before{
content: "3.";
}
.faq_step li:nth-child(4)::before{
content: "4.";
}
.faq_step li:nth-child(5)::before{
content: "5.";
}


/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */


/* header */
#header{
padding: 100px 0 0 0;
}
.logo_coop{
width: 242px;
padding-top: 41px;
background: url(../img/logo_un_y.png) no-repeat left center;
background-size: auto 41px;
top: 16px;
left: 10px;
}
#header h1{
display: none;
padding: 0 5.3vw 0 5.3vw;
color: var(--blue);
font-size: var(--font-xxxl-sp);
line-height: 1.2;
}
#header h2{
margin: 0 0 0 0;
}

/* faq */
#faq{
margin: 30px 0 0 0;
padding: 50px 0 100px 0;
background: url(../img/bg_outline.png) no-repeat center top 50px;
background-size: 140vw auto;
background-color: var(--blue);
}
#faq .wrapper{
padding: 40px 20px 50px 20px;
background-color: var(--white);
border-radius: 36px;
}

.q_list ul{
gap: 16px;
}
.q_list ul li{
display: block;
padding: 16px 20px 16px 4em;
border-radius: 20px;
line-height: 1.5;
}
.q_list ul li:before{
content: "Q";
width: 2em;
height: 2em;
display: block;
background-color: var(--blue);
color: var(--white);
border-radius: 1em;
font-weight: 700;
line-height: 2em;
text-align: center;
position: absolute;
top: 16px;
left: 20px;
}

#qa{
margin: 100px 0 100px 0;
}
#qa_list{
}
.qa_list ul{
gap: 30px;
}
.qa_list ul li{
padding: 30px 20px 30px 20px;
border: 2px solid var(--blue);
border-radius: 20px;
position: relative;
}
.qa_list ul li dl{
}
.qa_list ul li dt{
padding: 0 0 0 50px;
position: relative;
font-size: var(--font-xxl-sp);
font-weight: 700;
line-height: 1.5;
text-align: left;
}
.qa_list ul li dd{
display: block;
margin: 24px 0 0 0;
padding: 24px 0 0 50px;
border-top: 2px solid var(--blue);
position: relative;
font-weight: 500;
text-align: left;
}
.qa_list ul li dt:before{
content: "Q";
width: 2em;
height: 2em;
display: block;
background-color: var(--blue);
color: var(--white);
border-radius: 1em;
font-weight: 700;
line-height: 2em;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.qa_list ul li dd:before{
content: "A";
width: 2em;
height: 2em;
display: block;
background-color: var(--orange);
color: var(--white);
border-radius: 1em;
font-weight: 700;
line-height: 2em;
text-align: center;
position: absolute;
top: 20px;
left: 0.3em;
}
.faq_rule{
display:flex;
flex-direction: column;
gap: 5px !important;
margin: 15px 0 0 0;
}
.faq_rule li{
display: block;
padding: 0 0 0 1.5em !important;
border: none !important;
position: relative;
font-weight: 500;
text-align: left;
}
.faq_rule li:before{
content: "○";
width: 1.5em;
display: block;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.faq_step{
display:flex;
flex-direction: column;
gap: 5px !important;
margin: 15px 0 0 0;
}
.faq_step li{
display: block;
padding: 0 0 0 1.5em !important;
border: none !important;
position: relative;
font-weight: 500;
text-align: left;
}
.faq_step li:before{
width: 1.5em;
display: block;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.faq_step li:nth-child(1)::before{
content: "1.";
}
.faq_step li:nth-child(2)::before{
content: "2.";
}
.faq_step li:nth-child(3)::before{
content: "3.";
}
.faq_step li:nth-child(4)::before{
content: "4.";
}
.faq_step li:nth-child(5)::before{
content: "5.";
}
    
/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */