@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

body * {box-sizing:content-box;}


body{
    width: 100%;
    min-height: 100vh;
	  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	  background-size: cover;

    background-image:url("/~gakusei/gakusai/47th/img/backimage-white.jpg");
    background-repeat:repeat-y;
    background-position:center top;
    background-size:100% auto;
	
}


#section1 {
    max-width: 90%;
    width: 1000px;
    margin: auto;
    z-index: 1;

}

.section1_department_serect {
    background-color: #022d46;
    width: 100%;
    margin-right: auto;
    height: 70px;
    display: flex;
    align-items: center;
    margin-top: 5px;
    cursor:default;

}

.section1_department_serect p {
    color: #ffffff;
    font-size: xx-large;
}

.rotate {
    display: inline-block;
    transform: rotate(90deg);
}


.lab-table {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 5rem;
    
    
}

.lab-table-item {
    background-image: url(https://www.med.kagawa-u.ac.jp/~gakusei/gakusai/47th/sakai_images/lab_introduction/puzzle.png);
    background-size: contain;
    width: 90%;
    height: 300px;
    max-width: 400px;
    margin: 10px;
    margin-top:40px;
    margin-bottom: 35px;
    
}

@media screen and (max-width:400px){
    .lab-table-item{
        height:250px;
    }
    .btn1{
        margin-bottom:5px;
    }
}

.zentai-photo{
    text-align:center;
    margin-top:4%;
}

.zentai-photo img{
    width:70%;
    background-color: #fff;
    border: 4px solid #022d46;
    border-radius: 90px;
}

.kyoku-photo img{
    width:80%;
    margin:auto;
    display:block;
    margin-top:-13%;
    
}
    


.kyoku-photo01 img{
  width:40%;
  margin:auto;
  display:block;
  margin-top:-13%;
}

.btn1 {
    text-align: center;
	font-size: 1.2rem;	/*文字サイズを120%に*/
    margin-top:1%;
}
.btn1 a {
	display: inline-block;text-decoration: none;
    background-color:#022d46;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	border-radius: 100px;	/*角を丸くする指定*/
	padding: 0.5em 2em;		/*上下、左右へのボタン内の余白*/
}

/*矢印アイコン*/
.arrow1::after {
	display: inline-block;
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
	font-weight: bold;
    content: "\f061";		/*アイコンのコード*/
	padding-left: 0.5em;	/*アイコンとテキストとの間のスペース*/
	transition: 0.3s;
}
.arrow1:hover::after {
	transform: translateX(0.2em);	/*マウスオン時に少しだけ移動する*/
}

/* 枠の色だけ指定 */
 .lab-table-item:nth-child(5n) {
    border: 4px solid #e1340e;
}

.lab-table-item:nth-child(5n+1) {
    border: 4px solid #088100;
}

.lab-table-item:nth-child(5n+2) {
    border: 4px solid #57035e;
}

.lab-table-item:nth-child(5n+3) {
    border: 4px solid #f4d41f;
}

.lab-table-item:nth-child(5n+4) {
    border: 4px solid #1ab3c3;
}


.lab-name {
    background-color: #d2efff;
    width: 45%;
    height: 20%;
    font-size:20px;
    text-align:center;
    line-height:300%;
    border-radius: 9999px;
    border: 3px solid #022d46;
    transform: translate(-5%, -50%);
}

@media  screen and (max-width:440px){
    .lab-name{
        font-size:16px;
    }
}

.syoukaibun{
    margin-top:-5%;
    margin-bottom:5%;
}

#popup8 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup8-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup8-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup8:checked ~ .popup8-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup8-window {
    
    
    width: 80%;
    max-width: 560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.popup-photo{
    width:20vw;
}

 .popup8-photo img{
 display:block;
margin:0 auto;
    width:80%;
margin-bottom:5px;

 }

  .popup8-text {
    margin: 0;
  }
  
  .popup8-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup8-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup9 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup9-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup9-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup9:checked ~ .popup9-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup9-window {
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
 
 

 .popup9-photo img{
 display:block;
margin:0 auto;
    display:block;
    width:90%;
    margin:0 auto;

    
 }

  .popup9-text {
    margin: 0;
  }
  
  .popup9-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup9-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup10 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup10-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup10-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup10:checked ~ .popup10-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup10-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup10-photo img{
 display:block;
margin:0 auto;
    display:block;
    width:80%;
margin-bottom:5px;
    margin:0 auto;
    
 }

  .popup10-text {
    margin: 0;
  }
  
  .popup10-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup10-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup11 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup11-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup11-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup11:checked ~ .popup11-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup11-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup11-photo img{
 display:block;
margin:0 auto;
    width:80%;
margin-bottom:5px;
    
    
 }

  .popup11-text {
    margin: 0;
  }
  
  .popup11-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup11-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup12 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup12-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup12-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup12:checked ~ .popup12-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup12-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup12-photo img{
 display:block;
margin:0 auto;
  display:block;
    width:80%;
margin-bottom:5px;
margin:0 auto;
    
 }

  .popup12-text {
    margin: 0;
  }
  
  .popup12-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup12-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup13 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup13-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup13-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup13:checked ~ .popup13-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup13-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup13-photo img{
 display:block;
margin:0 auto;
    width:80%;
margin-bottom:5px;
    
    
 }

  .popup13-text {
    margin: 0;
  }
  
  .popup13-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup13-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup14 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup14-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup14-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup14:checked ~ .popup14-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup14-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup14-photo img{
 display:block;
margin:0 auto;
    width:70%;
    
    
 }

  .popup14-text {
    margin: 0;
  }
  
  .popup14-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup14-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup15 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup15-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup15-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup15:checked ~ .popup15-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup15-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup15-photo img{
 display:block;
margin:0 auto;
    width:80%;
margin-bottom:5px;
    
    
 }

  .popup15-text {
    margin: 0;
  }
  
  .popup15-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup15-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

  #popup16 {
    display: none; /* label でコントロールするので input は非表示に */
  }
  
  .popup16-open {
    cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  }
  
  .popup16-overlay {
    display: none; /* input にチェックが入るまでは非表示に */
  }
  
  #popup16:checked ~ .popup16-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .popup16-window {
    
    width: 80%;
    max-width:560px;
    padding: 20px;
    background-color:#fff;
    border:4px solid #01135d;
    background-size:cover;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
 .popup16-photo img{
 display:block;
margin:0 auto;
 display:block;
    width:80%;
margin-bottom:5px;
    
    
 }

  .popup16-text {
    margin: 0;
  }
  
  .popup16-text:not(:last-of-type) {
    margin-bottom: 1em
  }
  
  .popup16-close {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: 0;
  }

#page-title{
    font-size: xx-large;
    color:#022d46;
    padding-bottom: 10px;
	padding-top: 20px;

    text-align: center;
}

.medical-labos-title {
    display: flex;
    text-align: left;
    margin-left: 0;
    width: fit-content;
    border-bottom: 6px solid #022d46;
    /* 下線の上の隙間↓ */
    padding-bottom: 10px;
    /* 下線の下の隙間 */
    margin-bottom: 50px;
    margin-top: 60px;
    position: absolute;
    transform: translateY(-250%);
    top: 0;
    height: 1.8rem;
}

.medical-labos-title h2 {
    font-size: xx-large;
    color: #022d46;
    height: fit-content;
}