@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
#A88D00
-----------------------------------------------*/

/*-----------------------------------------------
  title
-----------------------------------------------*/
.__title {
padding: 20px 4%;
background: #EEE8CC;
}
.__title .text {
max-width: 1000px;
margin: auto;
font-size: 1.5rem;
line-height: 1.2;
}
.__title .text::before {
content: "Q&A";
display: block;
width: fit-content;
margin-bottom: 0.05em;
font-family: "Alumni Sans", sans-serif;
font-size: 5.5rem;
font-weight: 700;
line-height: 0.6;
border-bottom: 4px solid #A88D00;
}
@media screen and (max-width: 800px) {
	.__title {
	padding: 2rem 4%;
	}
	.__title .text {
	width: auto;
	font-size: 1.125rem;
	text-align: center;
	}
	.__title .text::before {
	margin: auto;
	font-size: 3rem;
	}
}

/*-----------------------------------------------
  menu
-----------------------------------------------*/
.__menu .menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.__menu .head {
padding: 0.25em 0.75em;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
color: #FFF;
background: #A88D00;
}
.__menu .menu li {
width: 22.5%;
}
.__menu .menu a {
display: block;
padding: 0.75em;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
background: #FFF;
border: 2px solid #A88D00;
border-radius: 5px;
transition: 0.2s;
}
.__menu .menu a:hover {
color: #FFF;
background: #A88D00;
}
.__menu .menu span {
padding: 0.75em 0 0.75em 2.25em;
background-position: left center;
background-repeat: no-repeat;
background-size: 2em;
}
@media screen and (max-width: 800px) {
	.__menu .menu li {
	width: 49%;
	margin: 1% 0;
	}
	.__menu .menu a {
	padding: 0.75em;
	font-size: 1.125rem;
	}
}


/* icon */
.__menu .menu .icon1 {
background-image: url("img/ico1.svg");
}
.__menu .menu .icon2 {
background-image: url("img/ico2.svg");
}
.__menu .menu .icon3 {
background-image: url("img/ico3.svg");
}
.__menu .menu .icon4 {
background-image: url("img/ico4.svg");
}
.__menu .menu a:hover .icon1 {
background-image: url("img/ico1_w.svg");
}
.__menu .menu a:hover .icon2 {
background-image: url("img/ico2_w.svg");
}
.__menu .menu a:hover .icon3 {
background-image: url("img/ico3_w.svg");
}
.__menu .menu a:hover .icon4 {
background-image: url("img/ico4_w.svg");
}

/*-----------------------------------------------
  list
-----------------------------------------------*/
.__list .head1 {
padding: 0.25em 0.75em;
font-size: 1.5em;
font-weight: 700;
line-height: 1.4;
color: #FFF;
background: #B9A84D;
}
.__list .head1 span {
padding: 0.75em 0 0.75em 1.75em;
background-position: left center;
background-repeat: no-repeat;
background-size: 1.5em;
}
.__list .head2 {
padding: 0.25em 0.75em;
font-size: 1.5em;
font-weight: 700;
line-height: 1.4;
color: #A88D00;
background: #F4F1E8;
border: 1px solid #A88D00;
}
.__list .head2 span {
padding: 0.75em 0 0.75em 2.25em;
background-position: left center;
background-repeat: no-repeat;
background-size: 2em;
}
/* icon */
.__list .icon1 {
background-image: url("img/ico1_w.svg");
}
.__list .icon2 {
background-image: url("img/ico2_w.svg");
}
.__list .icon3 {
background-image: url("img/ico3_w.svg");
}
.__list .icon4 {
background-image: url("img/ico4_w.svg");
}
.__list .icon5 {
background-image: url("img/ico5.svg");
}
.__list .icon6 {
background-image: url("img/ico6.svg");
}
.__list .icon7 {
background-image: url("img/ico7.svg");
}
.__list .list dl {
margin-top: 1rem;
border: 1px solid #A88D00;
border-radius: 5px;
}
.__list .list .question {
position: relative;
margin: 0 1.5rem;
padding: 1.5rem 2rem 1.5rem 0;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
color: #A88D00;
cursor: pointer;
}
.__list .list .question::after {
content: "";
display: block;
width: 1rem;
height: 1rem;
position: absolute;
top: calc(50% - 0.6em);
right: 1rem;
border-right: 1px solid #A88D00;
border-top: 1px solid #A88D00;
transform: rotate(135deg);
transition: transform 0.2s ease, top 0.2s ease;
}
.__list .list .question.open::after {
top: calc(50% - 0.2em);
transform: rotate(-45deg);
}
.__list .list .question span {
position: relative;
display: block;
padding-left: 3.5rem;
}
.__list .list .question span::before {
content: "Q";
position: absolute;
top: calc(50% - 0.75em);
left: 0;
width: 1.5em;
height: 1.5em;
padding-top: 0.1em;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
text-align: center;
color: #FFF;
background: #A88D00;
}
.__list .list .answer {
display: none;
margin: 0 1.5rem;
padding: 1.5rem 0;
border-top: 1px dotted #000;
}
.__list .list .answer span {
position: relative;
display: block;
padding-left: 3.5rem;
}
.__list .list .answer span::before {
content: "A";
position: absolute;
top: calc(50% - 0.75em);
left: 0;
width: 1.5em;
height: 1.5em;
padding-top: 0.2em;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
text-align: center;
color: #FFF;
background: #B9A84D;
}
@media screen and (max-width: 800px) {
	.__list .list .question {
	margin: 0 1rem;
	padding: 1rem 1.5rem 1rem 0;
	}
	.__list .list .question::after {
	right: 0;
	}
	.__list .list .answer {
	margin: 0 1rem;
	padding: 1rem 0;
	}
}