@charset "UTF-8";

@media screen and (min-width: 768px) {
  body {
    min-width: 980px;
  }
  .pc_none {
    display: none !important;
  }
  .main {
    display: flex;
  }
  .main .mv {
    flex-grow: 1;
    width: 50vw;
    height: 100vh;
    position: sticky;
    top: 0;
  }
  .main .con {
    flex-grow: 1;
    width: 50vw;
  }
  .main .con .inner {
    width: 27.972vw;
    text-align: center;
    margin: 0 auto 10.434vw;
  }
  .main .con .inner h2 {
    margin-bottom: 3.996vw;
  }
  .main .con .inner p {
    text-align: left;
    font-size: 1.332vw;
    line-height: 2.3088vw;
  }
  .main .con .inner img {
    width: 100%;
  }
  .main .con .inner a {
    transition: filter 0.3s ease;
  }
  .main .con .inner a:hover {
    filter: brightness(0.7);
  }
  #main .mv {
    background: url("../image/mv.jpg") no-repeat center/80%;
  }
  #main .con .brand {
    margin-top: 3.108vw;
  }
  #main .con .brand h2 img {
    width: 9.3684vw;
  }
  #main .con .brand .brand_flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 3.552vw;
  }
  #main .con .brand .brand_flex img {
    width: 13.32vw;
  }
  #main .con .brand .special_con {
    margin-top: 5.106vw;
  }
  #main .con .brand .special_con h3 img {
    display: block;
    text-align: left;
    margin: 2.664vw auto 1.776vw 0;
  }
  #main .con .brand .brandhistory h3 img {
    width: 10.4784vw;
  }
  .sub-brand .con .inner h2 {
    margin: 5.328vw auto;
  }
  .sub-brand .con .inner h3 {
    margin-bottom: 1.776vw;
  }
  .sub-brand .con .inner p {
    text-align: left;
    margin-bottom: 3.996vw;
  }
  .sub-brand .con .inner .img_area img {
    margin-bottom: 1.332vw;
  }
  .sub-brand .con .inner a img {
    width: 21.312vw;
    margin-top: 3.996vw;
  }
  .sub-brand .con .inner a:hover {
    filter: brightness(2);
  }
  #sub-brand_01 .mv {
    background: url("../image/sub-brand_01_mv.jpg") no-repeat center/contain;
  }
  #sub-brand_01 .con h2 img {
    width: 25.8852vw;
  }
  #sub-brand_01 .con h3 img {
    width: 14.7852vw;
  }
  #sub-brand_02 .mv {
    background: url("../image/sub-brand_02_mv.jpg") no-repeat center/contain;
  }
  #sub-brand_02 .con h2 img {
    width: 19.2252vw;
  }
  #sub-brand_02 .con h3 img {
    width: 5.0616vw;
  }
  #sub-brand_03 .mv {
    background: url("../image/sub-brand_03_mv.jpg") no-repeat center/contain;
  }
  #sub-brand_03 .con h2 img {
    width: 21.978vw;
  }
  #sub-brand_03 .con h3 img {
    width: 7.2372vw;
  }
  #sub-brand_04 .mv {
    background: url("../image/main-1.jpg") no-repeat center/contain;
  }
  #sub-brand_04 .con h2 img {
    width: 21.09vw;
  }
  #sub-brand_04 .con h3 img {
    width: 7.9476vw;
  }
}
@media screen and (max-width: 767px) {
  article {
    font-size: 0.2666666667vw;
  }
  body {
    min-width: 320px;
  }
  .sp_none {
    display: none !important;
  }
  .main .mv {
    width: 100vw;
  }
  .main .con {
    width: 100vw;
  }
  .main .con .inner {
    width: 84vw;
    text-align: center;
    margin: 0 auto 31.3333333333vw;
  }
  .main .con .inner h2 {
    margin-bottom: 12vw;
  }
  .main .con .inner p {
    text-align: left;
    font-size: 4vw;
    line-height: 6.9333333333vw;
  }
  .main .con .inner img {
    width: 100%;
  }
  #main .mv {
    background: url("../image/mv.jpg") no-repeat center/100%;
    height: 102.6666666667vw;
  }
  #main .con .brand h2 img {
    width: 28.1333333333vw;
  }
  #main .con .brand .brand_flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10.6666666667vw;
  }
  #main .con .brand .brand_flex img {
    width: 40vw;
  }
  #main .con .brand .special_con {
    margin-top: 15.3333333333vw;
  }
  #main .con .brand .special_con h3 img {
    display: block;
    text-align: left;
    margin: 8vw auto 5.3333333333vw 0;
  }
  #main .con .brand .brandhistory h3 img {
    width: 31.4666666667vw;
  }
  .sub-brand .mv {
    height: 133.3333333333vw;
  }
  .sub-brand .con .inner h2 {
    margin: 16vw auto;
  }
  .sub-brand .con .inner h3 {
    margin-bottom: 5.3333333333vw;
  }
  .sub-brand .con .inner p {
    text-align: left;
    margin-bottom: 12vw;
  }
  .sub-brand .con .inner .img_area img {
    margin-bottom: 4vw;
  }
  .sub-brand .con .inner a img {
    width: 64vw;
    margin-top: 12vw;
  }
  #sub-brand_01 .mv {
    background: url("../image/sub-brand_01_mv.jpg") no-repeat center/100%;
  }
  #sub-brand_01 .con h2 img {
    width: 77.7333333333vw;
  }
  #sub-brand_01 .con h3 img {
    width: 44.4vw;
  }
  #sub-brand_02 .mv {
    background: url("../image/sub-brand_02_mv.jpg") no-repeat center/100%;
  }
  #sub-brand_02 .con h2 img {
    width: 57.7333333333vw;
  }
  #sub-brand_02 .con h3 img {
    width: 15.2vw;
  }
  #sub-brand_03 .mv {
    background: url("../image/sub-brand_03_mv.jpg") no-repeat center/100%;
  }
  #sub-brand_03 .con h2 img {
    width: 66vw;
  }
  #sub-brand_03 .con h3 img {
    width: 21.7333333333vw;
  }
  #sub-brand_04 .mv {
    background: url("../image/main-1.jpg") no-repeat center/100%;
  }
  #sub-brand_04 .con h2 img {
    width: 63.3333333333vw;
  }
  #sub-brand_04 .con h3 img {
    width: 23.8666666667vw;
  }
}


