@charset "utf-8";
html,body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;     
    height: 100%; 

}

body{
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 100;
    font-style: normal;
  
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 300;
    font-style: normal;

    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;

    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-style: normal;

    font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;


    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-style: normal;


  font-style: normal;
  color: #707070;

  

}

img{
    max-width: 100%;
    height: auto;
  }
  
  li{
    list-style: none;
  }
  a{
    color: #707070;
    text-decoration: none;
  }



#header{
 
    background-color: #ffffffff;
    box-shadow: 2px 4px 6px 0px rgba(88, 88, 88, 0.4);
    width: 100%;
    position:fixed;
    height: 70px;
    z-index: 100000;

    display: flex;
    align-items: center;     /* ← 縦方向中央に配置 */
    padding-left: 20px; 


    

}

.logo img {
    height: 40px;
    width: auto;
    display: block;

  }




/* チェックボックスは非表示 */
#menu-toggle {
    display: none;
  }
  
  /* ハンバーガーアイコン */
  .hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 1001;
  }
  
  .hamburger span {
    display: block;
    height: 4px;
    background: #B7D96E;
    margin: 5px 0;
    border-radius: 2px;
    transition: 0.3s;

  }
  
  /* メニュー（右からスライド） */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -250px; /* 初期は画面外 */
    width: 250px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    padding-top: 60px;
  }
  
  .nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .nav-menu li {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
  }
  
  .nav-menu a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
  }
  
  /* チェックONでメニュー表示 */
  #menu-toggle:checked + .hamburger + .nav-menu {
    right: 0;
  }
  


  /* ハンバーガーを「×」に変える（任意） */
  #menu-toggle:checked + .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    position: relative;
    top: 8px;
  }
  
  #menu-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }
  
  #menu-toggle:checked + .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -8px;
  }




  /*----------top-----------------*/
.toppage-box{
    position:relative;
    display: inline-block;
}

.toppage-box img{
    display: block;
    width: 100%;
    height: auto;
}

.toppage-box::before{
    content:"未来の医療は波動医療";
    font-weight: 600;
    position: absolute;
    top:10px;
    right: 0;
    width: 30%;
    height: 100%;
    font-size: 60px;

    writing-mode: vertical-lr;
    background: linear-gradient(to bottom, #fef4d5, #EBF4D8);
    color: #585858;
    padding: 5px;
    box-sizing:border-box;

    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-size: 7vw;
    letter-spacing: 0.3em;
}

.toppage-box::after{
    content:"私は打たないを貫いた医師がたどり着いた\A薬を使わない無害な医療を提供します。";
    font-weight: 500;
    white-space:pre-line;
    text-align: center;
    position: absolute;
    bottom: -50px;
 

    width: 100%;
    background-color: #EBF4D8;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-size: 4vw;
    padding: 40px 40px;

 
    line-height: 1.6;

}


  .toppage-img img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 60px;
  }

  .toppage-text{
    text-align: center;
    font-weight:    300;
    font-size: 20px;
    letter-spacing: 0.2em;

  }
  .toppage-text .color{
    color: #FABE00;
    font-size: 40px;
    
  }

  .toppage-text .text1{
    margin-bottom: -30px;
    margin-top: 40px;
  }

  .toppage-text .text2{
    font-size: 30px;
  }


  .toppage-botton{
    background-color: #9e9e9e;
    font-weight: 500;
    padding: 30px 10px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 25px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 40px;


  }


  /*----------top_end-----------------*/

 /*----------about-----------------*/
 .oshirase {
   font-weight: 400;
   margin-top: 60px;
 }
.oshirase h1{
   text-align: center;
}
 .oshirase p{
   font-size: 16px;
 
   margin-right: 40px;
   margin-left: 40px;
 }
 .oshirase .simei{
   text-align: right;
 }

