@charset "utf-8";


.viewer {
  position: relative;
	height:300px;
  width:390px;
  margin: 0 auto;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    position: relative;
    margin:0 auto;
    aspect-ratio: 3/1;
    li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
      z-index: 0;

      &.active {
        opacity: 1;
        z-index: 1;
      }

      img {
        width: 100%;
        display: block;
      }
    }
  }
}
	
	#top_com{
		margin:30px auto 0 auto;
		display:grid;
		grid-template-columns: 390px 1fr;
		gap:20px;
		align-items: center;
		p{
			text-align:left;
			align-self:center;
			line-height:2em;
		}
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
		}
	}
	
	.utiwake{
		ul{
			li{
				text-align: left;
				margin:0 0 0 2em;
				list-style:decimal;
			}
		}
	}
	
	#staff{/*介護支援専門員の紹介*/
		> p{
			text-align:left;
			}
		> ul{
			> li{
				margin:0 0 0 2em;
				list-style:decimal;
				text-align:left;
				}
			}
		}
	
	#staff_list{
		ul{
			margin:20px auto 0 auto;
			display:grid;
			grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
			gap:30px;
			li{
				position:relative;
				background:#FFC;
				border-radius: 10px;
				border:1px solid #F60;
				padding:20px;
				display:grid;
				grid-template-columns: 140px 1fr;
				align-items:start;
				gap:20px;
				> div{
					h3{
						text-align:left;
						font-size: 1.1em;
						span{
							font-size: .8em;
							display:block;
							}
						}
					p{
						text-align:left;
						font-size: .9em;
						text-justify:inter-ideograph;
					}
				}
			}
		}
		@media (max-width: 480px) {
			ul{
				li{
					display:block;
					> div{
						margin-top:10px;
					}
				}
			}
		}
	}
	
	
	
	#gimu{
		> p{
			text-align:left;
			}
		> ul{
			padding:20px;
			border:1px solid #F60;
			background:#FFC;
			margin-top:10px;
			border-radius: 10px;
			li{
				text-align:left;
				margin:1.5em 0 0 2em;
				list-style:decimal;
				&:nth-child(1){
					margin-top:0;
					}
				}
			}
	}

	.nyukyo_flow{
		> ul{
			display:grid;
			gap:20px;
			grid-template-columns: repeat(2,1fr);
			> li{
					&:last-of-type{
						grid-column: 1/3;
						> ul{
							padding:0 20px 20px 10px;
							margin:0 auto 0 auto;
							text-align: left;
							> li{
								margin:20px 0 0 2em;
								list-style:decimal;
								p{
									margin:10px auto 0 auto;
									padding:0;
								}
								> div{
									border:1px solid silver;
									padding:20px;
									margin:20px auto 0 auto;
									> ul{
										> li{
											margin:.5em 0 0 1em;
											list-style:disc;
										}
									}
								}
							}
							&:first-child{
								margin-top:0;
							}
						}
					}
					
			}
		}
		@media (max-width: 768px) {
			> ul{
				display:block;
				> * + *{
					margin-top:20px;
				}
			}
		}
	}