.pane-contents{
  background-color: #F1F0EC;
  overflow: hidden;
}
.pane-contents img {
  height: auto;
  vertical-align: bottom;
}
.section-inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.paragraph{
  font-size: 1.6rem;
  line-height: 1.625;
  text-align: center;
}
.mv-wrap{
  width: 100vw;
  margin: 22px calc(50% - 50vw) 0;
  position: relative;
}
.mv-image img {
  height: auto;
  width: 100%;
}

.bike-motif_lists {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.bike-motif_lists::before,
.bike-motif_lists::after {
  content: '';
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  margin: 0 calc(50% - 50vw);
  height: 1px;
  background-color: #000;
}
.bike-motif_item {
  position: relative;
}
.bike-motif_item::before {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #000;
}
.bike-motif_item::after {
  content: '';
  position: absolute;
  height: 1px;
  background-color: #000;
}
.item-card {
  position: relative;
  width: 100%;
  height: 100%;
}
.item-card img.logo {
  position: absolute;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
}
.motif-image {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.motif-image::before,
.motif-image::after {
  content: '';
  position: absolute;
  height: 1px;
  background-color: #000;
}
.motif-product:nth-child(even) .motif-image {
  flex-direction: row-reverse;
}
.main-image{
  position: relative;
  width: calc(650 / 1200 * 100%);
  height: max-content;
  max-width: 650px;
  aspect-ratio: 650 / 700;
}
.main-image::after {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #000;
}
.sub-image {
  display: flex;
  flex-wrap: wrap;
  height: max-content;
}
.sub-image .p-top {
  position: relative;
}
.sub-image .p-top::after {
  content: '';
  position: absolute;
  height: 1px;
  background-color: #000;
}
.sub-image .p-middle {
  position: relative;
  height: fit-content;
}
.sub-image .p-middle::after {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #000;
}
.motif-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.motif-product_title {
  position: relative;
  margin: 0 auto;
  font-weight: 700;
  font-style: italic;
  color: #2D2D2D;
  letter-spacing: -0.05em;
  line-height: 1;
  z-index: 1;
}
.motif-product_title::first-letter {
  color: #0090BC;
}
.goods-lists {
  display: flex;
  flex-wrap: wrap;
}
.goods-lists .goods-item {
  position: relative;
}
.goods-lists .goods-item::after {
  content: '';
  position: absolute;
  height: 1px;
  background-color: #000;
}
.goods-lists .goods-content a {
  position: relative;
  display: flex;
  gap: 20px;
  transition: 0.3s ease-in;
}
.goods-lists .goods-content a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.goods-lists .goods-content a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38px;
  height: 38px;
  background: url(https://hondago-bikegear.jp/cms/img/page/motif/2025/arrow.png) no-repeat;
  background-size: contain;
  transition: 0.3s ease-in;
}
.goods-lists .goods-content a:hover::after {
  right: -5px;
}
.goods-lists .goods-content .good-detail {
  flex: 1;
}
.goods-lists .goods-item .good-image img {
  width: 100%;
  height: 100%;
}
.good-detail {
  color: #000;
}
.good-detail .good-name {
  font-weight: bold;
}
.good-detail .variation-content {
  display: flex;
}
.recommend-lead {
  color: #2D2D2D;
  z-index: 1;
  line-height: 1;
}
.recommend-lead::first-letter {
  color: #0090BC;
}
.recommend-product {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.recommend-product a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38px;
  height: 38px;
  background: url(https://hondago-bikegear.jp/cms/img/page/motif/2025/arrow.png) no-repeat;
  background-size: contain;
  transition: 0.3s ease-in;
}
.recommend-product::before,
.recommend-product::after {
  content: '';
  position: absolute;
  height: 1px;
  background-color: #000;
}
.recommend-product_detail {
  flex: 1;
}
.recommend-product_name {
  font-weight: bold;
}
@media screen and (min-width:751px){
  .mv{
    padding-top: 30px;
  }
  .motif-product {
    margin-bottom: 250px;
  }
  .bike-motif_lists {
    margin: 80px auto 68px;
    max-width: 789px;
    gap: 26px;
  }
  .bike-motif_lists::before {
    top: -13px;
  }
  .bike-motif_lists::after {
    bottom: -13px;
  }
  .bike-motif_item {
    width: calc((100% - 26px * 3) / 4);
  }
  .bike-motif_item::before {
    top: -13px;
    bottom: -13px;
    right: -13px;
  }
  .bike-motif_item:nth-child(4n)::before {
    display: none;
  }
  .bike-motif_item::after {
    bottom: -13px;
    left: -13px;
    right: -13px;
  }
  .bike-motif_item:nth-child(4n - 3):after {
    margin: 0 0 0 calc(50% - 50vw);
    left: calc(50% - 50vw);
  }
  .bike-motif_item:nth-child(4n):after {
    margin: 0 calc(50% - 50vw) 0 0;
    right: calc(50% - 50vw);
  }
  .motif-image {
    margin-bottom: 30px;
  }
  .motif-image::before {
    top: -15px;
  }
  .motif-image::after {
    bottom: -15px;
  }
  .motif-product:nth-child(odd) .motif-image::before,
  .motif-product:nth-child(odd) .motif-image::after {
    left:0;
    right: calc(50% - 50vw);
    margin: 0 calc(50% - 50vw) 0 0;
  }
  .motif-product:nth-child(even) .motif-image::before,
  .motif-product:nth-child(even) .motif-image::after {
    right:0;
    left: calc(50% - 50vw);
    margin: 0 0 0 calc(50% - 50vw);
  }
  .motif-product_title {
    margin-bottom: -6px;
  }
  .motif-product_title img {
    height: 104px;
  }
  .main-image::after {
    top: -15px;
    bottom: -15px;
  }
  .motif-product:nth-child(odd) .main-image::after {
    right: -15px;
  }
  .motif-product:nth-child(even) .main-image::after {
    left: -15px;
  }
  .sub-image {
    width: calc(520 / 1200 * 100%);
    gap: 30px;
    max-width: 520px;
    aspect-ratio: 520 / 700;
  }
  .sub-image .p-top {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 520 / 330;
  height: fit-content;
  }
  .sub-image .p-middle {
    width: calc(220 / 520 * 100%);
    height: fit-content;
    max-width: 220px;
    aspect-ratio: 220 / 340;
  }
  .sub-image .p-bottom {
    height: fit-content;
    max-width: 520px;
    aspect-ratio: 520 / 340;
    height: fit-content;
  }
  .sub-image .p-middle + .p-bottom {
    width: calc(270 / 520 * 100%);
    max-width: 270px;
    aspect-ratio: 270 / 340;
  }
  .sub-image .p-top::after {
    bottom: -15px;
    left: -15px;
    right: -15px;
  }
  .motif-product:nth-child(odd) .sub-image .p-top::after {
    right: calc(50% - 50vw);
    margin: 0 calc(50% - 50vw) 0 0;
  }
  .motif-product:nth-child(even) .sub-image .p-top::after {
    left: calc(50% - 50vw);
    margin: 0 0 0 calc(50% - 50vw);
  }
  .sub-image .p-middle::after {
    top: -15px;
    bottom: -15px;
    right: -15px;
  }
  .goods-lists {
    gap: 30px;
  }
  .goods-lists .goods-item {
    width: calc((100% - 30px) / 2);
  }
  .goods-lists .goods-item::after {
    bottom: -15px;
    left: -15px;
    right: -15px;
  }
  .motif-product:nth-child(even) .goods-lists .goods-item:nth-child(2n - 1)::after {
    left: calc(50% - 50vw);
    margin: 0 0 0 calc(50% - 50vw);
  }
  .motif-product:nth-child(odd) .goods-lists .goods-item:nth-child(2n)::after {
    right: calc(50% - 50vw);
    margin: 0 calc(50% - 50vw) 0 0;
  }
  .goods-lists .goods-item:nth-child(2n - 1)::before {
    content: '';
    top: -15px;
    bottom: -15px;
    right: -15px;
    position: absolute;
    width: 1px;
    background-color: #000;
  }
  .goods-lists .goods-item .good-image {
    width: 270px;
    height: 270px;
  }
  .good-detail .good-name {
    margin: 10px auto 20px;
    font-size: 18px;
  }
  .good-detail .good-price {
    margin: 0 auto 10px;
    font-size: 19px;
  }
  .recommend-lead {
    margin-bottom: 14px;
    font-size: 33px;
  }
  .recommend-lead br {
    display: none;
  }
  .recommend-product {
    position: relative;
    display: flex;
    gap: 20px;
    transition: 0.3s ease-in;
    width: calc((100% - 30px) / 2);
  }
  .recommend-product::before {
    top: -20px;
    right: calc(50% - 50vw);
    left: 0;
    margin: 0 calc(50% - 50vw) 0 0;
  }
  .recommend-product::after {
    bottom: -20px;
    right: calc(50% - 50vw);
    left: 0;
    margin: 0 calc(50% - 50vw) 0 0;
  }
  .recommend-image {
    width: 270px;
    height: 270px;
  }
  .recommend-product_name {
    margin: 10px auto 20px;
    font-size: 18px;
  }
  .recommend-product_price {
    margin: 0 auto 10px;
    font-size: 19px;
  }
}
@media screen and (max-width:750px){
  .pane-main{
    background-color: #F1F0EC;
    overflow: hidden;
  }
  .mv-wrap {
    margin-top: 0;
  }
  .mv-image {
    padding: 0;
  }
  .section-lead {
    margin: calc(30 / 430 * 100vw) auto;
    width: calc(390 / 430 * 100vw);
    font-size: calc(15 / 430 * 100vw);
  }
  .bike-motif_lists {
    margin: 0 auto calc(100 / 430 * 100vw);
    width: calc(390 / 430 * 100vw);
    gap: calc(15 / 430 * 100vw);
  }
  .bike-motif_lists::before {
    top: calc(-8.5 / 430 * 100vw);
  }
  .bike-motif_lists::after {
    bottom: calc(-8.5 / 430 * 100vw);
  }
  .bike-motif_item {
    width: calc((100% - (15 / 430 * 100vw) * 2) / 3);
  }
  .bike-motif_item::before {
    display: none;
  }
  .bike-motif_item::after {
    bottom: calc(-8.5 / 430 * 100vw);
    left: calc(-8.5 / 430 * 100vw);
    right: calc(-8.5 / 430 * 100vw);
  }
  .bike-motif_item:nth-child(3n - 2):after {
    margin: 0 0 0 calc(50% - 50vw);
    left: calc(50% - 50vw);
  }
  .bike-motif_item:nth-child(3n):after {
    margin: 0 calc(50% - 50vw) 0 0;
    right: calc(50% - 50vw);
  }
  .motif-product {
    margin: 0 auto calc(80 / 430 * 100vw);
    width: calc(390 / 430 * 100vw);
  }
  .motif-product .section-inner {
    position: relative;
    border-top: 1px solid #000;
    padding: calc(20 / 430 * 100vw) 0 0 calc(30 / 430 * 100vw);
  }
  .motif-product .section-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: calc(390 / 430 * 100vw);
    background-color: #000;
  }
  .motif-product .section-inner::after {
    content: '';
    position: absolute;
    bottom: calc(-30 / 430 * 100vw);
    left: 0;
    width: 1px;
    height: calc(30 / 430 * 100vw);
    background-color: #000;
  }
  .motif-product_title {
    padding: 0;
  }
  .motif-product_title img {
    height: calc(59 / 430 * 100vw);
  }
  .motif-image {
    padding-bottom: calc(30 / 430 * 100vw);
    gap: calc(5 / 430 * 100vw);
  }
  .main-image {
    width: 100%;
  }
  .sub-image {
    flex-wrap: nowrap;
    gap: calc(5 / 430 * 100vw);
  }
  .sub-image .p-middle {
    display: none;
  }
  .motif-product .goods {
    position: relative;
  }
  .motif-product .goods::before {
    content: '';
    position: absolute;
    top: calc(-84 / 430 * 100vw);
    left: calc(-30 / 430 * 100vw);
    height: calc(84 / 430 * 100vw);
    width: 1px;
    background-color: #000;
  }
  .motif-product .goods::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(-30 / 430 * 100vw);
    right: 0;
    height: 1px;
    background-color: #000;
  }
  .motif-product .goods-item {
    padding: calc(20 / 430 * 100vw) 0;
    width: 100%;
  }
  .goods-lists .goods-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(-30 / 430 * 100vw);
    bottom: 0;
    width: 1px;
    background-color: #000;
  }
  .goods-lists .goods-item::after {
    left: calc(-30 / 430 * 100vw);
    right: 0;
    bottom: 0;
  }
  .goods-lists .goods-content a {
    gap: calc(10 / 430 * 100vw);
  }
  .goods-lists .goods-item .good-image {
    width: calc(165 / 430 * 100vw);
    height: calc(165 / 430 * 100vw);
  }
  .good-detail .good-name {
    margin-bottom: calc(6 / 430 * 100vw);
    padding: 0;
    font-size: calc(18 / 430 * 100vw);
  }
  .good-detail .good-price {
    font-size: calc(17 / 430 * 100vw);
  }
  .good-detail .goods-variation {
    font-size: calc(12 / 430 * 100vw);
  }
  .goods-lists .goods-content a::after {
    width: calc(38 / 430 * 100vw);
    height: calc(38 / 430 * 100vw);
  }
  .recommend {
    margin: 0 auto calc(80 / 430 * 100vw);
    width: calc(390 / 430 * 100vw);
  }
  .recommend .section-inner {
    position: relative;
    padding: calc(20 / 430 * 100vw) 0 0 calc(30 / 430 * 100vw);
  }
  .recommend .section-inner::after {
    content: '';
    position: absolute;
    bottom: calc(-30 / 430 * 100vw);
    left: 0;
    width: 1px;
    height: calc(30 / 430 * 100vw);
    background-color: #000;
  }
  .recommend-image {
    position: relative;
    width: calc(165 / 430 * 100vw);
    height: calc(165 / 430 * 100vw);
  }
  .recommend-image::before {
    content: '';
    position: absolute;
    top: calc(-20 / 430 * 100vw);
    bottom: calc(-20 / 430 * 100vw);
    left: calc(-30 / 430 * 100vw);
    width: 1px;
    background-color: #000;
  }
  .recommend-image img {
    width: 100%;
    height: 100%;
  }
  .recommend-lead {
    margin-bottom: calc(-5 / 430 * 100vw);
    font-size: calc(24 / 430 * 100vw);
  }
  .recommend-product {
    padding: calc(20 / 430 * 100vw) 0;
    width: 100%;
    gap: calc(10 / 430 * 100vw);
  }
  .recommend-product::before {
    top: 0;
    left: calc(-30 / 430 * 100vw);
    right: 0;
  }
  .recommend-product::after {
    left: calc(-30 / 430 * 100vw);
    right: 0;
    bottom: 0;
  }
  .recommend-product_name {
    margin-bottom: calc(6 / 430 * 100vw);
    padding: 0;
    font-size: calc(18 / 430 * 100vw);
  }
  .recommend-product_price {
    font-size: calc(17 / 430 * 100vw);
  }
  .recommend-product a::after {
    bottom: calc(20 / 430 * 100vw);
    width: calc(38 / 430 * 100vw);
    height: calc(38 / 430 * 100vw);
  }
}