body { overflow-x: hidden; }
.content { max-width: 1200px; display: block; margin: 60px auto; }
@media (max-width: 750px) { .content { margin: 30px auto; } }
section.end { margin-bottom: 200px; }
@media (max-width: 750px) { section.end { margin-bottom: 100px; } }
h2 { text-align: center; }
h3 { text-align: center; border-bottom: none; }
h4 { text-align: center; border-left: none; border-bottom: none; padding: 0; }
.accessory-news { width:90%; }
@media (max-width: 750px) { .accessory-news { margin: 0 auto; } }
.car-box-wrapper { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; }
.car-box { flex-basis: 23%; display: flex; margin: 20px 1% 0; text-align: center; box-sizing: border-box; }
/*@media (max-width: 811px) { .car-box { flex-basis: 31%; } }*/
@media (max-width: 750px) { .car-box { flex-basis: 48%; } }
.car-box img { width: 100%; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 5px; }
.button003 { margin: 20px 0 20px 0; }
.button003 a { background: #eee; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 320px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 500; }
.button003 a:hover { background: #313131; color: #FFF; }
.button003 a:after { content: ''; width: 5px; height: 5px; border-top: 3px solid #313131; border-right: 3px solid #313131; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 20px; border-radius: 1px; transition: 0.3s ease-in-out; }
.button003 a:hover:after { border-color: #FFF; }
.accessory-pickup { background-color: #f2f2f2; padding-bottom: 40px; }
.accessory-pickup-wrapper { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; }
.accessory-pickup-box { flex-basis: 23%; display: flex; margin: 20px 1% 0; text-align: center; box-sizing: border-box; }
/*@media (max-width: 811px) { .accessory-pickup-box { flex-basis: 31%; } }*/
@media (max-width: 750px) { .accessory-pickup-box { flex-basis: 48%; } }
.accessory-pickup-box img { width: 100%; }
.accessory-pickup-box span { display: block; background-color: #e3e3e3; color: #1b98e0; font-size: 69%; width: 100%; padding: 7px 0; }
.accessory-link-wrapper { text-align: center; }
.accessory-link-wrapper img { max-width: 386px; width: 90%; }
.swiper-slide { padding: 10px; }
/*@media (max-width: 811px) { .swiper-slide { padding: 0; } }*/
.slide-content { max-width: 1200px; display: block; margin: 0 auto; }
.accessory-page h2 { text-align: left; font-size: 180%; color: #4d4d4d; letter-spacing: 0; margin-top: 0; padding: 0 15px 0 15px; }
@media (max-width: 811px) { .accessory-page h2 { font-size: 150%; } }
@media (max-width: 750px) { .accessory-page h2 { font-size: 120%; margin: 20px auto; } }
.accessory-page h3 { text-align: left; font-size: 80%; color: #4d4d4d; margin-bottom: 0; padding: 0 15px 0 15px; }
@media (max-width: 811px) { .accessory-page h3 { font-size: 75%; margin-bottom: 20px; } }
@media (max-width: 750px) { .accessory-page h3 { margin: 20px auto; font-size: 69%; margin-bottom: 20px; } }
.accessory-page h3 a { text-decoration: underline; }
#caution { border: 1px solid #cccccc; border-radius: 5px; padding: 40px 40px; color: #333333; font-size: 70%; width: 90%; }
@media (max-width: 811px) { #caution { padding: 40px; } }
@media (max-width: 750px) { #caution { padding: 30px; } }
.caution-title { font-weight: 900; font-size: 180%; text-align: center; margin-bottom: 10px; }
.caution-title img { vertical-align: middle; }

@media (max-width: 811px) { #slide_wrapp { width: 100%; float: none; } }
@media (max-width: 811px) { #spec { width: 90%; position: relative; right: auto; margin: 20px auto 0; float: none; } }

.catalog-box-wrapper { height: 520px; }
@media (max-width: 811px) { .catalog-box-wrapper { height: auto; padding: 10px; } }


.spacia_base_yubi {position: absolute;
border: 0;
bottom: 15%;
right: 30%;}

a.wagonr_smile-href:hover { opacity: 0.7; }



@media (max-width: 811px) { #manual { padding: 20px; } }

.caution-wrapper { font-size: 120%; line-height: 240%; }
@media (max-width: 750px) { .caution-wrapper { font-size: 100%; line-height: 150%;  } .caution-title { font-weight: 900; font-size: 140%; text-align: center; margin-bottom: 20px; } }

.title { text-align: center; padding: 5px; background-color: #333; color: #fff; font-weight: bold; font-size: 150%; margin-top: 100px; }
@media (max-width: 750px) { .title { font-size: 135%; } }
.title-top { margin-top: 40px; }

table th, table td {
  border-bottom: 1px solid #ccc;
  padding: 4px;
}

#manual table { width: 100%; }
#manual table tr th { width: 20%; text-align: center; vertical-align: middle; font-weight: 900; color: #333; }
#manual table tr td { width: 40%; font-size: 85%; color: #333; padding: 20px; position: relative; }
#manual table tr td:last-child { border-left: 1px solid #e6e6e6; }
#manual table tr td span.subtitle { font-weight: 400; font-size: 100%; display: inline-block; width: auto; border-radius: 20px; color: #fff; background-color: #a4a4a4; text-align: center; padding: 4px 10px; margin: 0 0 10px -10px;  }
.manual-pdf { text-align: center; font-size: 85%; color: #999; position: absolute; right: 20px; top: 20px; }

@media (max-width: 811px) { #manual table tr th { width: 100%; display: block; }
#manual table tr td { width: 100%; display: block; } #manual table tr td.pc { display: none; } #manual table tr td:last-child { border-left: none; } }
@media (max-width: 750px) { #manual table tr td { font-size: 80%; } }

#text-wrap {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto 0;
    /*padding: 70px;*/
}

.hide-text {
    display: none;
}


a.readmore {
position: relative;
height: 80px;
width: 100%;
margin: 100px auto 0;
display: block;
background-color: transparent;
color: #666;
padding-bottom: 40px;
border: none;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
text-align: center;
cursor: pointer;
font-weight: 900;
font-size: 120%;
}

a.readmore::after {
content: " ";
position: absolute;
width: 15px;
height: 15px;
border-top: solid 3px #666;
border-right: solid 3px #666;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
right: 50%;
top: 25px;
transition: .5s;
-erbkit-transition: .5s;
}

a.readmore:hover::after {
    top: 40px;
}

.on-click {
    color: transparent!important;
}

.on-click {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 10px; font-size:95%; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  background-color: #e1e1e1;
  transition: 0.2s;
  text-align: center;
  border: 1px solid #cacaca;
}
summary:hover {
  background-color: #cacaca;
}
summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
/*summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #1da1ff;
}*/
summary:after {
  right: 10px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #999;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #e1e1e1;
}

details[open] summary:hover {
  background-color: #cacaca;
}

details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  right: 15px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* 開いている状態 */
details[open] .do-open {
	display: none ;
}

/* 閉じている状態 */
details:not([open]) .do-close {
	display: none ;
}

details { margin-top: 40px; }