@charset "UTF-8";

 /* ページ全体の設定 */

body{ margin: 0 ;
      background-color: #e0ffff;
      font-family:"Meiryo",sans-serif;}

 /* ページ全体の設定 END */



/* header ブロック*/

header{background-color: #20b2aa;
       padding: 0px 15px;
       color: #ffffff;
       font-size: 12px; }

h1{margin: 0;
   font-size: 20px;}


/* header ブロック END */



/* div ブロック*/

div{padding: 10px 20px;}


figure{margin: 0;}


h2{margin-bottom: 0;
   background-color: #20b2aa;
   color: #ffffff;
   font-size: 20px;
   text-align: center;}

/* div ブロック END */



/* article ブロック*/

h3{margin-top: 10px;
   margin-bottom: 10px;
   padding: 0;
   color: #20b2aa;
   border-bottom: solid thick #20b2aa;
   box-shadow: 5px 10px 5px #20b2aa;}

/* article ブロック END */



/* section "はじめに" ブロック*/

p{margin: 0;}

.hajimeni{background-image: url(img/K-1.jpg);
          background-size: cover;
          display: flex;
          align-items: center;
          height: 250px;
          border-radius: 10px 35px;}

/* section "はじめに" ブロック END */



/* section"臨床研究" ブロック*/

.rinshokenkyu{padding-top: 5px;}

.rinshokenkyu img{width:150px;
                  float: right;
                  margin: 0;
                  border: 0;}

/* section"臨床研究" ブロック END */



/* section"臨床試験" ブロック */

.rinshoshiken{background-image: url(img/K-3.jpg);
              background-size: cover;
              display: flex;
              align-items: center;
              height: 200px;
              border-radius: 10px 35px;
clear:right;}

/* section"臨床試験" ブロック END */



/* section"治験" ブロック */

.chiken{padding-top: 5px;}

.chiken img{width:  50%;
            float: right;
            margin: 0;
            border: 0;}

/* section"治験" ブロック END */



/* section"新しい薬ができるまで" ブロック */

 .newkusuri ul{margin: 0;
               padding: 0;} 

 .newkusuri li{list-style-type: none;
               padding-top: 10px;
               display: flex;
               margin: 0;
               align-items: center;}

 .newkusuri h4{margin: 0;
               padding-left:5px;
               font-weight: normal;
               font-size: 12px;}

 .newkusuri figure{width: 120px;
                   height: 100px;
                   flex: none;}

 .newkusuri img{width: 100%;
                height: 100%;}

/* section"新しい薬ができるまで" ブロック END */


/* section"治験の３ステップ" */


 .chikenstep {margin: 0;
              padding: 5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-warp: warp;}

 .chikenstep h4{margin: 0;
                padding: 0;
                font-weight: normal;
                font-sise: 13px;}

 .chikenstep figure{margin: 0;
 }
                    
 .chikenstep img{widht: 150px;
                 height: 150px;}


  /* フェイズ説明 */

 .step{margin: 0;
       margin-bottom: 20px;      
       padding: 0;
       padding-left: 20px}

 .step ol{margin: 0;
          padding: 0;}
 

 .step li{margin: 0;
          padding: 0;
          color: #20b2aa;
          text-decoration: underline;
          font-weight: bold;}

 .step h4{margin: 0;
          padding: 0;
          font-weight: normal;
          font-size: 12px;}

  /* フェイズ説明 END */

/* section"治験の３ステップ" END*/



/* 治験参加のメリット・デメリット */

 .meritdemerit{margin: 0;
               padding-top: 5px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               flex-warp: warp;}

 .meritdemerit figure{margin: 0 0 0 0px; 
                      width: 100px;}
                     
 .meritdemerit img{widht: 140px;
                   height: 140px;}

 .meritdemerit h4{width:60%;
                  margin: 15px 0 0 0;
                  padding-left:20px;
                  font-weight: normal;
                  font-size: 13.5px;}


  
   /* メリット */

   .merit {margin: 0;
           padding: 0;}

   .merit h4{margin: 0;
             padding-bottom: 5px;
             text-decoration: underline;
             text-align: center;
             color: #20b2aa;}

   .merit ul{margin: 0px;
             padding-left: 15px;
             padding-top: 5px;}

   .merit li{list-style-type: none;
             position: relative;
             padding-left: 25px;
             padding-bottom: 5px;
             font-size: 14px;}  

   .merit li:before{border: solid thin #20b2aa;
                    transform: rotate(45deg);
                    width: 10px;
                    height: 10px;
                    display: block;
                    position: absolute;
                    top: 5.5px;
                    left: 0px;
                    content: "";
                    background: #20b2aa;}
                       
    /* メリット END*/

  
    /* デメリット */

   .demerit {margin: 0;
             padding: 0;
             height: 345px;}

   .demerit h4{margin: 0;
             padding-bottom: 5px;
             padding-top: 10px;
             text-decoration: underline;
             text-align: center;
             color: #20b2aa;}

   .demerit ul{margin: 0px;
             padding-left: 15px;
             padding-top: 5px;}

   .demerit li{list-style-type: none;
             position: relative;
             padding-left: 25px;
             padding-bottom: 5px;
             font-size: 14px;}  

   .demerit li:before{border: solid thin #20b2aa;
                    transform: rotate(45deg);
                    width: 10px;
                    height: 10px;
                    display: block;
                    position: absolute;
                    top: 5.5px;
                    left: 0px;
                    content: "";
                    background: #20b2aa;}


/* 治験参加のメリット・デメリット END */



/* プラセボとは */

.placebo{background-image: url(img/K-7.jpg);
          background-size: cover;
          display: flex;
          align-items: center;
          height: 150px;
          border-radius: 10px 35px;}



 /* プラセボとは END */




/* プライバシーについて */

 .privacy{background-image: url(img/K-8.jpg);
          background-size: cover;
          display: flex;
          align-items: center;
          height: 200px;
          border-radius: 10px 35px;}


/* プライバシーについて END*/



/* 意思決定について */

 .intention {margin: 0;
             padding: 5px;}
        
 .intention img{display: block;
                margin-left: auto;
                margin-right: auto;
                width: 250px;}

 .intention h4{margin-top: 10px;
               margin-bottom: 0;
               padding: 0;
               font-weight: normal;
               text-decoration: underline;
               color: #20b2aa;}

/* 意思決定について END */



/* CRCについて */

 .crc {margin: 0;
       padding: 5px;}
        
 .crc h4{margin: 0;
         padding-bottom: 5px;
         font-size: 16px;
         color: #20b2aa;}

 .crc img{width: 150px;
          float: left;
          margin-right: 10px;
          border: 0;}


/* CRCについて END */



/* navブロック */

.nav1 {margin-bottom: 0; 
       padding: 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;clear:left;}



.sample1 img{width: 94%;
             border-radius: 50%;
             background-position: center;
             background-size:cover;
             border: solid 3px #ffffff;}



.sample1 {width: 30%;
          overflow: hidden;
	  margin: 0;
	  position: relative;	/* 相対位置指定 */
          padding: 0;}

.sample1 .caption {font-size: 100%;
	           text-align: 	center;
	           padding-top:	70px;
	           color: #fff;
                   width: 100%;
}
.sample1 .mask {width: 100%;
	        height:	100%;
	        position: absolute;	/* 絶対位置指定 */
	        top:			0;
	        left:			0;
	        opacity:		0;	/* マスクを表示しない */
	        background-color:	rgba(0,0,0,0.4); /* マスクは半透明 */
	        -webkit-transition:	all 0.2s ease;
	        transition:		all 0.2s ease;
}

.sample1:hover .mask {opacity: 1; /* マスクを表示する */
}


.sample1 div {margin: 0;
              padding: 0;
              width: 100px ;
              height: 100px;}

.sample1 a{color: #ffffff;}




/* navブロック END */


/* footer ブロック */

footer{background-color: #20b2aa;
       margin-top: 5px;
       padding: 5px;
       color: #ffffff;
       font-size: 13px;
       text-align: center;}