@charset "UTF-8";

.page-top-img{
  background-image: url(../img/face_phy.png); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; 
  margin-top:75px;
  /*padding: 0 20px;*/
  /*height: calc(1000/375*100vw); 
  z-index:;*/
}

.page-header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(190/375*100vw);
  padding: 0 20px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

/*.main-visual_inner {
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
}*/
.catch{
  margin:auto;
  padding-top:4vh;
  font-size: 2.8em;
  line-height: 1.5;
  color:#003333;
  font-family: "sans-serif";/*文字種見直し*/
  font-weight:bold;
  text-align:center ;  
  background-color:white;
  height:25vh;
  width:100vw;
}
.top-message{
  margin:auto;
  padding-top:0vh;
  font-size: 1.8em;
  line-height: 2.0;
  color:#003333;
  font-family: "sans-serif";/*文字種見直し*/
  font-weight:bold;
  text-align:center ;  
  background-color:white;
  height:30vh;
  width:100vw;
}

@media screen and (max-width: 840px), print {
 .top-message{
  margin:auto;
  padding-top:10vh;
  font-size:3.0vw;
  line-height: 1.6;
  color:#003333;
  font-weight:bold;
  text-align:center ;  
  background-color:white;
  height:25vh;
  width:100vw;
}
.catch{
  margin:auto;
  padding-top:3vh;
  font-size: 4.0vw;
  line-height: 1.4;
  color:#003333;
  font-family: "sans-serif";/*文字種見直し*/
  font-weight:bold;
  text-align:center ;  
  background-color:white;
  height:3vh;
  width:100vw;
}
}
/*
.main-visual_catch {
  margin:auto;
  margin-bottom: ;
  font-size: 3vw;
  line-height: 0.6;
  color:#191970;
  font-weight:bold;
  text-align:center ;  
  background-color:white;
  height:30vh;
  width:100vw;
}*/
#animatedText {
  opacity: 0;
  /*color: #FF5733; /* 色A */
  animation: fadeIn 10s forwards;
  }

 @keyframes fadeIn {
    0% {
    opacity:0.1;
    color: #191970; 
    }
/*
    25% {
    opacity: 0.4;
    color: #191970; 
     }

    50% {
    opacity: 0.6;
    color:#191970; 
     }

    75% {
    opacity: 0.8;
    color: #191970; 
     }
*/
    100% {
    opacity: 1.0;
    color: #191970; /* 色B */
     }
   }

@media screen and (max-width: 840px), print {
.page-top-img{  
  height: calc(300/375*100vw); /* 適切な高さを設定 */ 
  margin-top:60px;
 }

.page-header-top {
  height: calc(250/375*100vw);
  
  width:100%;
  padding: 0 20px;
 }
/*
.main-visual_inner {
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
}

.main-visual_catch {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: normal;
  line-height:0.8 ;
  color:#555;
  font-weight:bold;
  text-align:center;
 } */

}