.sub-brand .con .inner h3 {
  text-align: center;
  font-size: 1.7vw;
  font-family: 'matter';
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
.sub-brand .con .inner h3 {
  font-size: 5vw;
}
}
.sub-brand .con .inner a.text_btn {
  min-width: 21.312vw;
  width: fit-content;
  margin: 3.996vw auto 0;
  display: flex;
  background: #222222;
  color: #fff;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 1.7vw;
  font-weight: bold;
  padding: 0 0.7em;
  box-sizing: border-box;
  line-height: 2.6;
}
.sub-brand .con .inner a.text_btn:after {
content: '';
display: block;
width: 0.65vw;
height: 0.65vw;
border-right: #fff 0.2vw solid;
border-bottom: #fff 0.2vw solid;
transform: rotate(-45deg);
margin-left: 0.4vw;
}
.sub-brand .con .inner h3 {
  margin-top: 5vw;
}
@media screen and (max-width: 767px){
.sub-brand .con .inner a.text_btn {
  min-width: 64vw;
  width: fit-content;
  margin: 12vw auto 0;
  display: flex;
  background: #222222;
  color: #fff;
  font-size: 5.4vw;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  line-height: 2.4;
}
.sub-brand .con .inner a.text_btn:after {
content: '';
display: block;
width: 2vw;
height: 2vw;
border-right: #fff 0.5vw solid;
border-bottom: #fff 0.5vw solid;
transform: rotate(-45deg);
margin-left: 1vw;
}
.sub-brand .con .inner h3 {
  margin-top: 15vw;
}
}