h1,h2,h3,h4,h5,h6,ul,li,p {
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: inherit;
opacity: 1;
transition: opacity .15s ease-in-out;
letter-spacing: 0.1rem;
}
li {
  list-style: none;
}

/* header */
header {
display: flex;
min-height: 70px;
background: #FBFBFB;
padding: 0 20px;
align-items: center;
border-bottom: 2px solid #F2F1F1;
}
.h-logo {
margin-right: 20px;
}
.h-logo img {
width: 136px;
vertical-align: middle;
}
.h-text {
font-size: 14px;
font-weight: 500;
position: relative;
padding-left: 10px;
font-weight: bold;
margin-right: 10px;
}
.h-text::before {
content:'';
width: 5px;
height: 2px;
background: #000;
position: absolute;
top: 50%;
left: 0;
}
.h-btns {
display: grid;
margin-left: auto;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
}

main {
  min-height: calc(100vh - 250px);
}

@media screen and (max-width: 759.98px) {

  header {
    flex-wrap: wrap;
    padding: 8px;
  }
  .h-logo img {
    width: 100px;
  }
  .h-btns {
    margin: 8px 0 0 0;
    width: 100%;
    gap: 8px;
  }
  .btn-fill img {
    margin-left: 8px;
  }
  .btn-outline img {
    margin-right: 8px;
  }

  main {
    min-height: calc(100vh - 232px);
  }
}

/* ボタン*/
.h-btns-wrap a {
font-weight: bold;
}
.btn-outline {
border: 1px solid #3573B8;
min-height: 35px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 500;
color: #3573B8;
text-decoration: none;
padding: 0 10px;
letter-spacing: 0rem;
}
.btn-outline img {
margin-right: 12px;
width: 15px;
}

.btn-fill {
border-radius: 6px;
min-height: 35px;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
font-size: 12px;
font-weight: 500;
color: #fff;
text-decoration: none;
padding: 0 10px;
}
.btn-fill img {
margin-left: 12px;
width: 12px;
}

/* ハンバーガー */
.p-p-l-side-btn {
width: 30px;
height: 30px;
background: none;
border: none;
display: none;
position: relative;
}
.p-p-l-side-btn.active {
position: absolute;
top: 10px;
right: 10px;
}
.p-p-l-side-btn span {
width: 100%;
height: 4px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 1;
  transition: .2s;
}
.p-p-l-side-btn span:nth-child(1) {
  transform: translate(-50%,-260%);
}
.p-p-l-side-btn span:nth-child(3) {
  transform: translate(-50%,160%);
}
.p-p-l-side-btn.active span:nth-child(1) {
  transform: translate(-50%,-50%) rotate(45deg);
}
.p-p-l-side-btn.active span:nth-child(3) {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.p-p-l-side-btn.active span:nth-child(2) {
  opacity: 0;
}

/* タイトル */
.ttl_wrap {
  text-align: center;
  margin: 0 0 min(8vw,80px) 0;
  padding-top: min(8vw,80px);
}
.ttl_wrap h1 {
  font-size: min(4vw,40px);
  width: fit-content;
  padding: 0 min(3.6vw,36px);
  position: relative;
  margin: auto;
}
.ttl_wrap h2 {
  font-size: min(1.8vw,18px);
  width: fit-content;
  margin: auto;
  position: relative;
  padding: 0 min(1.8vw,18px);
  font-weight: 300;
  margin-bottom: min(0.8vw,8px);
}
.ttl_wrap h2::before,
.ttl_wrap h2::after {
  position: absolute;
  content: '';
  width: min(1vw,10px);
  height: min(0.2vw,2px);
  background-color: #000;
  top: 50%;
  transform: translateY(-50%);
}
.ttl_wrap h2::before {
  left: 0;
}
.ttl_wrap h2::after {
  right: 0;
}
#parts .ttl_wrap h1::before {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: min(2vw,20px);
  height: min(2.4vw,24px);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: #3573B8;
  transition: all .3s;
}
#parts .ttl_wrap a:hover h1::before {
  transform: translateY(-50%) translateX(10%);
}

@media screen and (max-width: 759.98px) {
  .ttl_wrap h2 {
    font-size: 3.8vw;
  }
  .ttl_wrap h1 {
    font-size: 6vw;
    padding: 0 8vw;
    margin: 0 auto;
    width: fit-content;
  }
  .ttl_wrap h1::before {
    width: 5vw;
    height: 6vw;
  }
}


/* 部品マップ */
.parts_wrap {
position: relative;
width: 100%;
margin: auto;
display: grid;
justify-content: center;
align-items: center;
max-width: 1000px;
}
.parts_wrap:not(:last-child) {
  margin-bottom: min(4vw,40px);
}
.parts_wrap:last-child {
  margin-bottom: min(8vw,80px);
}

