@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Libre+Caslon+Text&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box; /*余白や線を幅や高さに含める*/
}

html {
  font-size: 100%;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #F8F8F8;
  scroll-behavior: smooth; /* スムーズスクロール */
}

.wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}




img {
    max-width: 100%;
    height: auto; 
}



hr {
    padding-top: 50px;
    border: none;
}


h1 {
    font-size: 1.5em;
    padding: 2px 10px;/*上下 左右の余白*/
    margin: 50px 10px 10px 10px;
    color: #2c2c2c;/*文字色*/
    border-left: solid 3px #C7313B;/*左線*/
}

h2 {
    padding: 10px 30px;
    color: #2c2c2c;/*文字色*/
    font-size: 1.2em;
}

h3{
    padding: 5px 30px;
    color: #2c2c2c;/*文字色*/
    font-size: 1em;  
}


p  {
    color: #5E5E5E;/*文字色*/
    font-size: 1em;
    padding: 10px 30px;
    line-height: 1.8;
}


table  {
    color: #5E5E5E;/*文字色*/
    font-size: 1em;
    padding: 10px 30px;
    line-height: 1.8;
}


th {
    border: solid 1px;              /* 枠線指定 */
    border-color: #C7313B;
    padding: 10px;  /* 余白指定 */
    border-radius:  5px;        /* 角丸指定 */
}




/*-------------------------------------------
 header
-------------------------------------------*/

      header {
          background-color: #F8F8F8;
          padding: 1rem 0;
          position: fixed;
          width: 100%;
          z-index: 4;
          height: 50px;
      }

      header .wrapper {
          display: flex;
          justify-content: space-between;
      }

      header a {
          color: #2c2c2c;
          font-size: 1.1rem;
      }

      header a:hover {
          color: #C7313B;
          transition: 0.2s;
      }

      .logo {
          width: 100px;
      }

      .btn-menu {
          position: absolute;
          top: 12px;
          right: 12px;
          border: 1px solid rgba(217,217,217,2);
          color: #2c2c2c;
          padding: .5rem 1rem;
      }

      .main-nav {
          background-color: #F8F8F8;
          width: 0;
          position: absolute;
          top: 50px;
          right: 0;
          overflow: hidden;
          transition: .5s;
          z-index: 5;
      }

      .main-nav li {
          text-align: center;
          margin: 2rem 0;
      }

      .main-nav a {
          display: block;
      }

      .main-nav a:hover {
          color: #C7313B;
          transition: 0.2s;
      }

      .main-nav.open-menu {
          width: 100%;
      }

      .header-hight {
          padding-top: 50px; /* 上の空白を50pxに指定 */
      }




/*-------------------------------------------
 メインビジュアル
-------------------------------------------*/


      .ripple-wrapper {
        position: relative;
        max-width: 100%;
        height: 100vh;
        background-color: #f8f8f8;
        overflow: hidden;
        z-index: 1;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
      }


      .ripple {
        position: absolute;
        width: 120px;
        height: 120px;
        background-color: none;
        border: 2px solid rgba(199, 49, 59, 1);
        border-radius: 50%;
        pointer-events: none;
        z-index: 1.5;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
      }

      .main-text {
        position: relative;
        font-size: 2.2rem;
        font-family: serif;
        z-index: 2;
        color: #2c2c2c;
        line-height: 2.2em;
        margin: 0 auto;
        top: 30%;
        left: 45%;
      }

      .scroll-indicator {
        position: absolute;
        bottom: 160px;
        left: 50%;
        transform: translateX(-50%);
        height: 60px;
        width: 2px;
        
      }


      .scroll-indicator .line {
        height: 100px;
        width: 2px;
        background-color: #d9d9d9; /* 薄いグレー。お好みで赤にも */
        position: absolute;
        top: 0;
        left: 0;
      }

      .scroll-indicator .arrow {
        width: 30px;
        height: 0px;
        border-left: 2px solid #d9d9d9;
        border-bottom: 2px solid #d9d9d9;
        transform: rotate(45deg);
        margin-left: -25px;
        margin-top: 88px;
      }






/*-------------------------------------------
profile
-------------------------------------------*/
    #profile .content {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #profile img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin: 0px 30px;
    }

    #profile .text {
      text-align: left;
    }




/*-------------------------------------------
 Backボタン
-------------------------------------------*/


 a.btn  {
    display: inline-block;
    width: 120px;
    margin: 10px 30px;
    padding: 10px 10px;
    border: 1px solid #D9D9D9;
    border-radius:  5px;      
    background: transparent;
    color: #5E5E5E;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
  }

  a.btn:hover {
    border: 1px solid rgba(0,0,0,.1);
    background: #D9D9D9;
    color: #C7313B;
 }


 
/*-------------------------------------------
 Flexbox
-------------------------------------------*/


.fade-in-section {
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.flex {
   max-width: 100%;
   margin: 30px auto;
}

.flex .img {
  max-width: 100%; /*画像サイズ指定*/
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0px 30px;
}

.flex .right {
  margin-bottom: 50px;
  padding: 0;
}

.flex .title {
  padding: 10px 10px 5px 30px;
  font-size: 1.2em;
}

.flex .text {
  padding: 0px 10px 10px 30px;
}





  /*-------------------------------------------
  Footer
  -------------------------------------------*/

footer {
    width: 100%;
    margin-top: 50px;
    background-color: #d9d9d9;
    color:  #5E5E5E;               /* 文字色 */
    line-height: normal;
}

.footer-contents {
    padding: 50px;
    text-align: center;
    color:  #5E5E5E;               /* 文字色 */
}

  /*-------------------------------------------
  Contact
  -------------------------------------------*/

.contact-section {
  background-color: #f8f8f8;
  padding: 1rem 1.5rem;
  text-align: center;
}

.contact-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #5e5e5e;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.contact-form label {
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #5e5e5e;
  font-weight: normal;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}

.contact-form button {
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  background-color: #C7313B; /* アクセントの濃い赤 */
  color: #f8f8f8;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #C7313B;
}



  /*-------------------------------------------
   Media Query
  -------------------------------------------*/

  @media (min-width: 600px) {
       /*　画面サイズが600pxより大きい場合(デスクトップサイズ)　*/
      
      /* Header */
          .btn-menu {
              display: none;
          }
      
          .main-nav {
              width: 100%;
              position: static;
              display: flex;
          }
      
          .main-nav li {
              margin: 0 0 0 1.5rem;
          }
      
        .flex{
              max-width: 100%;
              display:flex;
              /*justify-content:space-between;*/
            }
      
        .flex .right {
              width: auto;
              margin: 0 0 0 20px;
              padding: 0;
            }
      
        .flex .img {
              max-width: 40%; /*画像サイズ指定*/
              padding: 10px;
            }
      
        /* profile */    
            br.br-pc {
               display: block;
             }
      
      



   }


    @media (max-width: 600px) {
        /*画面サイズが600pxより小さい場合(スマホサイズ)*/
        
        
      /*-------------------------------------------
        profile
        -------------------------------------------*/
        #profile .content {
          flex-direction: column;
        }
        #profile img {
          margin-right: 0;
        }
        
        br.br-pc {
          display: none;
        }



    }