@charset "UTF-8";
html[lang="ja"]

/***************************************/
/***************************************/
/***************************************/
/***************************************/


.pic1{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto 0 auto;
  position: relative;
}

.pic1 img{
  width: 100%;
  max-width: 1920px;
  height: 90vh;
  max-height: 900px ;
  /* min-height: 550px; */
  object-fit: cover;
  opacity: 0.5;
}


.box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  flex-flow: column;
}

.box1{
width: 100%;
height: 100px;
justify-content: center;
display: flex;
position: relative;
}

@media screen and (max-width: 414px) {
.box1{
  height: 50px;
}
}



svg{
  position: absolute;
  width: 95%;    
  height: 100px;
}

@media screen and (max-width: 414px) {
svg{
  height: 70px;
}
}

text.anime1Trigger {
color: #071F3200;
}

text.size1 {
  font-size: 78px;
  font-weight: 900;
  }

text.size2 {
  font-size: 40px;
  font-weight: 500;
  }

text.anime1 {
  text-anchor: middle;
  /* stroke: #3593D8; アウトライン色 */
  stroke: #071F32ee;
  stroke-width: 2px; /*アウトライン幅*/
  fill: #071F3200; /*中の色*/
  stroke-dasharray: 800; /*線の長さ*/
  stroke-dashoffset: 800; /*開始位置*/
  animation: textAnime0 3s  forwards;
  animation-delay: 1s; /*適用アニメ*/
}

path.anime0 {
  color: #071F3200;
  text-anchor: middle;
  /* stroke: #3593D8; アウトライン色 */
  stroke: #071F32ee;
  stroke-width: 2px; /*アウトライン幅*/
  fill: #071F3200; /*中の色*/
  stroke-dasharray: 800; /*線の長さ*/
  stroke-dashoffset: 800; /*開始位置*/
}

path.anime1 {
  animation: textAnime1 5s  forwards; /*適用アニメ*/
}

path.anime2 {
  animation: textAnime2 5s  forwards; /*適用アニメ*/
}

path.anime3 {
  animation: textAnime3 5s  forwards; /*適用アニメ*/
}

path.anime4 {
  animation: textAnime4 5s  forwards; /*適用アニメ*/
}

path.anime5 {
  animation: textAnime5 5s  forwards; /*適用アニメ*/
}

path.anime6 {
  animation: textAnime6 5s  forwards; /*適用アニメ*/
}

path.anime7 {
  animation: textAnime7 5s  forwards; /*適用アニメ*/
}

path.anime8 {
  animation: textAnime8 5s  forwards; /*適用アニメ*/
}

path.anime9 {
  animation: textAnime9 5s  forwards; /*適用アニメ*/
}

path.anime10 {
  animation: textAnime10 5s  forwards; /*適用アニメ*/
}

path.anime11 {
  animation: textAnime11 5s  forwards; /*適用アニメ*/
}

path.anime12 {
  animation: textAnime12 5s  forwards; /*適用アニメ*/
}


@keyframes textAnime0 {
  0% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  35% {
    stroke-dashoffset: 800;
  }
  45% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime1 {
  0% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  30% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime2 {
  5% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  35% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime3 {
  10% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime4 {
  15% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  45% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime5 {
  20% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  50% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime6 {
  25% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  55% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime7 {
  30% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  60% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime8 {
  35% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  65% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime9 {
  40% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  70% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime10 {
  45% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  75% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime11 {
  50% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  80% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}

@keyframes textAnime12 {
  55% {
    stroke-dashoffset: 800;
    fill:transparent;
  }
  85% {
    stroke-dashoffset: 0;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#071F32ee;
  }
}


/***************************************/
/***************************************/

table.machine{
    border-collapse:collapse;
    margin:0 auto;
    width: 90%;
    max-width: 900px;
  }

table.machine tr {
    width: 90%;
    max-width: 900px;
  }

table.machine tr th:last-child{
    width: 60px;
  }

  table.machine tr th{
    color:#124E80;
  }
  table.machine tr td{
    text-align: center;
    border-bottom:1px dashed #999;
  }
  table.machine tr:nth-child(2),  table.machine tr:last-child td{
    border-bottom:2px solid #124E80;
  }
  table.machine  td,  table.machine th{
    padding:10px;
  }


/***************************************/
/***************************************/


.mac-back-1 {
    width: 100%;
    height:auto;
    padding-bottom: 20px;
    background-color: #ffffff;
}

.mac-backbox-1 {
    width: 95%;
    max-width: 900px;
    margin: 13px auto 0 auto;
    padding: 0px 0px 10px 0px;
    border: 2px solid;
    border-color: #071F32;
    /* border-radius: 20px; */
}


.mac-textbox-1 {
    width: 100%;
    max-width: 700px;
    padding-top: 20px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
}