@charset "utf-8";

/*===================
トップページ共通パーツ
===================*/
.sec {
  /* position: relative; */
  padding: 66px 0 0 0;
}
.sec__heading {
  position: absolute;
  top: 7px;
  left: 0px;
  font-family: calibri, sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.45em;
  writing-mode: vertical-rl;
}

.concept .sec__heading {
  top: 49px;
}
.product .sec__heading {
  top: -136px;
}
.news .sec__heading {
  top: -24px;
}

@media screen and (max-width: 1030px) {
  .sec__heading {
    position: static;
    max-width: 850px;
    writing-mode: horizontal-tb;
    margin: 0 auto 20px;
  }
  .concept .sec__heading {
    padding-top: 66px;
  }
}

@media screen and (max-width: 750px) {
  .sec__heading {
    font-size: 24px;
  }
}

/*===================
fv
===================*/
/* スワイパー↓ */
.mv__swiper .swiper-slide {
  max-height: 100vh;
}
.mv__swiper .swiper-pagination {
  bottom: 36px;
}
.mv__swiper .swiper-pagination-bullet {
  background-color: none;
  border: 1px solid #fff;
}
.mv__swiper .swiper-pagination-bullet-active {
  background-color: #fff;
}
.mv__swiper .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
}
.mv__swiper-slide img {
  /* min-height: 550px; */
  object-fit: cover;
}
/* スワイパー↑ */

.owabi {
  max-width: 750px;
  padding: 0 15px;
  margin: 100px auto 50px;
}

.banner {
  max-width: 750px;
  padding: 0 15px;
  margin: 50px auto 100px;
}

@media screen and (max-width: 750px) {
  .owabi {
  max-width: 750px;
  padding: 0 15px;
  margin: 50px auto 25px;
}
  .banner {
  margin: 25px auto 50px;
}
}

