@charset "UTF-8";
/**
 * ViewPort Mixin and setting rem to pixel.
 */
/** ここでデザインファイルのサイズを入力 */
/**
 * mixin
 */
/**
 * pxをvwで返す関数
 */
/** デスクトップ上でpxをvwを返す */
/** モバイル上でpxをvwを返す */
/** largeDisplay（1536px以上）でウィンドウサイズサイズに追従するための関数 */
/**
 * Colors
 */
@media (max-width: 768px) {
  .intro {
    position: relative;
    z-index: 2;
    width: 82%;
    margin: -50rem auto -3rem;
  }
}
.intro .md {
  width: 198rem;
  margin: 0 auto;
}

.intro-inner {
  display: flex;
  gap: 48rem;
  margin-bottom: -52rem;
}
@media (max-width: 768px) {
  .intro-inner {
    flex-direction: column-reverse;
    margin-bottom: 0;
  }
}
.intro-inner .intro-image {
  width: 350rem;
}
@media (max-width: 768px) {
  .intro-inner .intro-image {
    width: 100%;
  }
}
.intro-inner .intro-text {
  width: 350rem;
  transform: translateY(-25rem);
}
@media (max-width: 768px) {
  .intro-inner .intro-text {
    width: 100%;
    margin: 50rem auto 0;
    transform: translateY(0);
  }
}
.intro-inner .heading3 {
  width: 288rem;
  margin: 0 auto 30rem 0;
}
@media (max-width: 768px) {
  .intro-inner .heading3 {
    width: 240rem;
    margin: 0 auto 30rem;
  }
}

.md-wrap {
  margin: 48rem auto;
}
@media (max-width: 768px) {
  .md-wrap {
    padding: 48rem 12rem 12rem;
    background: #FF9000;
    border-radius: 36rem;
  }
}