#about{
    background-color: #FEFFF2;
    padding-bottom: 20px;
}
 .about-box-title{
    display: flex;
    justify-content: space-between;
    margin:0 30px ;
    margin-top: 40px;
    margin-bottom: -20px;
    align-items: baseline;
    

 

   
 }

 .about-box-title .about-title-jp{
    font-weight: 600;
    font-size: 20px;
 }

 .about-box-title .about-title-us{
    font-weight: 600;
    color: #EEEEEE;
    font-size: 40px;
 }

 .about-box-text{
    font-weight: 400;
    margin: 0 30px;
    letter-spacing: 0.1em;
    line-height: 30px;
 }


 /*----------about_end-----------------*/

  /*----------flow-----------------*/

  .flow-box-title{
    display: flex;
    justify-content: space-between;
    margin:0 30px ;
    margin-top: 40px;
    margin-bottom: -20px;
    align-items: baseline;
    

 

   
 }

 .flow-box-title .flow-title-jp{
    font-weight: 600;
    font-size: 20px;
 }

 .flow-box-title .flow-title-us{
    font-weight: 600;
    color: #EEEEEE;
    font-size: 40px;
 }

 #flow{
    margin-top: -40px;
    margin-bottom: -20px;
 }

 .flow-box-step-title{
    display: flex;
    background-color: #B7D96E;
    clip-path: polygon(0 0, 70% 0%, 65% 100%, 0% 100%);
    height: 40px;
    color: #ffffff;
    align-items: center; 
    padding: 0 20px;
    font-weight: 200;
    font-size:15px;
    margin-left:30px ;


}

.flow-box-step-title .step{
    margin-right: 20px;
}

.flow-box-step-text p{

    font-weight: 400;
    margin: 20px 30px;
    letter-spacing: 0.1em;
    line-height: 30px;

}

