@charset "utf-8";

article {
margin-top: 68px;
}
.product__wrap {
display: flex;
flex-direction: row-reverse;
justify-content: right;
}
h1 {
margin: 60px 0;
font-size: 40px;
font-size: 4rem;
text-align: center;
}
h1 span {
display: block;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
}
@media only screen and (max-width:640px) {
article {
margin-top: 100px;
}
.product__wrap {
display: block;
}
h1 {
font-size: 32px;
font-size: 3.2rem;
}
.accordion__title {
padding: 10px 20px;
text-align: center;
font-size: 14px;
font-size: 1.4rem;
color: #fff;
background-color: #302015;
}
.accordion__title img {
width: 32px;
margin-left: 12px;
vertical-align: text-bottom;
}
.accordion__content {
display: none;
}
} .search {
position: relative;
padding: 20px;
background-color: #E1E1E1;
}
.search__wrap {
display: flex;
flex-direction: column;
gap: 60px;
width: 380px;
margin: 0 auto;
padding: 40px;
box-shadow: 0px 0px 20px 2px #B9B9B9;
background-color: #fff;
}
.search__box {
margin-bottom: 40px;
}
.search__box h3 {
margin-bottom: 20px;
padding: 4px 20px;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 16px;
font-size: 1.6rem;
background-color: #302015;
white-space: nowrap;
}
.search__box .search__terms {
display: flex;
flex-wrap: wrap;
gap: 12px 40px;
margin-top: 8px;
font-size: 16px;
font-size: 1.6rem;
}
.search__box .search__terms img {
width: 100px;
margin-left: 8px;
}
.search__box .search__keyword__label {
width: 100%;
}
.search__box .search__keyword__label .search__keyword {
width: 100%;
padding: 0 8px;
}
input[type=checkbox] {
width: 16px;
height: 16px;
vertical-align: middle;
}
.search__button {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
}
.search__button .linkBtn {
margin: 0;
padding: 8px 20px;
font-size: 32px;
font-size: 3.2rem;
border: none;
}
@media only screen and (max-width:640px) {
.search {
padding-bottom: 40px;
}
.search__wrap {
width: 94%;
margin: auto;
padding: 40px;
}
.search__box {
display: block;
}
.search__box h3 {
width: 100%;
margin-bottom: 20px;
}
.search__box .search__terms {
gap: 20px 40px;
width: 100%;
}
.search__box .search__terms img {
width: 180px;
}
input[type=checkbox] {
width: 24px;
height: 24px;
}
} .list {
width: 100%;
margin: 0 60px;
}
.list__wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 60px auto;
}
.list__box {
width: 30%;
min-width: 240px;
margin: 20px 1.5%;
padding: 20px;
box-shadow: 0px 0px 20px 2px #B9B9B9;
}
.list__box h2 {
margin: 12px 0;
font-size: 20px;
font-size: 2rem;
font-weight: bold;
text-align: center;
}
.list__box p {
font-size: 16px;
font-size: 1.6rem;
}
.list__box ul {
list-style: disc;
font-size: 16px;
font-size: 1.6rem;
}
.list__box li {
list-style-position: inside;
margin-left: 4px;
}
.list__notion {
width: 100%;
text-align: center;
}
@media only screen and (max-width:1400px) {
.list__box {
width: 47%;
}
}
@media only screen and (max-width:1100px) {
.list__wrap {
width: 94%;
}
.list__box {
width: 100%;
max-width: 100%;
}
.list__box h2 {
margin: 12px 0;
font-size: 20px;
font-size: 2rem;
font-weight: bold;
text-align: center;
}
.list__box p {
font-size: 16px;
font-size: 1.6rem;
}
}
@media only screen and (max-width:640px) {
.list {
margin: 0;
}
} .list__contact {
padding: 80px 0;
background-color: #E1E1E1;
}
.list__contact p {
text-align: center;
font-size: 16px;
font-size: 1.6rem;
}
.list__contact a {
margin: 40px auto;
}
@media only screen and (max-width:640px) {
.list__contact {
padding: 60px 3%;
}
.list__contact p {
text-align: center;
font-size: 16px;
font-size: 1.6rem;
}
.list__contact a {
margin: 40px auto;
}
}