@charset "utf-8";


.FloationgMenu
{
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 9999;
}

.HeaderInner
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 87%;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(0);
    margin: 1% 1% 0;
    width: calc(100% - 40px);
    
    /* top:10%;
    width: 96%;
    margin: 0 auto; */
}

@media only screen and (max-width: 899px) {
  .HeaderInner {
  display: none;
  }
}

.Logo
{
    width: 18%;
    height: auto;
}

.Logo img
{
    width: 100%;
    height: auto;
    margin-left: 30px;
    margin-top: 10px;
}

.ul{
    box-sizing: border-box;
}

.HeaderNav
{
    margin-right: 36px;
    display: flex;
    align-items: center;
    z-index: 120;
}

.HeaderNavList
{
    display: flex;
    visibility: visible;
    opacity: 1;
    list-style: none;
}

.HeaderNavListItem
{
    margin-left: 25px;
}

.HeaderNavListItem:first-child {
    margin-left: 0;
}

.HeaderNavListItem a span
{
    font-size: 0.9375vw;  
    height: auto;
    color: black;
}

a{
    text-decoration: none;
}

.HeaderNavBtn
{
    margin-left: 25px;
}

.HeaderNavBtn a
{
    overflow: hidden;
    text-align: center;
    z-index: 1;
    color: black;
    background-color: orange;
    padding: 6px 20px 7px 20px;
    box-sizing: border-box;
    border-radius: 17px;
    position: relative;
    display: flex;
    align-items: center;
    height: 5%;
}

.HeaderNavBtn a span
{
    position: relative;
    line-height: normal;
    font-size: 0.9375vw;
}

*
{
    margin: 0;
    padding: 0;
}


/*-- /// --*/

.c-header {
  align-items: center;
  background-color: rgba(239, 241, 233, 0.705);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  width: 100%;
}

@media only screen and (min-width: 900px) {
  .c-header {
  display: none;
  }
}

.c-header__logo {
  color: #000;
  min-width: 80px;
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  color: #000;
  display: block;
  margin-right: 20px;
  text-decoration: none;
  font-size: 12px;
  padding: 10px 0px;
}

.c-header__list-link:hover {
  filter: opacity(0.6);
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: rgba(249, 189, 26, 0.9);
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem;
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s;
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000;
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 32px;
    justify-content: center;
    width: 32px;
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000;
  display: block;
  height: 1px;
  transition: 0.3s;
  width: 20px;
}

@media screen and (max-width: 750px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg);
    transform-origin: 0%;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg);
    transform-origin: 0%;
  }
}

/*-- /// --*/