/*===================
message
===================*/
.message .inner-1115 {
  position: relative;
}
.message__container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 70px;
  position: relative;
}
.message__deco {
  display: block;
  width: 30%;
  padding-top: 28%;
  background: url(../imgs/index/message_deco.png) center center / cover no-repeat;
  position: absolute;
  /* bottom: -46%; */
  bottom: -20%;
  /* right: -4vw; */
  right: -5vw;
}
.message__leftBox {
  width: 50%;
}
.message__pic {
  max-width: 415px;
  margin-bottom: 34px;
}
.message__rightBox {
  margin-left: 36px;
}
.message__belong {
  margin-bottom: 7px;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  line-height: 2.41;
}
.message__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
}
.message__nameTxt {
  font-weight: 300;
  font-size: 23px;
  letter-spacing: 0.4em;
}
.message__nameEn {
  font-size: 7px;
  font-weight: 300;
  letter-spacing: 0.5em;
}
.message__txt {
  width: 43%;
  padding-top: 27px;
  font-size: 12px;
  letter-spacing: 0.36em;
  line-height: 2.93;
}
@media screen and (max-width: 1280px) {
  .message__deco {
    position: static;
    width: 30%;
    padding-top: 27%;
    margin-left: auto;
  }
}
@media screen and (max-width: 750px) {
  .message__container {
    display: block;
  }
  .message__container::before {
    width: 100px;
    height: 100px;
    right: 0;
    bottom: -91px;
  }
  .message__leftBox {
    width: 100%;
    margin: 0 auto;
  }
  .message__pic {
    width: 100%;
    margin: 0 auto 20px;
  }
  .message__rightBox {
    margin-left: 0;
    text-align: center;
  }
  .message__name {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 7px;
  }
  .message__txt {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

/*===================
movie
===================*/
.movie__wrap {
  /* display: flex;
  justify-content: space-between;
  gap: 2%; */
}
.youtube {
  position: relative;
  width: 48%;
  /* max-width: 580px; */
  padding-top: 26.9%;
  margin: 0 auto 69px;
}
.youtube.pc {
  padding-top: 0;
}
.youtube.sp {
  display: none;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.youtube__thumbnail {
  cursor: pointer;
  position: relative;
}
.youtube__thumbnail::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: url(../imgs/index/start_icon.png) center center / cover no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.youtube__thumbnail img {
  width: 100%;
}
@media screen and (max-width: 750px) {
  .movie__wrap {
    display: block;
  }
  .youtube {
    width: 100%;
    /* padding-top: 48.25%; */
    padding-top: 56.25%;
  }
  .youtube.pc {
    display: none;
  }
  .youtube.sp {
    display: block;
  }
}

/*===================
concept
===================*/
.concept {
  padding-bottom: 55px;
}
.concept__bgWrap {
  background: url(../imgs/index/concept_bg.jpg) center center / cover no-repeat;
}
.concept__intro {
  padding: 160px 0 134px;
  margin-bottom: 62px;
}
.concept__ttl {
  margin-bottom: 60px;
  font-size: 23px;
  font-weight: 300;
  letter-spacing: 0.34em;
}
.concept__txt {
  font-size: 13px;
  letter-spacing: 0.48em;
  line-height: 3.06;
}
.concept__container {
  /* max-width: 815px; */
  /* margin: 0 auto; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 34px;
  margin-bottom: 67px;
}
.concept__container:nth-child(even) {
  flex-direction: row-reverse;
}
.concept__container:last-child {
  margin-bottom: 82px;
}
.concept__pic {
  width: 44%;
  max-width: 372px;
}
.concept__box {
  padding-top: 55px;
  width: 43%;
  position: relative;
}
.concept__box::before {
  display: block;
  content: "";
  width: 132px;
  height: 70px;
  background: url(../imgs/index/logo_mih.svg) center center / cover no-repeat;
  position: absolute;
  top: -8px;
  left: 135px;
}
.concept__container:nth-child(even) .concept__box::before {
  display: block;
  content: "";
  width: 132px;
  height: 70px;
  background: url(../imgs/index/logo_mih.svg) center center / cover no-repeat;
  position: absolute;
  top: -20px;
  left: -53px;
  rotate: -28deg;
}
.concept__conceptTtl {
  margin-bottom: 22px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.3em;
  line-height: 1.7;
}
.concept__conceptTxt {
  font-size: 13px;
  letter-spacing: 0.18em;
  line-height: 2.06;
}
.concept__notes {
  display: block;
  font-size: 9px;
  line-height: 1.75;
}
@media screen and (max-width: 1030px) {
  .concept__intro {
    padding-top: 34px;
  }
}
@media screen and (max-width: 750px) {
  .concept__ttl {
    font-size: 20px;
  }
  .concept__ttl,
  .concept__txt {
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
  }
  .concept__container,
  .concept__container:nth-child(even) {
    flex-direction: column;
    gap: 2px;
  }
  .concept__pic {
    max-width: 500px;
    width: 100%;
  }
  .concept__box {
    width: 100%;
    padding-top: 75px;
    max-width: 500px;
    margin: 0 auto;
  }
  .concept__box::before,
  .concept__container:nth-child(even) .concept__box::before {
    width: 101px;
    height: 54px;
    top: 14px;
    left: 0px;
    rotate: -13deg;
  }
}

/*===================
product
===================*/
.product {
  padding-bottom: 55px;
  background: #f9f9f9;
  overflow: hidden;
}
.product__containerBg {
  width: 100vw;
  background: #fff;
  padding-top: 24px;
  margin-top: 111px;
  margin-right: calc(50% - 50vw);

  margin-bottom: 270px;
}
.product__containerBg.reverse {
  width: calc(100vw + (50% - 50vw));
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  margin-top: 130px;
  margin-bottom: 240px;
}

.product__container {
  display: flex;
  justify-content: space-between;
  max-width: 916px;
}
.product__container.reverse {
  flex-direction: row-reverse;
  /* margin: 0 auto; */
  margin-left: auto;
}

.product__leftBox {
  width: 40%;
  position: relative;
}
.product__pic {
  width: 118%;
  position: absolute;
  top: 68%;
  left: 11%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}
.product__pic02 {
  left: -12%;
}

.reverse .product__rightBox {
  /* padding-left: 38px; */
}
.product__rightBox {
  width: 50%;
  max-width: 407px;
  padding-left: 8px;
  position: relative;
}
.product__nameLogo {
  margin-bottom: 22px;
  max-width: 309px;
}
.product__name {
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 0.24em;
  line-height: 1.5;
}

.product__detailBox {
  padding: 10px;
  padding-bottom: 6px;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 41px;
}
.product__detailGroup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 11px;
}
.product__detailTxt {
  font-size: 12px;
  letter-spacing: 0.24em;
}
.product__detailPic {
  width: 66px;
}
.product__detailImage {
  margin-bottom: 6px;
  font-size: 7px;
  letter-spacing: 0.24em;
}
.product__btnLink {
  display: block;
  padding: 40px 0 28px;
  font-family: calibri, sans-serif;
  font-size: 17px;
  letter-spacing: 0.28em;
  position: relative;
}
.product__btnLink::before {
  display: block;
  content: "";
  width: 37px;
  height: 8px;
  background: url(../imgs/index/arrow.svg) center center / cover no-repeat;
  position: absolute;
  top: 57%;
  left: 156px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transition: 0.3s;
}
.product__btnLink:hover::before {
  transform: translate(-10%, -50%);
}

@media screen and (max-width: 1075px) {
  .product__containerBg,
  .product__containerBg.reverse {
    width: 100%;
    margin: 111px 0 240px;
  }
  .product__containerBg:first-child {
    margin-top: 99px;
  }
  .product__containerBg {
    padding-right: 30px;
  }
  .product__containerBg.reverse {
    padding-left: 30px;
  }
  .product__pic01,
  .product__pic03 {
    left: 6%;
  }
}

@media screen and (max-width: 840px) {
  .product__pic {
    top: 58%;
  }
}

@media screen and (max-width: 750px) {
  .linkArea {
    padding-top: 70px;
  }

  .product__containerBg,
  .product__containerBg.reverse {
    padding: 15px;
    margin-top: 141px;
    margin-bottom: 80px;
  }
  .product__containerBg:first-child {
    margin-top: 56px;
  }
  .product__container,
  .product__container.reverse {
    flex-direction: column;
  }
  .product__leftBox {
    width: 100%;
    margin: 0 auto;
  }
  .product__pic {
    position: static;
    width: 100%;
    max-width: 308px;
    margin: 0 auto;
    transform: none;
  }
  /* .product__pic01 {
    width: 53%;
    max-width: 252px;
    min-width: 233px;
}
.product__pic02 {
  width: 56%;
  max-width: 218px;
  min-width: 218px;
}
.product__pic03 {
  width: 54%;
  max-width: 257px;
  min-width: 240px;
} */
  .product__rightBox {
    width: 100%;
    padding-left: 0;
    margin: 0 auto;
  }
  .product__nameLogo {
    margin: 0 auto 22px;
  }
  .product__detailBox {
    display: block;
  }
}

/*===================
news
===================*/
.news {
  background: #ebe6e6;
  padding-top: 93px;
  padding-bottom: 95px;
}
.news__list {
  min-height: 140px;
  border-top: 1px solid #231815;
  margin-bottom: 41px;
}
.news__listItem {
  /* display: none; */
  /* padding: 13px 15px; */
  border-bottom: 1px solid #231815;

  position: relative;
}

.news__listItem::before {
  display: block;
  content: "";
  color: #231815;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  top: 22px;
  right: 28px;
  transition: 0.3s;
}
.news__listItem.active::before {
  transform: translateY(-25%) rotate(315deg);
}
.news__listItemWrap {
  /* max-width: 95%; */
}
.news__ttlWrap {
  padding: 13px 15px;
  cursor: pointer;
}
.news__date {
  max-width: 95%;
  font-size: 11px;
  letter-spacing: 0.24em;
  line-height: 1.75;
}
.news__listTtl {
  max-width: 95%;
  /* margin-bottom: 15px; */
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.75;
}
.news__contents.editor {
  display: none;
  max-width: 95%;
  padding: 0px 15px 13px 15px;
}
.news__more {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  border-radius: 999px;
  background: #727171;
  position: relative;
}
.news__moreLink {
  display: block;
  cursor: pointer;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: #727171;
  padding-top: 22px;
  margin: 0 auto;
  font-family: calibri, sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #fff;
  text-align: center;
  position: relative;
}
.news__moreLink::before {
  display: block;
  content: "";
  color: #fff;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  top: 55%;
  left: 42%;
}
.news__noPost {
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
}
.news__listItem.no-content::before {
  display: none;
}
.news__ttlWrap.disabled {
  pointer-events: none;
}
@media screen and (max-width: 750px) {
  .news__listItem::before {
    width: 0.5em;
    height: 0.5em;
    top: 33px;
    right: 15px;
  }
}

/*===================
about
===================*/
.about {
  padding-bottom: 64px;
}
.about__container {
  margin-bottom: 147px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}
.about__left {
  width: 45%;
}
.about__logo {
  width: 72%;
  margin: 0px 0 37px 39px;
}
.about__txt {
  max-width: 90%;
  margin: 0 auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 2.36;
}
.about__pic {
  width: 59%;
}
.about__btnLink {
  display: block;
  width: fit-content;
  padding: 10px;
  margin: 0 auto;
  transform: translate(-37px, 0px);
  font-family: calibri, sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-align: center;
  position: relative;
}
.about__btnLink::before {
  display: block;
  content: "";
  width: 37px;
  height: 8px;
  background: url(../imgs/index/arrow.svg) center center / cover no-repeat;
  position: absolute;
  top: 57%;
  right: -40%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transition: 0.3s;
}
.about__btnLink:hover::before {
  transform: translate(-10%, -50%);
}

@media screen and (max-width: 750px) {
  .about__container {
    margin-bottom: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .about__left {
    width: 100%;
  }
  .about__logo {
    max-width: 280px;
    margin: 0 auto 20px;
  }
  .about__txt {
    max-width: none;
  }
  .about__pic {
    width: 100%;
    max-width: 410px;
  }
}