.parts_wrap p {
margin: 0;
}
@media screen and (max-width: 759.98px) {
  .parts_open {
    overflow: scroll;
    margin: 40px 10px;
    border: 1px solid #A4A4A4;
    padding: 0 10px;
  }
  .parts_wrap {
    position: relative;
    width: 600px;
    margin: 10px auto!important;
    display: grid;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    justify-content: flex-start;
  }
}


/* メインイメージ */
.parts_wrap .main_img {
width: min(56vw,560px);
grid-row: 3/7;
grid-column: 2/6;
}
.parts_wrap .main_img img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
vertical-align: bottom;
}
@media screen and (max-width: 759.98px) {
  .parts_wrap .main_img {
    width: 520px;
  }
}

/* パーツ */
.parts_wrap > div.parts.p01 {
grid-row: 1/3;
grid-column: 2/3;
}
.parts_wrap > div.parts.p02 {
grid-row: 1/3;
grid-column: 3/4;
}
.parts_wrap > div.parts.p03 {
grid-row: 1/3;
grid-column: 4/5;
}
.parts_wrap > div.parts.p04 {
grid-row: 1/3;
grid-column: 5/6;
}

.parts_wrap > div.parts.p05 {
grid-row: 2/4;
grid-column: 6/7;
}
.parts_wrap > div.parts.p06 {
grid-row: 4/5;
grid-column: 6/7;
}
.parts_wrap > div.parts.p07 {
grid-row: 5/6;
grid-column: 6/7;
}
.parts_wrap > div.parts.p08 {
grid-row: 6/8;
grid-column: 6/7;
}

.parts_wrap > div.parts.p09 {
grid-row: 7/9;
grid-column: 5/6;
}
.parts_wrap > div.parts.p10 {
grid-row: 7/9;
grid-column: 4/5;
}
.parts_wrap > div.parts.p11 {
grid-row: 7/9;
grid-column: 3/4;
}
.parts_wrap > div.parts.p12 {
grid-row: 7/9;
grid-column: 2/3;
}

.parts_wrap > div.parts.p13 {
grid-row: 6/8;
grid-column: 1/2;
}
.parts_wrap > div.parts.p14 {
grid-row: 5/6;
grid-column: 1/2;
}
.parts_wrap > div.parts.p15 {
grid-row: 4/5;
grid-column: 1/2;
}
.parts_wrap > div.parts.p16 {
grid-row: 2/4;
grid-column: 1/2;
}

.parts_wrap > div.parts {
width: min(14vw, 140px);
height: 100%;
  max-height: min(20.6vw, 206px);
text-decoration: none;
color: #000;
font-weight: 600;
padding: min(1vw,10px);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
background-color: #f4f4f4;
transition: all .3s;
border: #fff solid min(0.25vw,2.5px);
box-sizing: border-box;
cursor: pointer;
}
.parts_wrap div.parts:hover {
opacity: 1;
}
.parts_wrap div.parts:hover > div {
transform: scale(1.02);
}
.parts_wrap div.parts:hover img,
.parts_wrap div.parts > p:hover,
.parts_wrap div.parts:hover > p {
color: #000;
opacity: 1;
}
.parts_wrap div.parts > .img_block {
margin-bottom: min(0.8vw,8px);
aspect-ratio: 1/1;
width: 100%;
border: min(0.1vw,1px) solid #A4A4A4;
transition: all .3s;
position: relative;
}

/* 消耗品アイコン */
.parts_wrap div.parts > .img_block.label::before {
position: absolute;
content: "消耗品";
padding: min(0.2vw,2px) min(0.4vw,4px) min(0.3vw,3px);
background-color: #979797;
color: #fff;
line-height: 1;
font-weight: 500;
font-size: min(1.0vw,10px);
left: 0;
top: 0;
}
/* カラバリアイコン */
.parts_wrap div.parts > div > .color {
position: absolute;
content: "";
padding: min(0.4vw,4px);
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
gap: min(0.1vw,1px);
}
.parts_wrap div.parts > div > .color span {
width: min(1.6vw,16px);
aspect-ratio: 1/1;
border-radius: min(1vw,10px);
}

.parts_wrap div.parts > div > img {
object-fit: cover;
width: 100%;
vertical-align: bottom;
}

.parts_wrap div.parts h3 {
font-size: min(1.2vw,12px);
max-height: min(4vw,40px);
overflow: hidden;
text-align: center;
line-height: 1.1;
margin: 0;
padding: 0;
border-left: none;
color: #000;
letter-spacing: normal;
margin-bottom: min(0.4vw,4px);
}
.parts_wrap div.parts p {
font-size: min(1.0vw,10px);
color: #A5A5A5;
font-weight: 300;
transition: all .3s;
}

@media screen and (max-width: 759.98px) {

  .parts_wrap > div.parts {
    width: 130px;
    max-height: none;
    padding: 10px;
    border-width: 2.5px;
  }

  .parts_wrap div.parts > .img_block.label::before {
    font-size: 10px;
    padding: 2px 3px 4px;
  }
  .parts_wrap div.parts > div > .color span {
    width: 16px;
    border-radius: 10px;
  }

  .parts_wrap div.parts h3 {
    font-size: 12px;
    max-height: 26px;
  }
  .parts_wrap div.parts p {
    font-size: 10px;
  }
  .parts_wrap div.parts > .img_block {
    margin-bottom: 8px;
  }
}