.body
{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.Main
{
    margin: 0;
    padding: 0; 
    /* width: 100%;
    height: auto; */
}

.Fv
{
    position: relative;
    /* background-color: #29cc5a; */
}

.FvImage
{
    position: relative;
    display: inline;
}

.FvImage img
{
    display: block;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 899px) {
  .FvImage img {
    display: block;
    max-width: 100%;
    height: auto;
    padding-top: 20%;
    z-index: 1;
  }
}

@media only screen and (min-width: 900px) {
  .FvImage img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

.FvImage video
{
    /* opacity: 0.3; */
    display:block;
    width: 100%;
    height: auto;
}

.FvImage img:nth-of-type(1)
{
    position: absolute;
    width: 30%;
    height: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 18%;
}

.FvImage img:nth-of-type(2)
{
    position: absolute;
    width: 80%;
    height: auto;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.FvImage img:nth-of-type(3)
{
    position: absolute;
    width: 19%;
    height: auto;
    top:60%;
    left: auto;

}

.FvImage img:nth-of-type(4)
{
    position: absolute;
    width: 9%;
    height: auto;

    top:10%;
    right: 0%;

}

.FvImage img:nth-of-type(5)
{
    position: absolute;
    width: 18%;
    height: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 56%;
}


/* .FvPatent img
{
    position: absolute;
    height: 
    display: inline;
    transform: translate(-50%,-50%);
} */

.Top
{
    position: relative;
}

.TopBackground
{
    position: relative;
    margin-top: -32%;
    /* width: 100%;
    height: auto; */
    /* opacity: 0.3; */
    /* background-color: yellow; */
}

.TopBackground img
{
    /* opacity: 0.3; */
    display: block;
    width: 100%;
    height: auto;
    /* top: 30%; */
}

.TopBackground img:nth-of-type(2)
{
    position: absolute;
    display: block;
    width: 42%;
    height: auto;
    left: 40%;
    top: 17%;
}

.TopContents
{
    position: absolute;
    margin-top: -72%;
    /* background-color: #29cc5a; */
    width: 100%;
}

.Box
{
    /* position: absolute; */
    width: 66.6%;
    margin: 0 auto;
    /* background-color: tomato; */
}

@media only screen and (max-width: 899px) {
  .Box {
    width: 86.6%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 900px) {
  .Box {
    width: 76.6%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1400px) {
  .Box {
    width: 66.6%;
    margin: 0 auto;
  }
}
.TopImage
{
    /* position: absolute; */
    left: 35%;
    top: 28%;
    width: 56%;
    /* background-color: tomato; */
}

.TopImage img
{
    display: block;
    width: 100%;
    height: auto;
}

.TopTitle
{
    font-size: 40px;
    letter-spacing: 0.03em;
}

@media only screen and (max-width: 899px) {
  .TopTitle {
    font-size: 22px;
    letter-spacing: 0.01em;
  }
}

@media only screen and (min-width: 900px) {
  .TopTitle {
    font-size: 40px;
    letter-spacing: 0.03em;
  }
}


.TopText
{
    font-size: 18px;
    line-height: 2.0;
    letter-spacing: 0.05em;
}

@media only screen and (max-width: 899px) {
  .TopText {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.05em;
   }
}

@media only screen and (min-width: 900px) {
  .TopText {
    font-size: 18px;
    line-height: 2.0;
    letter-spacing: 0.05em;
  }
}

.NextText
{
    Text-align:center;
    margin-top: 12%;
    color: #29cc5a;
    font-size: 25px;
    letter-spacing: 0.07em;
    /* background-color: violet; */
}

@media only screen and (max-width: 899px) {
  .NextText {
    Text-align:center;
    margin-top: 8%;
    color: #29cc5a;
    font-size: 12px;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 900px) {
  .NextText {
    Text-align:center;
    margin-top: 20%;
    color: #29cc5a;
    font-size: 25px;
    letter-spacing: 0.07em;
  }
}


.NextImage
{
    position: relative;
    width: 10%;
    margin-top:15%;
    /* background-color: yellow; */
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 899px) {
  .NextImage {
    position: relative;
    width: 5%;
    margin-top:8%;
    /* background-color: yellow; */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

@media only screen and (min-width: 900px) {
  .NextImage {
    position: relative;
    width: 3%;
    margin-top:15%;
    /* background-color: yellow; */
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.NextImage img
{
    display: block;
    width: 100%;
    height: auto;
}
 
.Sales
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 要素を中央ぞろえ */
    margin: 0 auto;
    /* padding-top: 50px; */
}

.GrayBorder
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 背景色を設定 */
    background-color: #edf2f1;

    /* 高さを親ボックスのの80pxで設定 */
    height: 80px;
}


.SalesBackground
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 半径の作成 */
    border-radius: 40px;
    
    /* 背景色の設定 */
    background-color: #fff;
    
    /* 表示位置をした方の距離で指定 */
    bottom: 40px;
}


.Slidein
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* アニメーションの設定 */
    animation: SlideIn 3s infinite;
    
    /* 水平方向の中央に要素を配置 */
    text-align: center;

    /* 要素の上辺の内側の余白を指定 */
    padding-top: 80px;
    /* animation-iteration-count: 1; */
    /* animation-fill-mode:forwards; */
    /* background-color: #29cc5a; */
    
    /* 行間を設定 */
    line-height: 1.6;
    
    /* 文字間隔を設定 */
    letter-spacing: 0.08em;

}

.SlideinTitle
{
    /* 要素の上辺の内側の余白を指定 */
    padding-top: 35px;

    /* 文字サイズ設定 */
    font-size: 35px;

    /* 文字色の設定 */
    color: #282828;
}

@media only screen and (max-width: 899px) {
  .SlideinTitle {
    padding-top: 35px;
    font-size: 22px;
    color: #282828;
    /*br
    {
      display: none;
    }*/
  }
}

@media only screen and (min-width: 900px) {
  .SlideinTitle {
    padding-top: 35px;
    font-size: 35px;
    color: #282828;
  }
}

/* @keyframes SlideIn  {
    
    0% {
      transform: translateY(140px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    } */
    /* 65% {
      transform: translateY(30px);
    }
    100% {
      transform: translateY(0px);
    }
    20%,100% {
      opacity: 1;
    }

    0%, 40% {
        transform: skew(0deg, 0deg);
      }
      5% {
        transform: skew(5deg, 5deg);
      }
      10% {
        transform: skew(-4deg, -4deg);
      }
      15% {
        transform: skew(3deg, 3deg);
      }
      20% {
        transform: skew(-2deg, -2deg);
      }
      25% {
        transform: skew(1deg, 1deg);
      }
      30% {
        transform: skew(-0.6deg, -0.6deg);
      }
      35% {
        transform: skew(0.3deg, 0.3deg);
      } */

  /* } */

/* .Slidein h3
{
    padding-top: 35px;
    font-size: 35px;
    color: #282828;
} */

.SalesText
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 幅を親ボックスの58%で指定 */
    width: 58%;

    /* 後述の要素に重ねて表示 */
    margin-top: 10%;

    /* 文字サイズを設定 */
    font-size: 18px;

    /* 親ボックスに対して左から50%の位置 */
    left: 50%;

    /* X軸とY軸方向の設定 */
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 899px) {
  .SalesText {
    position: relative;
    width: 90%;
    margin-top: 85%;
    font-size: 18px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (min-width: 900px) {
  .SalesText {
    position: relative;
    width: 72%;
    margin-top: 25%;
    font-size: 18px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (min-width: 1400px) {
  .SalesText {
    position: relative;
    width: 58%;
    margin-top: 10%;
    font-size: 18px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}


.Marker
{
    /* 背景色の設定 */
    background-color:rgb(250, 236, 106)
}


.WorkImage
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 要素を横並びに設定 */
    display: flex;

    /* 要素を等間隔に並べる（両端込み） */
    justify-content: space-around;
}

.WorkListBase
{
    /* 要素を相対的な位置で配置 */
    position: relative;
}

.WorkListBase img
{
    /* 要素をボックスとして配置 */
    display: block;

    /* 幅を親ボックスの100%として表示 */
    width: 100%;

    /* 高さを自動設定 */
    height: auto;
}

.WorkListBase img:nth-of-type(2)
{
    /* 要素を絶対的な位置で配置 */
    position: absolute;

    /* 幅を親ボックスの62%として表示 */
    width: 62%;

    /* 親ボックスに対して上から14%の位置に配置 */
    top: 14%;

    /* 親ボックスに対して左から50%の位置に配置 */
    left: 50%;

    /* X軸方向の設定 */
    transform: translateX(-50%);
}

.WorkListBaseText
{
    /* 要素を絶対的な位置で配置 */
    position: absolute;

    /* 要素を中央揃え */
    margin: auto;

    /* 親ボックスに対して上から13%の位置に配置 */
    top: 13%;

    /* 親ボックスに対して左から50%の位置に配置 */
    left: 50%;

    /* X軸方向の設定 */
    transform: translateX(-50%);

    /* 文字サイズを24pxに設定 */
    font-size: 24px;

    /* 文字間隔を設定 */
    letter-spacing: 0.1em;
}

@media only screen and (max-width: 899px) {
  .WorkListBaseText {
    position: absolute;
    margin: auto;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    letter-spacing: 0.1em;
  }
}

@media only screen and (min-width: 900px) {
  .WorkListBaseText {
    position: absolute;
    margin: auto;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    letter-spacing: 0.1em;
  }
}

@media only screen and (min-width: 1400px) {
  .WorkListBaseText {
    position: absolute;
    margin: auto;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    letter-spacing: 0.1em;
  }
}


.arrow
{
    /* 幅を親ボックスの2%として設定 */
    width: 2%;

    /* 高さを親ボックスの10%として設定 */
    height: 10%;

    /* 後述の要素に重ねて表示 */
    margin-top: 9%;
}

.WorkListItem
{
    /* 要素を絶対的な位置で配置 */
    position: absolute;

    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 親ボックスに対して上から31%の位置に配置 */
    top: 31%;

    /* 親ボックスに対して左から52%の位置に配置 */
    left: 52%;

    /* X軸方向の設定 */
    transform: translateX(-50%);

    /* 水平方向の中央に要素を配置 */
    text-align: center;

    /* 要素の左右のマージンを自動調整し中央配置 */
    margin: auto;

    /* 文字サイズを22pxに設定 */
    font-size: 22px;

    /* 文字間隔を設定 */
    letter-spacing: 0.07em;
}

@media only screen and (max-width: 899px) {
  .WorkListItem {
    position: absolute;
    width: 100%;
    top: 31%;
    left: 52%;
    transform: translateX(-50%);
    text-align: center;
    margin: auto;
    font-size: 6px;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 900px) {
  .WorkListItem {
    position: absolute;
    width: 100%;
    top: 31%;
    left: 52%;
    transform: translateX(-50%);
    text-align: center;
    margin: auto;
    font-size: 15px;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 1400px) {
  .WorkListItem {
    position: absolute;
    width: 100%;
    top: 31%;
    left: 52%;
    transform: translateX(-50%);
    text-align: center;
    margin: auto;
    font-size: 22px;
    letter-spacing: 0.07em;
  }
}


.GrayBackground
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 後述の要素に重ねて表示 */
    margin-top: 5%;
}

@media only screen and (max-width: 899px) {
  .GrayBackground {
    position: relative;
    width: 100%;
    margin-top: 5%;
    height: 1080px;
    background-color: hsl(0,0%,95%);
  }
}

@media only screen and (min-width: 900px) {
  .GrayBackground {
    position: relative;
    width: 100%;
    margin-top: 5%;
  }
}

@media only screen and (min-width: 1400px) {
  .GrayBackground {
    position: relative;
    width: 100%;
    margin-top: 5%;
  }
}


.GrayBackground img
{
    /* 要素をボックスとして設定 */
    display: block;

    /* 幅を親ボックスの96%として設定 */
    width: 96%;

    /* 高さを自動設定 */
    height: auto;

    /* 要素の左右のマージンを自動調整し中央配置 */
    margin: auto;
}


.InputBackground
{
    /* 要素を絶対的な位置で配置 */
    position: absolute;

    /* 幅を親ボックスの40%として設定 */
    width: 40%;

    /* 後述の要素に重ねて表示 */
    margin-top: -186%;

    /* 親ボックスに対して左から4%の位置に配置 */
    left: 4%;
}

.InputBackground img
{
    /* 要素をボックスとして設定 */
    display: block;

    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 高さを自動調整 */
    height: auto;
}

.InputContents
{
    /* 要素を絶対的な位置で配置 */
    position: absolute;

    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 後述の要素に重ねて表示 */
    margin-top: -171%;
}

.InputFlex
{
    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 要素を横並びに設定 */
    display: flex;
}

.InputText
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 幅を親ボックスの34%として設定 */
    width: 34%;

    /* 文字間隔を設定 */
    letter-spacing: 0.07em;
}

@media only screen and (max-width: 899px) {
  .InputText {
    position: relative;
    width: 84%;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 900px) {
  .InputText {
    position: relative;
    width: 54%;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 1400px) {
  .InputText {
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
  }
}

.ObjLeft
{
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
}


.InputText .ObjLeft
{
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
}


@media only screen and (max-width: 899px) {
  .InputText .ObjLeft {
    position:absolute;
    width: 2%;
    height:15%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .InputText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .InputText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}


.ProjectionText .ObjLeft
{
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
}

@media only screen and (max-width: 899px) {
  .ProjectionText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 10%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}


.WriteText .ObjLeft
{
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
}

@media only screen and (max-width: 899px) {
  .WriteText .ObjLeft {
    position:absolute;
    width: 2%;
    height:6%;
    margin-top: 96%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .WriteText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .WriteText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}


.OutputText .ObjLeft
{
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
}

@media only screen and (max-width: 899px) {
  .OutputText .ObjLeft {
    position:absolute;
    width: 2%;
    height:6%;
    margin-top: -1%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .OutputText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .OutputText .ObjLeft {
    position:absolute;
    width: 2%;
    height:9%;
    margin-top: 2%;
    background-color:#4CCB68;
  }
}


.InputText .InpTitle
{
    font-size: 35px;
}

@media only screen and (max-width: 899px) {
  .InputText .InpTitle {
    font-size: 20px;
  }
}

@media only screen and (min-width: 900px) {
  .InputText .InpTitle {
    font-size: 28px;
  }
}

@media only screen and (min-width: 1540px) {
  .InputText .InpTitle {
    font-size: 35px;
  }
}



.ProjectionText .InpTitle
{
font-size: 35px;
}

@media only screen and (max-width: 899px) {
  .ProjectionText .InpTitle {
    font-size: 20px;
    margin-top: 7%;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionText .InpTitle {
    font-size: 28px;
  }
}

@media only screen and (min-width: 1540px) {
  .ProjectionText .InpTitle {
    font-size: 35px;
  }
}


.WriteText .InpTitle
{
font-size: 35px;
}

@media only screen and (max-width: 899px) {
  .WriteText .InpTitle {
    font-size: 20px;
    margin-top: 93%;
  }
}

@media only screen and (min-width: 900px) {
  .WriteText .InpTitle {
    font-size: 28px;
  }
}

@media only screen and (min-width: 1540px) {
  .WriteText .InpTitle {
    font-size: 35px;
  }
}


.OutputText .InpTitle
{
font-size: 35px;
}

@media only screen and (max-width: 899px) {
  .OutputText .InpTitle {
    font-size: 20px;
    margin-top: -3%;
  }
}

@media only screen and (min-width: 900px) {
  .OutputText .InpTitle {
    font-size: 28px;
  }
}

@media only screen and (min-width: 1540px) {
  .OutputText .InpTitle {
    font-size: 35px;
  }
}


.InpSub
{
    margin-top: 5%;
    font-size: 28px;
}

@media only screen and (max-width: 899px) {
  .InpSub {
    margin-top: 5%;
    font-size: 12px;
    br
    {
     display: none;
    }
  }
}

@media only screen and (min-width: 900px) {
  .InpSub {
    margin-top: 5%;
    font-size: 28px;
    br
    {
     display: none;
    } 
  }
}

@media only screen and (min-width: 1400px) {
  .InpSub {
    margin-top: 5%;
    font-size: 28px;
  }
}

.InputText p
{
    font-size: 8px;
    line-height: 2;
    margin-top: 3%;
}

@media only screen and (max-width: 899px) {
  .InputText p {
    font-size: 10px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 900px) {
  .InputText p {
    font-size: 15px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 1400px) {
  .InputText p {
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
  }
}

.QALinq
{
    background-color: #29cc5a;
    width: 95%;
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    padding-left: 3%;
    color: #fff;
}

.BlankBar
{
    width: 6%;
    /* background-color: tomato; */
}

.InputContents .SquareBackgroundRight
{
    position: relative;
    width: 60%;
    height: auto;
    /* right: -3%; */
    /* background-color: violet; */
}

@media only screen and (max-width: 899px) {
  .InputContents .SquareBackgroundRight {
    position: relative;
    width: 48%;
    height: auto;
    margin-top: 8%;
    margin-left: 22%;

  }
}

@media only screen and (min-width: 900px) {
  .InputContents .SquareBackgroundRight {
    position: relative;
    width: 40%;
    height: auto;
    margin-top: 4%;
    margin-left: 2%;
  }
}

@media only screen and (min-width: 1400px) {
  .InputContents .SquareBackgroundRight {
    position: relative;
    width: 60%;
    height: auto;
    margin-top: 0.7%;
  }
}


.WriteContents .SquareBackgroundRight
{
    position: relative;
    width: 60%;
    height: auto;
    /* right: -3%; */
    /* background-color: violet; */
}

@media only screen and (max-width: 899px) {
  .WriteContents  .SquareBackgroundRight {
    position: relative;
    width: 44%;
    height: auto;
    margin-top: 50%;
    margin-left: 22%;

  }
}

@media only screen and (min-width: 900px) {
  .WriteContents  .SquareBackgroundRight {
    position: relative;
    width: 40%;
    height: auto;
    margin-top: 4%;
    margin-left: 2%;
  }
}

@media only screen and (min-width: 1400px) {
  .WriteContents  .SquareBackgroundRight {
    position: relative;
    width: 60%;
    height: auto;
    margin-top: 0.7%;
  }
}


.SquareBackgroundRight img
{
    display: block;
    width: 100%;
    height: auto;
}

.InputImage
{
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    right: 18%;
}

@media only screen and (max-width: 899px) {
  .InputImage {
    position: absolute;
    width: 22%;
    height: auto;
    /*top: 30%;*/
    right: 9%;
    margin-top: 7%;
  }
}

@media only screen and (min-width: 900px) {
  .InputImage {
    position: absolute;
    width: 30%;
    height: auto;
    top: 8%;
    right: 13%;
  }
}

@media only screen and (min-width: 1400px) {
  .InputImage {
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    right: 18%;
  }
}

.InputImage img
{
    display: block;
    width: 100%;
    height: auto;
}

.ProjectionBackground
{
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -145%;
    right: 0%;
}

@media only screen and (max-width: 899px) {
  .ProjectionBackground {
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -135%;
    right: 0%;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionBackground {
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -135%;/*145*/
    right: 0%;
  }
}

@media only screen and (min-width: 1400px) {
  .ProjectionBackground {
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -145%;/*145*/
    right: 0%;
  }
}


.ProjectionBackground img
{
    display: block;
    width: 100%;
    height: auto;
}

.ProjectionContents        
{
    position: absolute;
    width: 100%;
    margin: 0 auto;
    margin-top: -126%;
}

.ProjectionFlex
{
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.ProjectionContents .SquareBackgroundLeft
{
    position: relative;
    width: 60%;
    height: auto;
    left: -3%;
}

@media only screen and (max-width: 899px) {
  .ProjectionContents .SquareBackgroundLeft {
    position: relative;
    width: 26%;
    height: auto;
    left: 3%;
    margin-top: 25%;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionContents .SquareBackgroundLeft {
    position: relative;
    width: 40%;
    height: auto;
    left: 3%;
    top: -4%;
    margin-top: 12%;
  }
}

@media only screen and (min-width: 1400px) {
  .ProjectionContents .SquareBackgroundLeft {
    position: relative;
    width: 60%;
    height: auto;
    left: -3%;
    margin-top: 0.5%;
  }
}



.OutputContents .SquareBackgroundLeft
{
    position: relative;
    width: 60%;
    height: auto;
    left: -3%;
}

@media only screen and (max-width: 899px) {
  .OutputContents .SquareBackgroundLeft {
    position: relative;
    width: 26%;
    height: auto;
    left: 1%;
    margin-top: 80%;
  }
}

@media only screen and (min-width: 900px) {
  .OutputContents .SquareBackgroundLeft {
    position: relative;
    width: 40%;
    height: auto;
    left: 3%;
    top: -4%;
    margin-top: 12%;
  }
}

@media only screen and (min-width: 1400px) {
  .OutputContents .SquareBackgroundLeft {
    position: relative;
    width: 60%;
    height: auto;
    left: -3%;
    margin-top: 0.5%;
  }
}


.SquareBackgroundLeft img
{
    display: block;
    width: 100%;
    height: auto;
}

.ProjectionText
{
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
    /* margin-top:3% */
}

@media only screen and (max-width: 899px) {
  .ProjectionText {
    position: relative;
    width: 64%;
    letter-spacing: 0.07em;
    margin-top:8%
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionText {
    position: relative;
    width: 54%;
    letter-spacing: 0.07em;
    margin-top:10%
  }
}

@media only screen and (min-width: 1400px) {
  .ProjectionText {
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
        margin-top:-3%
  }
}

.ProjectionText p
{
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
}

@media only screen and (max-width: 899px) {
  .ProjectionText p {
    font-size: 10px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionText p {
    font-size: 15px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 1400px) {
  .ProjectionText p {
    position: absolute;
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
    z-index: 1;
  }
}


.ProjectionImage
{
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    left: 16%;
}

@media only screen and (max-width: 899px) {
  .ProjectionImage {
    position: absolute;
    width: 22%;
    height: auto;
    /*top: -4%;*/
    left: 11%;
    margin-top: 23%;
  }
}

@media only screen and (min-width: 900px) {
  .ProjectionImage {
    position: absolute;
    width: 30%;
    height: auto;
    top: 25%;
    left: 15%;
  }
}

@media only screen and (min-width: 1400px) {
  .ProjectionImage {
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    left: 16%;
    margin-top: 0.5%;
  }
}


.ProjectionImage img
{
    display: block;
    width: 100%;
    height: auto;
}

.WriteBackground
{
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -93%;
    left: 0%;
}

@media only screen and (max-width: 899px) {
  .WriteBackground {
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -55%;
    left: 0%;
    margin-left: 2%;
  }
}

@media only screen and (min-width: 900px) {
  .WriteBackground {
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -83%;
    left: 0%;
    margin-left: 2%;
  }
}

@media only screen and (min-width: 1400px) {
  .WriteBackground {
    position: absolute;
    width: 96%;
    height: auto;
    margin-top: -93%;
    left: 0%;
    margin-left: 0%;
  }
}


.WriteBackground img
{
    display: block;
    width: 100%;
    height: auto;
}

.WriteContents
{
    position: absolute;
    width: 100%;
    margin: 0 auto;
    margin-top: -74%;
}

.WriteFlex
{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
}

.WriteText
{
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
    /* margin-top:3% */
}

@media only screen and (max-width: 899px) {
  .WriteText {
    position: relative;
    width: 64%;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 900px) {
  .WriteText {
    position: relative;
    width: 54%;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 1400px) {
  .WriteText {
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
  }
}

/* .WriteText h3
{
    font-size: 35px;
} */

.WriteText p
{
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
}

@media only screen and (max-width: 899px) {
  .WriteText p {
    font-size: 10px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 900px) {
  .WriteText p {
    font-size: 15px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 1400px) {
  .WriteText p {
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
  }
}


.WriteImage
{
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    right: 18%;
}

@media only screen and (max-width: 899px) {
  .WriteImage {
    position: absolute;
    width: 25%;
    height: auto;
    top: 45%;
    right: 9%;
  }
}

@media only screen and (min-width: 900px) {
  .WriteImage {
    position: absolute;
    width: 30%;
    height: auto;
    top: -1%;
    right: 15%;
  }
}

@media only screen and (min-width: 1400px) {
  .WriteImage {
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    right: 18%;
  }
}


.WriteImage img
{
    display: block;
    width: 100%;
    height: auto;
}


.OutputBackground
{
    position: absolute;
    width: 53%;
    height: auto;
    margin-top: -44%;
    right: 3%;
    
}

@media only screen and (max-width: 899px) {
  .OutputBackground {
    width: 53%;
    height: auto;
    margin-top: 10%;
    right: 3%;
  }
}

@media only screen and (min-width: 900px) {
  .OutputBackground {
    width: 53%;
    height: auto;
    margin-top: -44%;
    right: 3%;
  }
}

@media only screen and (min-width: 1400px) {
  .OutputBackground {
    width: 53%;
    height: auto;
    margin-top: -44%;
    right: 3%;
  }
}


.OutputBackground img
{
    display: block;
    width: 100%;
    height: auto;
}

.OutputImage
{
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    left: 16%;
}

@media only screen and (max-width: 899px) {
  .OutputImage {
    position: absolute;
    width: 23%;
    height: auto;
    top: 68%;
    left: 9%;
  }
}

@media only screen and (min-width: 900px) {
  .OutputImage {
    position: absolute;
    width: 30%;
    height: auto;
    top: 25%;
    left: 15%;
  }
}

@media only screen and (min-width: 1400px) {
  .OutputImage {
    position: absolute;
    width: 40%;
    height: auto;
    top: -4%;
    left: 16%;
  }
}


.OutputImage img
{
    display: block;
    width: 100%;
    height: auto;
}

.OutputContents
{
    position: absolute;
    width: 100%;
    margin: 0 auto;
    margin-top: -28%;
}

.OutputFlex
{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
}

.OutputText
{
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
    /* margin-top:3% */
}

@media only screen and (max-width: 899px) {
  .OutputText {
    position: relative;
    width: 64%;
    letter-spacing: 0.07em;
     padding-top: 60%;
  }
}

@media only screen and (min-width: 900px) {
  .OutputText {
    position: relative;
    width: 54%;
    letter-spacing: 0.07em;
  }
}

@media only screen and (min-width: 1400px) {
  .OutputText {
    position: relative;
    width: 34%;
    letter-spacing: 0.07em;
  }
}


/* .OutputText h3
{
    font-size: 35px;
} */

.OutputText p
{
    
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
}

@media only screen and (max-width: 899px) {
  .OutputText p {
    font-size: 10px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 900px) {
  .OutputText p {
    font-size: 15px;
    line-height: 2;
    margin-top: 3%;
  }
}

@media only screen and (min-width: 1400px) {
  .OutputText p {
    font-size: 18px;
    line-height: 2;
    margin-top: 3%;
  }
}


/* STEP */
.Step-Slide
{
    position: relative;
    height: 700vh;  
}

.MainSlide 
{
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
}

.MainScrollContent 
{
    position: absolute;
    top: 0;
    height: 100%;
    width: 700vw;
    will-change: transform;
    display: flex;
    justify-content: space-between;
}

.dummy
{
    height: 100vh;
}

.StepSlide 
{
    position: relative;
    width: 100vw;
    height: 100%;
}

.StepSlide img
{
    width: 100vw;
    height: 100vh;
  
}

.StepTitleBox 
{
    position: relative;
    display: flex;
    width: 65%;
    height: auto;
    margin-left: 5%;
    margin-top: -90vh;
}


@media only screen and (max-width: 899px) {
  .StepTitleBox  {
    position: relative;
    display: flex;
    width: 65%;
    height: auto;
    margin-left: 5%;
    margin-top: -80vh;
  }
}

@media only screen and (min-width: 900px) {
  .StepTitleBox  {
    position: relative;
    display: flex;
    width: 65%;
    height: auto;
    margin-left: 5%;
    margin-top: -90vh;
  }
}


.StepTitleImage
{
    position: relative;
    width: 36%;
    height: auto;
    padding: 1% 0 0 0;
    
    &::after{
        content:"";
        display:block;
        position:absolute;
        width: 2%;
        height:75%;
        margin-left: 105%;
        margin-top: -33%;
        background-color:#fff;
    }
}

.StepTitleImage img
{
    width: 90%;
    height: auto;
}

.StepTitleFont
{
    /* font-size: 20px; */
    margin-left: 5%;
    margin-top: 2%;
    letter-spacing: 0.03em;
}

@media only screen and (max-width: 899px) {
  .StepTitleFont {
    font-size: 7px;
    margin-left: 5%;
    letter-spacing: 0.03em;
  }
}

@media only screen and (min-width: 900px) {
  .StepTitleFont {
    font-size: 15px;
    margin-left: 5%;
    letter-spacing: 0.03em;
  }
}


.LineMargin
{
    line-height: 180%;
}

.StepVideoBox
{
    position: relative;
    width: 90%;
    height: 61%;
    margin: auto;
    text-align: center;
    border-radius: 30px;
    /* background-color: transparent; */
    margin-top: 2%;
}

@media only screen and (max-width: 899px) {
  .StepVideoBox  {
    /*position: relative;*/
    width: 90%;
    height: 61%;
    margin: auto;
    text-align: center;
    border-radius: 30px;
    /* background-color: transparent; */
    margin-top: 5%;
    margin-right: 2%;
  }
}

@media only screen and (min-width: 900px) {
  .StepVideoBox  {
    /* position: relative; */
    width: 100%;
    height: 61%;
    margin: auto;
    text-align: center;
    border-radius: 30px;
    /* background-color: transparent; */
    margin-top: 2%;
  }
}


.StepVideoBox video
{
    height: 100%;
}

@media only screen and (max-width: 899px) {
  .StepVideoBox video {
    position: relative; 
    width: 90%;
    height: auto;
    
  }
}

@media only screen and (min-width: 900px) {
  .StepVideoBox video {
    height: 100%;
  }
}


.StepFullVideoBox
{
    position: relative;
    width: 90%;
    height: auto;
    margin: auto;
    text-align: center;
    border-radius: 30px;
    background-color: #fff;
    margin-top: -34%;
}

.Page
{
    margin: auto;
    margin-top: 1%;
    width: 11%;
    height: auto;
}

@media only screen and (max-width: 899px) {
  .Page {
    margin: auto;
    margin-top: -50%;
    width: 11%;
    height: auto;
  }
}

@media only screen and (min-width: 900px) {
  .Page {
    margin: auto;
    margin-top: 1%;
    width: 11%;
    height: auto;
  }
}




.Page img
{
    width: 100%;
    height: auto;
}

.StepFullVideoBox video
{
    width: 60%;
    height: auto;
}

.PointSlide
{
    position: relative;
    width: 100vw;
    height: 100%;
    background-color: rgb(237, 242, 241);
}

@media only screen and (max-width: 899px) {
  .PointSlide {
    position: relative;
    width: 100vw;
    height: 50%;
    margin-top: 18vh;
    background-color: rgb(237, 242, 241);
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide {
    position: relative;
    width: 100vw;
    height: 100%;
    background-color: rgb(237, 242, 241);
  }
}

.PointSlide img
{
    width: 80vw;
    height: auto;
    margin-top: 3%;
    /*margin-left: 10%;
    margin-bottom: -3%;*/
}

@media only screen and (max-width: 899px) {
  .PointSlide img {
    width: 80vw;
    height: auto;
    margin-top: 12%;
    margin-left: 5%;
    /*margin-bottom: -3%;*/
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide img {
    max-width: 65vw;
    height: auto;
    margin-top: 8%;
    margin-left: 10%;
    /*margin-bottom: -3%;*/
  }
}

.PointSlideFont{
    position: relative;
    font-size: 20px;
    margin-top: -37%;
    margin-left: 8%;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

@media only screen and (max-width: 899px) {
  .PointSlideFont {
    position: relative;
    font-size: 10px;
    margin-top: -37%;
    margin-left: 8%;
    letter-spacing: 0.08em;
    line-height: 1.6;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlideFont {
    position: relative;
    font-size: 20px;
    margin-top: -37%;
    margin-left: 8%;
    letter-spacing: 0.08em;
    line-height: 1.6;
  }
}

.PointImage
{
    position: absolute;
    width: 5%;
    height: auto;
    top: 45%;
    right: 5%;
}

@media only screen and (max-width: 899px) {
  .PointImage {
    position: absolute;
    width: 5%;
    height: auto;
    top: 45%;
    right: 5%;
  }
}

@media only screen and (min-width: 900px) {
  .PointImage {
    position: absolute;
    width: 5%;
    height: auto;
    top: 45%;
    right: 3%;
  }
}

.PointImage img
{
    width: 100%;
    height: auto;
}

.PointSlide1
{
    position: relative;
    width: 100vw;
    height: auto; 
    
}
     
.Page2
{
    margin: auto;
    margin-top: 13.5%;
    width: 11%;
    height: auto;
}

@media only screen and (max-width: 899px) {
  .Page2 {
    margin: auto;
    margin-top: 13.5%;
    width: 11%;
    height: auto;
  }
}

@media only screen and (min-width: 900px) {
  .Page2 {
    margin: auto;
    margin-top: 13.5%;
    width: 11%;
    height: auto;
  }
}

.Page2 img
{
    width: 100%;
    height: auto;
}


.PointGrayBackground
{
    width: 90vw;
    height: 100vh;
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    background-color: rgb(237, 242, 241);
}

@media only screen and (max-width: 899px) {
  .PointGrayBackground {
    width: 88vw;
    height: 50vh;
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    background-color: rgb(237, 242, 241);
    margin-top: 34%;

  }
}

@media only screen and (min-width: 900px) {
  .PointGrayBackground {
    width: 90vw;
    height: 95vh;
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    background-color: rgb(237, 242, 241);
    margin-top: 2.5%;
  }
}


.PointTitleBox
{
    position: relative;
    display: flex;
    width: 65%;
    height: auto;
    margin-left: 5%;

}

@media only screen and (max-width: 899px) {
  .PointTitleBox {
    position: relative;
    display: flex;
    width: 65%;
    height: auto;
    margin-left: 5%;
    padding-top: 10%;
  }
}

@media only screen and (min-width: 900px) {
  .PointTitleBox {
    position: relative;
    display: flex;
    width: 65%;
    height: auto;
    margin-left: 5%;
  }
}

.PointTitleImage
{
    position: relative;
    width: 41%;
    height: auto;
    margin-top: 3%;
}

@media only screen and (max-width: 899px) {
  .PointTitleImage {
    position: absolute;
    width: 41%;
    height: auto;
    padding-top: 10px;
  }
}

@media only screen and (min-width: 900px) {
  .PointTitleImage {
    position: relative;
    width: 41%;
    height: auto;

  }
}

.PointTitleImage img
{
    width: 100%;
    height: auto;
}

.GreenBar
{
    position:absolute;
    width: 1%;
    height:40%;
    margin-top: 12%;
    margin-left: 43%;
    background-color:#4CCB68;
}

@media only screen and (max-width: 899px) {
  .GreenBar {
    position:absolute;
    width: 1%;
    height:55%;
    margin-top: 10%;
    margin-left: 43%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .GreenBar {
    position:absolute;
    width: 1%;
    height:55%;
    margin-top: 5%;
    margin-left: 43%;
    background-color:#4CCB68;
  }
}


.PointTitleFont
{
    position: absolute;
    width: 80%;
    height: auto;
    /*font-size: 0.1rem;*/
    margin-top: 1.5%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
    /*background-color: #fff;*/
}

@media only screen and (max-width: 899px) {
  .PointTitleFont {
    position: absolute;
    width: 80%;
    height: auto;
    font-size: 0.3rem;
    margin-top: 8%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
  }
}

@media only screen and (min-width: 900px) {
  .PointTitleFont {
    position: absolute;
    width: 80%;
    height: auto;
    font-size: 0.8rem;
    margin-top: 5%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
  }
}

@media only screen and (min-width: 1400px) {
  .PointTitleFont {
    position: absolute;
    width: 80%;
    height: auto;
    font-size: 1.5rem;
    margin-top: 5%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
  }
}

.PointSlide1Image
{
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: -3%;
    margin-left: 35%;
}

@media only screen and (max-width: 899px) {
  .PointSlide1Image {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 30%;
    margin-left: 26%;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide1Image {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: -3%;
    margin-left: 30%;
  }
}


.PointSlide1Image img
{
    width: 50%;
    height: auto;
}


.PointSlide1Image2
{
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 10%;
    margin-left: 15%;
}

@media only screen and (max-width: 899px) {
  .PointSlide1Image2 {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 40%;
    margin-left: 4%;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide1Image2 {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 8%;
    margin-left: 10%;
  }
}


.PointSlide1Image2 img
{
    width: 30%;
    height: auto;
}


.PointSlide2
{
    position: relative;
    width: 100vw;
    height: 100%; 
    background-color: rgb(237, 242, 241);
    
}

.PointWhiteBackground
{
    width: 90%;
    height: 100%;
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    background-color: rgb(255, 255, 255);
}

@media only screen and (max-width: 899px) {
  .PointWhiteBackground {
    width: 88vw;/*90%;*/
    height: 50vh;/*75%;*/
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    background-color: rgb(255, 255, 255);
    margin-top: 34%;
  }
}

@media only screen and (min-width: 900px) {
  .PointWhiteBackground {
    width: 90%;
    height: 95vh;
    border-top-right-radius:40px;
    border-bottom-right-radius:40px;
    background-color: rgb(255, 255, 255);
    margin-top: 2.5%;
}
}


.PointTitleFont2{
    position: relative;

    width: 23%;
    height: 30%;
    font-size: 20px;
    margin-top: 1.5%;
    margin-left: 3%;
    padding-left: 1%;
    line-height: 315%;
    /*background-color: rgb(237, 242, 241);*/
}

@media only screen and (max-width: 899px) {
 .PointTitleFont2 {
    position: absolute;
    width: 80%;
    height: auto;
    font-size: 0.3rem;
    margin-top: 8%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
    /*background-color: rgb(255, 255, 255);*/
  }
}

@media only screen and (min-width: 900px) {
  .PointTitleFont2 {
    position: absolute;
    width: 80%;
    height: auto;
    font-size: 0.8rem;
    margin-top: 5%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
    /*background-color: rgb(255, 255, 255);*/
  }
}

@media only screen and (min-width: 1400px) {
  .PointTitleFont2 {
    position: absolute;
    width: 80%;
    height: auto;
    font-size: 1.5rem;
    margin-top: 5%;
    margin-left: 44%;
    padding-left: 1%;
    line-height: 250%;
    /*background-color: rgb(255, 255, 255);*/
  }
}

.PointSlide2Image
{
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: -5%;
    margin-left: 35%;
}

@media only screen and (max-width: 899px) {
  .PointSlide2Image {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 30%;
    margin-left: 32%;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide2Image {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: -5%;
    margin-left: 35%;
  }
}


.PointSlide2Image img
{
    width: 50%;
    height: auto;
}

.PointSlide2Image2
{
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 12%;
    margin-left: 23%;
}

@media only screen and (max-width: 899px) {
  .PointSlide2Image2 {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 48%;
    margin-left: 18%;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide2Image2 {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 12%;
    margin-left: 23%;
  }
}


.PointSlide2Image2 img
{
    width: 29%;
    height: auto;
    /* top: 30%;
    left: 20%; */
}

.PointSlide2Image3
{
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 5%;
    margin-left: 3%;
}

@media only screen and (max-width: 899px) {
  .PointSlide2Image3 {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 42%;
    margin-left: -3%;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide2Image3 {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 5%;
    margin-left: 3%;
  }
}


.PointSlide2Image3 img
{
    width: 29%;
    height: auto;
}



.GreenBar2
{
    position:absolute;
    width: 1%;
    height:40%;
    margin-top: 12%;
    margin-left: 43%;
    background-color:#4CCB68;
}

@media only screen and (max-width: 899px) {
  .GreenBar2 {
    position:absolute;
    width: 1%;
    height:55%;
    margin-top: 10%;
    margin-left: 43%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .GreenBar2 {
    position:absolute;
    width: 1%;
    height:55%;
    margin-top: 5%;
    margin-left: 43%;
    background-color:#4CCB68;
  }
}

.PointSlide3
{
    position: relative;
    width: 100vw;
    height: 100%; 
    background-color: rgb(237, 242, 241);
}

@media only screen and (max-width: 899px) {
  .PointSlide3 {
    position: relative;
    width: 100vw;
    height: 100%; 
    /*margin-top: 3.5%;*/
    padding-top: 4.5%;
    background-color: rgb(237, 242, 241);
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide3 {
    position: relative;
    width: 100vw;
    height: 100%; 
    background-color: rgb(237, 242, 241);
    margin-top: 0.5%;
  }
}


.PointSlide3Image
{
    position: relative;
    width: 60%;
    height: auto;
    margin-left: 15%;
    margin-top: 4%;
}

@media only screen and (max-width: 899px) {
  .PointSlide3Image {
    position: relative;
    width: 85%;
    height: auto;
    margin-left: -5%;
    margin-top: 35%;
  }
}

@media only screen and (min-width: 900px) {
  .PointSlide3Image {
    position: relative;
    width: 60%;
    height: auto;
    margin-left: 15%;
    margin-top: 4%;
  }
}


.PointSlide3Image img
{
    display: block;
    width: 100%;
    height: auto;
    
}

.GreenBar3
{
    position:absolute;
    width: 1%;
    height:40%;
    margin-top: 12%;
    margin-left: 43%;
    background-color:#4CCB68;
}

@media only screen and (max-width: 899px) {
  .GreenBar3 {
    position:absolute;
    width: 1%;
    height:55%;
    margin-top: 10%;
    margin-left: 43%;
    background-color:#4CCB68;
  }
}

@media only screen and (min-width: 900px) {
  .GreenBar3 {
    position:absolute;
    width: 1%;
    height:55%;
    margin-top: 5%;
    margin-left: 43%;
    background-color:#4CCB68;
  }
}

.Page3
{
    /* margin: auto;
    margin-top: 11%;
    width: 11%;
    height: auto; */

    position: absolute;
    margin: auto;
    margin-top: -3%;
    margin-left: 45%;
    width: 11%;
    height: auto;
    z-index: 9000;
}

.Page3 img
{
    width: 100%;
    height: auto;
}

.Page4
{
    position: absolute;
    margin: auto;
    margin-top: -7%;
    margin-left: 45%;
    width: 11%;
    height: auto;
    z-index: 9000;
}

.Page4 img
{
    width: 100%;
    height: auto;
}

.PointImage2
{
    position: absolute;
    width: 15%;
    height: auto;
    top: 45%;
    right: 2%;
}

.PointImage2 img
{
    width: 100%;
    height: auto;
}


/* 問い合わせ------------------------------------ */
.Contact
{
    /* 要素を相対的な位置で配置 */
    position: relative;
}


@media only screen and (max-width: 444px) {
  .Contact {
    position: relative;
  }
}

@media only screen and (min-width: 445px) and (max-width: 899px) {
  .Contact {
    position: relative;
    padding-top: 100%;   
  }
}

@media only screen and (min-width: 900px) {
  .Contact {
    position: relative;
  }
}


.ContactBackground
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 幅を親ボックスの100%で設定 */
    width: 100%;

    /* 高さを自動設定 */
    height: auto;
}

.ContactBackground img
{
    /* 要素をボックスとして指定 */
    display: block;

    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 高さを自動設定 */
    height: auto;

    /* 要素の左右のマージンを自動調整し中央配置 */
    margin: auto;
}

.ContactContents
{
    /* 要素を相対的な位置で配置 */
    position: relative;

    /* 後述の要素に重ねて表示 */
    margin-top: -80%;

    /* 水平方向の中央に要素を配置 */
    text-align: center;
}
/*
.TopContents .TopText

@media only screen and (max-width: 899px) {
  .TopContents .TopText {
    position: relative;
    margin-top: 10%;
    text-align: center;
  }
}

@media only screen and (min-width: 900px) {
  .TopContents .TopText {
    position: relative;
    margin-top: -80%;
    text-align: center;
  }
}

@media only screen and (min-width: 1400px) {
  .TopContents .TopText {
    position: relative;
    margin-top: -8%;
    text-align: center;
  }
}*/

.ContactText
{
    /* 文字の大きさを固定値で指定 */
    font-size: 35px;

    /* テキストの文字間の調整 */
    /* 親要素にfont-sizeが指定されていない為デフォルト値16px */
    letter-spacing: 0.05em;

    /* 行間の調整 */
    line-height: 1.6;
}

.ContactText h3
{
    /* 文字の大きさを固定値で指定 */
    font-size: 35px;
}

@media only screen and (max-width: 899px) {
  .ContactText h3 {
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin-top: 10%;
  }
}

@media only screen and (min-width: 900px) {
  .ContactText h3 {
    font-size: 35px;
    letter-spacing: 0.05em;
    line-height: 1.6;
  }
}

@media only screen and (min-width: 900px) {
  .ContactText h3 {
    font-size: 35px;
    letter-spacing: 0.05em;
    line-height: 1.6;
  }
}

.ContancImage
{
    /* 要素の相対的な位置で配置 */
    position: relative;

    /* 幅を親ボックスの38%として設定 */
    width: 38%;

    /* 高さを自動設定 */
    height: auto;

    /* 要素の左右を自動調整し、中央配置 */
    margin: auto;

    /* 後述の要素に重ねて表示 */
    margin-top: 10%;
}

.ContancImage img
{
    /* 要素をボックスとして指定 */
    display: block;

    /* 要素の相対的な位置で配置 */
    position: relative;

    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 高さを自動設定 */
    height: auto;
}

.SKS
{
    /* 要素の相対的な位置で配置 */
    position: relative;

    /* 要素の横並び指定 */
    display: flex;

    /* フレックスコンテナないのフレックスアイテムを中央に揃える */
    justify-content:center;

    /* 後述の要素に重ねて表示 */
    margin-top: 8%;
}

.SKSLogo
{
    /* 要素をボックスとして指定 */
    position: relative;

    /* 幅を親ボックスの40%として設定 */
    width: 40%;
}

.SKSLogo img
{
    /* 幅を親ボックスの100%として設定 */
    width: 100%;

    /* 高さを自動設定 */
    height: auto;
}

.NextCompany
{
    /* 要素の相対的な位置で配置 */
    position: relative;

    /* 幅を親の17%として設定 */
    width: 17%;

    /* 後述の要素に重ねて表示 */
    margin-top: 1%;
}

.NextCompany img
{
    /* 幅を親の100%として設定 */
    width: 100%;

    /* 高さを自動設定 */
    height: auto;
}

.TrademarkText
{
    /* 後述の要素に重ねて表示 */
    margin-top: 10%;
}

@media only screen and (max-width: 899px) {
  .TrademarkText {
    margin-top: 6%;
    font-size: 6px;
    letter-spacing: 0.1em;
    line-height: 1.6;    
  }
}

@media only screen and (min-width: 900px) {
  .TrademarkText {
    margin-top: 10%;
  }
}

@media only screen and (min-width: 1400px) {
  .TrademarkText {
    font-size: 18px;
    margin-top: 10%;
  }
}



/* ------------------------------------------ */