@charset "utf-8";

#top_image{
  width:min(640px,100%);
  margin:0 auto;
	img{
		border-radius: 10px;
	}
}

#gaiyou{/*組合概要*/
  > ul{
  	> li{
      display:grid;
      grid-template-columns: 11em 1fr;
      padding:15px;
      align-items: center;
      &:nth-of-type(odd){
        background:#eee;
      }
      h3{
        position:relative;
        text-align: left;
        padding:0 0 0 1.3em;
                &::before{
                    display: block;
            content: "";
            background-color: rgb(var(--mainColor));
        
            -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/></svg>');
            -webkit-mask-size: contain;
            mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/></svg>');
            mask-size: contain;
            mask-repeat: no-repeat;
        
            height: 1em;
            width: 1em;
        
            position: absolute;
            top: 50%;
            left: 0;
            margin-top:-.5em;
                }
      }
      p{
                text-align: left;
                i{
                    margin:0 .3em 0 0;
                }
                span{
                    @include font-size(18);
                }
      }
      > ul{
				display:flex;
				justify-content: start;
				gap:.3em 1em;
				flex-wrap:wrap;
				li{
					margin:0 0 0 2em;
					list-style:disc;
					text-align: left;
				}
      }
    }
    
    }
		@container (max-width: 800px) {
			> ul{
					> li{
							display:block;
							p,> ul{
									margin:0 0 0 1em;
							}
					}
			}
	}
}

#enkaku{/*沿革*/
    ul{
        border-bottom:1px dotted silver;
        li{
            display:grid;
            grid-template-columns: 10em 1fr;
            align-items: center;
            text-align: left;
            padding:15px;
            border-top:1px dotted silver;
        }
    }
    @container (max-width: 800px) {
        ul{
            li{
                display:block;
                h3{
                    font-weight: 500;
                }
            }
        }
    }
}

#access{
    p{
        text-align: left;
    }
    iframe{
        margin:10px auto 0 auto;
        width:100%;
        height:min(450px,90vh);
				border-radius: 10px;
    }
}