html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.content { max-width: 1200px; display: block; margin: 60px auto; }
@media (max-width: 750px) { .content { margin: 0 auto; padding: 20px; } }
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 { margin: 0 auto; min-height: 377px; background: url("../img/basicitem-01.jpg")top right no-repeat; background-size: inherit; }
@media (max-width: 750px) { .accessory-page { background-size: contain; min-height: 0; padding: 0 20px; } }
.accessory-page h2 { text-align: left; font-size: 330%; font-weight: 900; color: #245483; margin-top: 140px; padding: 40px 15px 0 53px; letter-spacing: 2px; letter-spacing: 2px; background: url("../img/basicitem-02.png")top left no-repeat; }
@media (max-width: 811px) { .accessory-page h2 { font-size: 185%; text-align: center; } }
@media (max-width: 750px) { .accessory-page h2 { font-size: 185%; text-align: center; margin: 10px auto 0; } }

.accessory-page div span { display: block; font-size: 42%; font-weight: 500; color: #333; letter-spacing: 1px; margin-top: 10px; }
.accessory-page div span a { color: #e82981; border-bottom: 1px solid #e82981; padding-bottom: 2px; }
.accessory-page div { position: relative; padding: 1rem 1.5rem; font-size: 230%; font-weight: 900; text-align: center; display: table; margin: 100px auto 0; color: #e82981; }
.accessory-page div::before,.accessory-page div::after { position: absolute; width: 20px; height: 30px; content: ''; }
.accessory-page div::before { border-left: solid 1px #e82981; border-top: solid 1px #e82981; border-radius: 5px 0 0 0; top: 0; left: 0; }
.accessory-page div::after { border-right: solid 1px #e82981; border-bottom: solid 1px #e82981; border-radius: 0 0 5px 0; bottom: 0; right: 0; }

@media (max-width: 750px) { .accessory-page div { margin: 20px auto; font-size: 100%; } }
@media (max-width: 750px) { .accessory-page div span { font-size: 80%; } }

.accessory-page h3 { text-align: left; font-size: 150%; font-weight: 400; color: #4d4d4d; margin-bottom: 0; padding: 0 15px 0 53px; letter-spacing: 2px; }
@media (max-width: 811px) { .accessory-page h3 { font-size: 100%; text-align: center; margin-bottom: 0; } }
@media (max-width: 750px) { .accessory-page h3 { margin: 10px auto 0; font-size: 100%; text-align: center; } }
.accessory-page h3 a { text-decoration: underline; }

.basicitem-link { position: relative; }
.basicitem-link ul { display: flex; justify-content: space-between; overflow: hidden; flex-wrap: wrap; }
.basicitem-link ul li { text-align: center; list-style:none; flex: 0 0 33.33%; margin-bottom: 40px; }
.basicitem-link ul li span { display: block; color: #999; }
.basicitem-link ul li a { transition: 0.5s; }
.basicitem-link ul li a:hover { opacity: 0.5; }
.basicitem-link ul li img { max-width: 100%; }
@media (max-width: 750px) { .basicitem-link ul { flex-wrap: wrap; } }
@media (max-width: 750px) { .basicitem-link ul li { width: 45%; font-size: 80%; 
  text-align: center;
  list-style: none;
  flex: initial;
  margin-bottom: 0;
 } }

.title { text-align: center; padding: 40px 0 0 0; color: #000; font-weight: 400; font-size: 100%; letter-spacing: 2px; background: url("../img/basicitem-title.jpg") top center no-repeat; min-height: 180px; position: relative; }
.title div { border-bottom: 1px solid #000; font-family: 'Nanum Myeongjo', serif; font-size: 400%; line-height: 100%; color: #245483; font-weight: 300; }
.title div b { font-size: 120%; }
.title span { background-color: #f4ede8; padding: 0 20px; }
.title img { position: absolute; top: 55px; right: 0; }
@media (max-width: 750px) { .title div { font-size: 200%; } }
@media (max-width: 750px) { .title span { font-size: 60%; } }
@media (max-width: 750px) { .title img { top: 0; } }
@media (max-width: 750px) { .title { font-size: 135%; min-height: 150px; } }

.basicitem-layout { position: relative; }
.basicitem-layout ul { display: flex; justify-content: space-between; overflow: hidden; }
.basicitem-layout ul li img { display: block; width: 100%; }
.basicitem-layout ul li.left { list-style:none; width: 55%; }
.basicitem-layout ul li.right { list-style:none; width: 43%; font-size: 100%; }
@media (max-width: 750px) { .basicitem-layout ul { display: block; } }
@media (max-width: 750px) { .basicitem-layout ul li.left { width: 100%; margin-bottom: 20px; } }
@media (max-width: 750px) { .basicitem-layout ul li.right { width: 100%; } }

ul.contA { list-style: none; padding: 0 0 0 20px; position: relative; color: #333; font-size: 90%; }
ul.contA li::before { position: absolute; content: "※"; width: 10px; height: 10px; display: inline-block; top: 0; left: 0; }
ul.contB { list-style: none; padding: 0 0 0 20px; position: relative; color: #333; font-size: 90%; margin: 14px 14px; }
ul.contB li::before { position: absolute; content: "■"; width: 10px; height: 10px; display: inline-block; top: 0; left: 0; }
ul.contC { list-style: none; padding: 0 0 0 20px; position: relative; color: #333; font-size: 90%; margin: 14px 14px; }
ul.contC li::before { position: absolute; content: "●"; width: 10px; height: 10px; display: inline-block; top: 0; left: 0; }

.m-title { color: #fff; background-color: #333; border-radius: 20px; text-align: center; padding: 10px 20px; width: 100%; display: inline-block; font-size: 110%; }


a.cp_btn {
  margin: 30px auto 0;
  display: block;
  max-width: 600px;
  width: 100%;
  padding: 0.8em;
  text-align: center;
  text-decoration: none;
  color: #9a3e8b;
  border: 2px solid #9a3e8b;
  border-radius: 30px;
  transition: .4s;
  line-height: 200%;
  font-size: 100%;
  font-weight: bold;
}

@media (max-width: 750px) { a.cp_btn { font-size: 80%; } }

a.cp_btn:hover {
  background: #9a3e8b;
  color: #fff;
}
.fa, .fas {
  font-weight: 900;
}
.fa, .far, .fas {
  font-family: "Font Awesome 5 Free";
}
.cp_btn_right {
  float: right;
  padding-top: 8px;
  color: #9a3e8b;
}




#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; } }


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%; } }


img.basic_wheels2 { width: 96.5%; margin: 60px auto 0; display: block; border-radius: 20px; }
@media (max-width: 750px) { img.basic_wheels2 { width: 100%; margin: 30px auto 0; display: block; border-radius: 10px; } }


img.basic_wheels { width: 93%; margin: 60px auto 0; display: block; border-radius: 20px; }
@media (max-width: 750px) { img.basic_wheels { width: 100%; margin: 30px auto 0; display: block; border-radius: 10px; } }

a.basic_wheels { transition: 0.5s; }
a.basic_wheels:hover { opacity: 0.5; }
a.basic_wheels2 { transition: 0.5s; }
a.basic_wheels2:hover { opacity: 0.5; }

p.banner-wrapper { display: block; overflow: hidden; position: relative; }
p.banner-wrapper a { width: 50%; display: inline-block; float: left; }
@media (max-width: 750px) { p.banner-wrapper a { width: 100%; float: none; } }
p.banner-wrapper a.basic_wheels2 { width: 100%; display: inline-block; float: none; }

#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; }