nav{
  display: flex;
  justify-content: center;
}

.body_01 {
    background-color: rgb(194,196,76);
    font-size: large;
    overflow-y: scroll;
}

article{
  display: flex;
  justify-content: center;
  width: 100%;
  display: grid;
  align-content: center;
  background-color: rgb(255,255,255);
}

.inside_article_01{
  display: flex;
  justify-content: center;
  width: 100%;
  display: grid;
  align-content: center;
  background-color: rgb(255,255,255);
}

.message_01{
    display:flex;
    justify-content: center;
    flex-direction:column;
    margin-top: 2vh;
}

.meg_01{
  display: flex;
  justify-content: center;
  width: 100%;
  display: grid;
  align-content: center;
}

.two_div_layout{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.man_lady{
    display:flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 5vh;
}

.transform_01{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right: 2vh;
    margin-top: 5vh;
    margin-left: 2vh; 
}

.container {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background-color: rgb(105,163,216);
}

.text_01 {
    font-family: 'Amatic SC', cursive;
    font-size: 20vh;
    margin: 1px;
    padding: 20px;
}

.text_02 {
    font-size: 1.5vh;
    margin: 1px;
    padding: 20px;
}

.textarea_01 {
    background-color: aliceblue;
    resize: auto;
    max-width: 60vh;
    max-height: 90vh;
    min-width: 20vh;
    min-height: 10vh;
    width: 32.4vh;
    height: 24vh;
    border: 4px solid rgb(125, 166, 188);  /* 枠線 */
    border-radius: 0.67em;   /* 角丸 */
    font-size: 1em;          /* 文字サイズ */
    opacity: 0.5;
  }

.transform_02 {
    margin-right: 1vh;
}


.button_01 {
    display:flex;
    justify-content: center;
    border: 2px solid rgb(35,65,91);
    border-radius: 0;
    background: rgb(246,250,237);
  }

  .button_01:hover {
    color: rgb(246,250,237);
    background: rgb(35,65,91);
  }

  footer{
      display: flex;
      justify-content: center;
      position: absolute;/*←絶対位置*/
      bottom: 0; /*下に固定*/
      left: 0;
      width: 100%;
      background: rgb(223,225,226);
      text-align: center;
  }

  footer p {
      color:black;
      font-size: medium;
  }

  .radio_01{
    background:black;
    border-radius: 300%;
    margin: 5vh;
  }

  .sns_button{
    border: 2px solid rgb(35,65,91);
    text-decoration: none;
    color: rgb(35,65,91);
    margin-left: 3vh;
  }

  .sns_button:hover{
    border: 2px solid #7f9f40;
    text-decoration: none;
    color: #7f9f40; 
    margin-left: 3vh;
  }

  .sns_layout{
    display: flex;
    justify-content: center;
    margin-top: 10vh;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  
  .radio-inline__input {
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
  }
  
  .radio-inline__label {
      display: inline-block;
      padding: 0.5rem 1rem;
      margin-right: 18px;
      border-radius: 3px;
      transition: all .2s;
  }
  
  .radio-inline__input:checked + .radio-inline__label {
      background:rgb(35,65,91);
      color:rgb(244, 248, 250);
  }
  
  .radio-inline__input:focus + .radio-inline__label {
      outline-color: black;
      outline-offset: -2px;
      outline-style:hidden;
      outline-width: 5px;
  }

  .title {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 2vh;
    background-color: rgb(255,255,255);
  }

  img{
    display: flex;
    justify-content: center;
    width:40%;
    height:auto;
  }

  .translated_japanese_field{
    margin-left: 2vw;
    width: 50vw;
  }


  .transrated_japanese{
    width: 60%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1em;
    margin-left: 18vw;
    margin-right: 2vw;  
  }

  .explain_text {
    display: flex;
    width: fit-content;
    justify-content: center;
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    font-size: large;
}
  .explain_text p {
    margin: 0; 
    padding: 0;
  }

.explain_text_02 {
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
.explain_text_waku{
  display: flex;
  justify-content: center;
}

.translated_japanese_field_text{
  background: rgb(246,250,237);
}

  @media (max-width: 1000px){
    .transform_01{
      display:flex;
      flex-direction: column;
     /* justify-content: center;*/
     /* align-items: center;*/
      margin-right: 1vw;
      /*margin-top: 0vh;*/
      margin-left: 1vw; 
  }

  .textarea_01 {
    background-color: aliceblue;
    width: 70%;
    height: 200px;
    border: 4px solid rgb(125, 166, 188);
    border-radius: 0.67em;
    font-size: 2em;
    opacity: 1;
    margin-top: 0vh;
    /*margin-bottom: 0vh;*/
  }

  textarea:focus {
    background-color: aliceblue;
    width: 80%;
    height: 400px;
    border: 4px solid rgb(125, 166, 188);
    border-radius: 0.67em;
    font-size: 3em;
    opacity: 1;
    margin-top: 4vh;
    margin-bottom: 4vh;
  }

  img{
    display: flex;
    justify-content: center;
    width:80%;
    height:auto;
  }

  .man_lady{
    display:flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 1vh;
}



  .radio-inline__label {
    display: flex;
    display: inline-block;
    padding: 1rem 2rem;
    margin-right: 2vh;
    border-radius: 3px;
    transition: all .2s;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 2vh;
    font-size: 2vh;
  }

  .button_01 {
      display: flex;
      justify-content: center;
      border: 2px solid rgb(35,65,91);
      border-radius: 0;
      background: rgb(246,250,237);
      font-size: 2vh;
      margin-top: 2vh;
      margin-bottom: 2vh;
  }

  .message_01{
    display:flex;
    justify-content: center;
    flex-direction:column;
    text-align: center;
    font-size: 1.5vh;
    margin-top: 0.5vh;
  }

  .sns_button{
    border: 2px solid rgb(35,65,91);
    text-decoration: none;
    color: rgb(35,65,91);
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    font-size: 2rem;
    display: flex;
    justify-content: center;
  }

  .sns_button:hover{
    border: 2px solid #7f9f40;
    text-decoration: none;
    color: #7f9f40; 
    margin-left: 1.5vw;
    margin-right: 1.5vw
  }

  .sns_layout{
    display: flex;
    justify-content: center;
    margin-top: 10vh;
  }
  

  .transform_03{
    width: 100vw;
  }

  .transform_02 {
    width: 100vw;
    display: flex;
    justify-content: center;
  }
  
  .transrated_japanese{
    width: 60%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.5em;
    margin-left: 18vw;
    margin-right: 2vw;  
  }

  .sns_layout{
    display: flex;
    justify-content: center;
    margin-top: 5vh;
  }

  .explain_text {
    display: flex;
    width: fit-content;
    justify-content: center;
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgb(0 0 0 / 22%);
    font-size: 1.5em;
  }

  .explain_text_02{
    display: flex;
    justify-content: center;
    margin-top: 1vh;
    margin-bottom: 1vh;
    font-size: 2em;
  }


}

@keyframes fadeOut {
  from {
      opacity: 1;
  }
  
  to {
      display: none;
      opacity: 0;
      z-index: -1;
  }
}

#loader {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#loader.loaded {
  animation: fadeOut 5s forwards;
}

.spinner {
margin: 0 auto;
width: 40px;
height: 40px;
position: relative;
top: 50%;
}

.cube1, .cube2 {
background-color: #0a0606;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;

-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
25% { 
  transform: translateX(42px) rotate(-90deg) scale(0.5);
  -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% { 
  transform: translateX(42px) translateY(42px) rotate(-179deg);
  -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% { 
  transform: translateX(42px) translateY(42px) rotate(-180deg);
  -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% { 
  transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% { 
  transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
}
}