/*---------------------------
 モーダル 
---------------------------*/

/* モーダル本体 */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}

/* 表示時 */
.modal.show {
display: flex;
opacity: 1;
}

.modal-content {
background: #fff;
margin: auto;
padding: 20px;
max-width: 600px;
width: 80%;
border-radius: 10px;
position: relative;
transform: scale(0.95);
opacity: 0;
transition: all 0.3s ease;
}
.modal.show .modal-content {
transform: scale(1);
opacity: 1;
}

.modal .close {
position: absolute;
top: 10px; right: 20px;
font-size: 24px;
cursor: pointer;
padding: 10px 15px;
}

.modal h3 {
font-size: 24px;
text-align: center;
max-width: 80%;
margin: auto;
line-height: 1.2;
}

.modal p {
font-size: 16px;
color: #A5A5A5;
text-align: center;
}
.modal_img {
text-align: center;
min-height: 100px;
}
.modal_img img {
width: 140px;
aspect-ratio: 1/1;
object-fit: cover;
}


.buy-button {
display: block;
padding: 8px;
width: 50%;
margin: auto;
text-align: center;
background-color: #3573B8;
border-radius: 5px;
box-sizing: border-box;
border: 2px solid #3573B8;
transition: all .3s;
}
.buy-button p {
  width: fit-content;
  margin: auto;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  position: relative;
  padding-left: 24px;
  transition: all .3s;
}
.buy-button p::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
  background-image: url(https://shop.haige.jp/wp/wp-content/themes/haige/img/parts.png);
  width: 18px;
  height: 16px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  filter: invert(99%) sepia(7%) saturate(29%) hue-rotate(271deg) brightness(104%) contrast(100%);
  transition: all .3s;
}
.buy-button:hover {
background-color: #fff;
}
.buy-button:hover p {
  color: #3573B8;
}
.buy-button:hover p::before {
  filter: invert(43%) sepia(13%) saturate(2807%) hue-rotate(171deg) brightness(92%) contrast(86%);
}

@media screen and (max-width: 759.98px) {
  .buy-button {
    width: 100%;
  }
}

/* 動画 */
.modalVideos {
margin: 16px 0 0 0;
padding: 12px 0;
/* background-color: #f4f4f4; */
border-top: 3px dotted #3573B8;
}
.modalVideos h4 {
font-size: 18px;
margin-left: 16px;
}
.modal h4 img {
aspect-ratio: 1/1;
width: 20px;
vertical-align: sub;
margin-right: 8px;
}

.movie_area {
width: 100%;
overflow: scroll;
scrollbar-width: thin;
scrollbar-color: #b4b4b4 #ccc;
}
.movie_area > div {
display: flex;
gap: 20px;
justify-content: flex-start;
align-items: center;
width: max-content;
flex-wrap: nowrap;
padding: 16px;
}
.movie_inner {
width: 240px;
}
.movie_area h5 {
font-size: 14px;
font-weight: 300;
margin-top: 4px;
position: relative;
padding-left: 14px;
}
.movie_area h5::before {
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
left: 0;
width: 10px;
height: 12px;
clip-path: polygon(0 0,100% 50%,0 100%);
background-color: #3573B8;
}
lite-youtube {
border-radius: 4px;
}
lite-youtube > .lty-playbtn {
background-size: 48px 32px;
}

@media screen and (max-width: 759.98px) {
  .movie_inner {
    width: 174px;
  }
}



/* footer */
footer {
text-align: center;
padding: 24px 0 0 0;
color: #000;
background-color: #FBFBFB;
border-top: 2px solid #F2F1F1;
}
.footer_icon {
margin: 0 0 20px 0;
}
.footer_icon img {
width: 140px;
vertical-align: bottom;
}
.footet_menu {
display: flex;
justify-content: center;
align-items: center;
}

.footet_menu a {
padding: 0 min(1.5vw, 15px);
}
.footet_menu a:not(:last-child) {
border-right: 1px solid #000;
}

.copylight {
padding: 12px 0;
font-size: 10px;
}
@media screen and (max-width: 759.98px) { 
  .footet_menu {
    font-size: 14px;
  }
}


/* 一覧ページ */
.product-list {
  width: 100%;
  margin: 0 auto 120px;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  padding: 0 60px;
  box-sizing: border-box;
}
.category-block h3 {
  font-size: 16px;
  color: #fff;
  background-color: #3573B8;
  font-weight: 600;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.category-block h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}
ul.product-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.product-list-items li {
  min-height: 40px;
  padding: 0 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 3px 8px 1px #0000002e;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-list-items li a {
  text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    height: 100%;
}

@media screen and (max-width: 759.98px) { 
  .product-list {
    padding: 0 12px;
    margin: 0 auto 40px;
  }
}