.flow-box-step-img {
    margin: 0  30px;
    margin-bottom: 30px;
   
}
.flow-box-step-img img{
    border-radius: 10px;
    
}

   /*----------flow_end-----------------*/

     /*----------explain-----------------*/
     .explain-box{
        margin-bottom: 40px;
     }

     .explain-box-title{
        display: flex;
        justify-content: space-between;
        margin:0 30px ;
        margin-top: 40px;
        margin-bottom: -20px;
        align-items: baseline;
       
     }
    
     .explain-box-title .explain-title-jp{
        font-weight: 600;
        font-size: 20px;
     }
    
     .explain-box-title .explain-title-us{
        font-weight: 600;
        color: #EEEEEE;
        font-size: 40px;
     }


     .explain-box-in{
        background-color: #B7D96E;
        height: 60px;
        display: flex;
        align-items: center; 
        justify-content: center;
        

     }

     .explain-box-in h2{
        color: #ffffff;
        font-weight: 600;
        font-size: 20px;
        display: flex;
        align-items: center; 
        letter-spacing: 0.1em;
        
     }

     .explain-box-text p{

        font-weight: 400;
        margin: 20px 30px;
        letter-spacing: 0.1em;
        line-height: 30px;

     }

     .explain-box-img{
        display: flex;
        margin:20px 30px;
        justify-content: space-between;
      
     }

     .explain-box-img img{
        width: 45%;
        border-radius: 10px;
        
      
     }

     .explain-box-detail{
        background-color: #FEFFF2;
        
     }
     .explain-box-detail h4{
        text-align: center;
        padding-top: 20px;

     }

     .explain-box-detail p{

        font-weight: 400;
        margin: 20px 30px;
        letter-spacing: 0.1em;
        line-height: 30px;
        text-align: center;
        padding-bottom: 20px;

     }
     .explain-box-text a{
        color: rgb(66, 148, 255);
     }

     .explain-box-img_c{
        margin: 0 30px;
     }

     .explain-box-img_c .img-c{
        border-radius: 10px;
     }



    

     /*----------explain_end-----------------*/

      /*----------detail-----------------*/

      .details-box-title{
        display: flex;
        justify-content: space-between;
        margin:0 30px ;
        margin-top: 20px;
        margin-bottom: -20px;
        align-items: baseline;
       
     }
    
     .details-box-title .details-title-jp{
        font-weight: 600;
        font-size: 20px;
     }
    
     .details-box-title .details-title-us{
        font-weight: 600;
        color: #EEEEEE;
        font-size: 40px;
     }



     
     #details{
        background-color: #FEFFF2;
        
     }

     .details-box{
        margin-bottom: 30px;

     }

     .details-in{
        background-color: #B7D96E;
        margin: 20px 30px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
     }

     .details-in h4{

        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        color: #ffffff;
        font-size: 20px;
        


     }
     .details-text p{
        font-weight: 400;
        margin: 20px 30px;
        letter-spacing: 0.1em;
        line-height: 30px;
        font-size: 20px;
        text-align: center;


     }
     .details-text .tel{
        font-size: 25px;
     }
     .details-text .adress{
        font-size: 20px;
     }

     .details-text .cyuushaku{
        font-size: 15px;
        text-align: left;
     }

     .details-text .recerv a{
        color:rgb(66, 148, 255) ;
        font-weight: 400;
       
     }
     .details-text .recerv{
        padding-bottom: 30px;
     }

      /*----------detail_end-----------------*/


      /*----------introduction-----------------*/


      .introduction-box-title{
        display: flex;
        justify-content: space-between;
        margin:0 30px ;
        margin-top: 20px;
        margin-bottom: -20px;
        align-items: baseline;
       
     }
    
     .introduction-box-title .introduction-title-jp{
        font-weight: 600;
        font-size: 20px;
     }
    
     .introduction-box-title .introduction-title-us{
        font-weight: 600;
        color: #EEEEEE;
        font-size: 40px;
     }
     .introduction-box{
        display: flex;
     }
     .introduction-box{
        position: relative;
        margin: 20px 30px;
     }

     .introduction-box-name {
        position: absolute;
        top:110px;
        right: 0;
     }

     .introduction-box-name h1{
        font-weight: 700;
        font-size: 35px;
     }
     .introduction-box-name h5{
        font-size: 15px;
        text-align: right;
        margin-bottom: -20px;
     }


     .introduction-box-img img{
        width: 250px;
        height: 250px;
        border-radius: 50%;       /* 正円にする */
        object-fit: cover;        /* はみ出さずに画像をカットして表示 */
        display: block;           /* 余白防止 */

     }

     .introduction-box-carria{
        background-color:#FEFFF2;
        margin: 10px 20px;
      
     
     }

     .introduction-box-carria h4{
        font-size: 20px;
        padding-top: 20px;
        margin: 0 30px;
     }

     .introduction-box-text .number{
        font-size:16px;
        font-weight: 600;
        margin: 35px 30px;
     }

     .introduction-box-text  p{
        font-size: 15px;
        font-weight: 300;
        margin: -30px 30px;
     }
     .introduction-box-text{
        margin-bottom: 30px;
     }



     .introduction-box-longtext {
        font-weight: 400;
        margin: 70px 30px;
        letter-spacing: 0.1em;
        line-height: 40px;
        font-size: 16px;


     }

     .content-end{
      padding-bottom: 30px;
     }

     

 


      /*----------introduction_end-----------------*/



      /*---------footer-----------------*/

      #footer{

        background-color: #DDECBE;

        
      }
      .footer-box{
        margin: 10px 20px;
        padding: 30px 0;
        display: flex;
      }
      .footer-logo img{
        width:  200px;
        object-fit: cover;
      }
      .footer-logo{
        margin-right: -30px;
      }
       .footer-logo-sns{
        display: flex;
      }
      .footer-logo-sns img{
        width: 60px;
        height: 60px;
      }
      .footer-logo-sns .insta{
        margin-right: 20px;
      }

      .footer-link a{

        font-weight: 500;
        font-size: 15px;
        padding-bottom: 20px;
        


      }
      .footer-link{
        margin-top: 30px;
      }

  





          /*---------foote_endr-----------------*/


          @media screen and (min-width: 1024px) {
            /* スマホ用のスタイルをいったんリセット */
            body, div, section, header, footer, main, nav, ul, li, h1, h2, h3, p, img, a, input, label {
              all: unset;  /* ほぼすべてのスタイルをリセット */
              box-sizing: border-box;
            }
          
            /* ここからパソコン用スタイルを1から書く */
            body {
              font-family: 'M PLUS 1p', sans-serif;
              background: #fff;
              color: #000;
              padding: 40px;
            }
          
            /* 例えばヘッダー */
            header {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          
            /* ナビゲーション */
            nav ul {
              display: flex;
              gap: 30px;
            }
          
            nav a {
              text-decoration: none;
              color: #333;
              font-weight: 700;
            }
          
            /* メインコンテンツ */
            main {
              max-width: 960px;
              margin: 0 auto;
            }
          
            /* 画像やテキストのレイアウトなど */
            /* ... ここに自由に作りたいデザインを追加してください ... */
          }