p{padding-top: 10px;
    text-indent: 1em;
    margin-left: 30px; 
    font-size: 20px;
  }

h1{ padding-top: 130px;
    text-align: center;
    font-family: Mochiy Pop One,serif;
    font-weight: normal;
    font-size: 50px;
    }

.takaki{
  position: relative;
}

h1.name,.profile,#experience,.message,.message-y{
  width: 100%;
}

.photo {
  flex: 0 0 auto; /* 伸長せず、自動サイズ調整 */
  position: absolute;
  top:25px;
  left: 1000px;
}

.photo img {
  width: 250px; /* 写真の最大幅を設定 */
  height: auto; /* 高さを自動調整 */
  border-radius: 50%; /* 写真を丸く表示 */
}

.carrer{
  width: 680px; 
}
.message{
  margin-top: 30px;
  margin-bottom: 20px;
}

#experience{
  max-width: 100%;
  width: 700px;
}

.name,.yokota{
    margin-left: 60px;
    margin-bottom: 10px;
    margin-right:30px;
    ruby-position: under;
}

.yokota{
    margin-top:  50px;
    display: flex;
    justify-content: baseline;
    gap: 100px;
}

.license-y {
  display: flex; /* Flexコンテナにする */
  flex-direction: row; /* 要素を横方向に配置 */
  justify-content: flex-start; /* 必要に応じて左右の配置を調整 */
  align-items: center; /* 必要に応じて上下の配置を調整 */;
  text-indent: 2em;
}

.carrer-y
{width: 900px;}

.message-y{
  margin-top: 10px;
  margin-bottom: 20px;
}

#counseling{
  padding-top: 10px;
    text-indent: 1em;
    margin-left: 30px; 
    margin-right: 30px;
    font-size: 30px;
}

.carrer,.carrer-y{
  max-width: 100%;
}

.carrer,.carrer-y,#experience,#affiliation{
    margin-left: 4em;
    padding-top: 10px;
    text-indent: 1em;
    font-size: 25px;
}

.carrer,.carrer-y{
  border: 1.5px solid #000000; /* 枠線のスタイル */
  border-radius: 5px; /* 角丸 */
  padding-left: -10px;
}

#message2,#message-y2{
  border: 2px solid #ccc; /* 枠線のスタイル */
  padding: 20px; /* 内側の余白 */
  margin: 20px auto; /* 中央寄せ */
  border-radius: 5px; /* 角丸 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 影 */
  background-color:rgb(249, 248, 247);
  text-indent: 1em;
  padding-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
  font-size: 25px;}

.name,h3,h4,h5{
    font-size: 40px;
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 900;
    font-style: normal; 
  }

h3,h5{
  text-indent: 2rem;
}

  h3{
    background-color:rgb(248, 204, 213) ;
}

h5{ background-color:rgb(244, 180, 148) ;
}

h3,h5{
  text-indent: 1em;
}

h6{font-size: 40px;
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 900;
    font-style: normal; 
    text-align: center;
    background-color:rgb(242, 242, 155) ;
  }

@media (max-width: 1300px) {
  .photo {
    right:60px;
    left:auto;
  }
}

@media (max-width: 1185px) {
  .photo{
    scale: 60%;
    top: -50px;
    left: 440px;
  }

  .license-y {
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    text-indent: 2em;
  }

  .carrer-y{
    width: 500px;
  }
}

 @media (max-width: 1100px) {
  .carrer{
    width: 600px;
  } 
}

  @media (max-width: 768px) {

    p{
      font-size: 16px;
    }
  
    h1{
      padding-top:80px;
      padding-bottom: 20px;
      font-size: 30px;
    }

    .carrer,.carrer-y{
      width: 435px;
    }

    #experience{
      width: 450px;
    }
  
    .photo {
      scale: 35%;
      left:210px;
      top: -95px;
    }
  
    .carrer,
    .carrer-y,
    #affiliation,
    #experience,
    .message,
    #message2,
    #message-y2,
    .message-y,
    #counseling{
      font-size: 16px;
    }
    
    .name,h2,h3,h4,h5,h6{
        font-size: 20px;
    } 
  }

    @media (max-width: 530px) {
      .carrer,.carrer-y{
        width: 330px;
      }

      .carrer,
      .carrer-y,
      #affiliation,
      #experience,
      .message,
      #message2,
      #message-y2,
      .message-y,
      #counseling{
        font-size: 14px;
      }

      #experience{
        width: 400px;
      }
    }

    @media (max-width: 460px) {

      .carrer,
      .carrer-y,
      #affiliation,
      #experience{
       font-size: 12px;
      }

      #experience{
        width: 340px;
      }

      .carrer,.carrer-y{
        width: 300px;
      }

      .photo{
        left: 160px;
      }
    
    }

    @media (max-width: 395px) {
      .photo{
        left: 160px;
        right: auto;

      }
      .carrer,
      .carrer-y,
      #affiliation,
      #experience{
       font-size: 11px;
      }

      #experience{
        width: 305px;
      }

    }