@charset "UTF-8";
/* CSS Document */

/*==================
TOP
==================*/

.PC{}


.top_Wrap{
    text-align: center
}
@media screen and (max-width:980px){
    .top_Wrap{
        max-width: 980px;
        padding: 0 10px;
        box-sizing: border-box;
    }
}



.top_box_article{
    max-width: 750px;
    margin: 0 auto 50px auto;
    padding: 25px 0 25px;
}
@media screen and (max-width:750px){
    .top_box_article{
        max-width: 750px;
        margin: 0 auto 10px auto;
        padding: 25px 20px 25px;
        box-sizing: border-box;
    }
}


h1.top{
    max-width: 1020px;
    margin: 0 auto;
    height: 340px;
    position: relative;
}
h1.top img.kv{
    width: 100%;
    position: absolute;
    top: -15px;
    left: 0px;
    height: auto;
}
h1.top img.nippon-foundation-logo{
    width: 100px;
    position: absolute;
    top: 20px;
    right: 20px;
    height: auto;   
}
@media screen and (max-width:1020px){
    h1.top{
        max-width: 1020px;
        margin: 0 auto;
        height: auto;
        position: relative;
    }
    h1.top img.kv{
        width: 100%;
        position: static;
        top: 0;
        left: 0px;
        height: auto;
    }
    h1.top img.nippon-foundation-logo{
        width: 80px;
        position: absolute;
        top: 20px;
        right: 20px;
        height: auto;   
    }
}

@media screen and (max-width:680px){
    h1.top img.nippon-foundation-logo{
        width: 45px;
        position: absolute;
        top: 5px;
        right: 0px;
        height: auto;   
    }
}
@media screen and (max-width:375px){
    h1.top img.nippon-foundation-logo{
        width: 40px;
        position: absolute;
        top: 5px;
        right: 0px;
        height: auto;   
    }
}


/* title */

h2.ttl01{
    width: 100%;
    padding: 20px 0;
    text-align: center;
    background: #ffffff;
}
h2.ttl01 img.PC{
    width: 685px;
    height: auto;
    margin: 0 auto;
}
@media screen and (min-width:726px){
    h2.ttl01 img.PC{
        width: 685px;
        height: auto;
        margin: 0 auto;
    }
    h2.ttl01 img.SP{
        display: none;
    }
}
@media screen and (max-width:725px){
    h2.ttl01 img.PC{
        display: none;
    }
    h2.ttl01 img.SP{
        display: block;
        max-width: 300px;
        height: auto;
        margin: 0 auto;
    }
    
}

h2.ttl02{
    width: 100%;
    padding: 20px 0;
    text-align: center;
    background: #ffffff;
}
h2.ttl02 img{
    width: 115px;
    height: auto;
    margin: 0 auto;
}


h2.ttl_ueda{
    padding: 20px 0;
    text-align: center;
    background: #ffffff;
}
@media screen and (min-width:681px){
    h2.ttl_ueda img.PC{
        width: 430px;
        height: auto;
        margin: 0 auto;
    }
    h2.ttl_ueda img.SP{
        display: none;
    }
}
@media screen and (max-width:680px){
    h2.ttl_ueda img.PC{
        display: none;
    }
    h2.ttl_ueda img.SP{
        width: 310px;
        height: auto;
        margin: 0 auto;
    }
    
}



h2.ttl_about{
    padding: 20px 0;
    text-align: center;
    background: #ffffff;
}

@media screen and (min-width:681px){
    h2.ttl_about img.PC{
        width: 388px;
        height: auto;
        margin: 0 auto;
    }
    h2.ttl_about img.SP{
        display: none;
    }
}
@media screen and (max-width:680px){    
    h2.ttl_about img.PC{
        display: none;
    }
    h2.ttl_about img.SP{
        width: 276px;
        height: auto;
        margin: 0 auto;
    }
}







/* ボタン */

   /* 大枠のコンテナ: PC表示時 1366px、中央寄せ */
    .outer-container {
      max-width: 980px;
      margin: 0 auto;
      padding: 0 1rem; /* 画面端との余白確保 */
    }

    /* ボタン配置のコンテナ: PC表示時 900px、中央寄せ */
    .circle-container {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem; /* 要素間のスペース */
      padding: 2rem 0;
    }

    /* 丸いボタンの基本スタイル */
    .circle-button {
      width: 125px; /* 160px 5列 */
      height: 125px;
      border: 8px solid #ffffff;
      border-radius: 50%;
      overflow: hidden;
      padding: 0;
      background-color: transparent;
      cursor: pointer;
      transition: transform 0.2s ease-in-out;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
    }

    /* ホバー時の拡大 */
    .circle-button:hover {
        border: 8px solid #f2b7e1;
    }
    .circle-button:hover img {
      transform: scale(1.1);
    }

    /* 画像を円形に収める */
    .circle-button img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 中央を基準にトリミング */
      display: block;
      border-radius: 50%;
        transition: transform 0.2s ease-in-out;
    }

    /* 名前などのラベル部分 */
    .prof-name {
      text-align: center;
      margin-top: 0.5rem;
      font-weight: bold;
        margin-bottom: 0em;
    }

    /* 画面幅が小さい(例: 767px以下)場合のレスポンシブ対応 */
    @media screen and (max-width: 767px) {
      /* outer-container, circle-container を幅100%に */
      .outer-container,
      .circle-container {
        max-width: 100%;
      }

      /* ボタンサイズをやや小さめに */
      .circle-button {
        width: 100px;
        height: 100px;
      }
    }