@charset "utf-8";

:root{
}

/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
	/*** main px ***/
	
	
	#preamble{
		width:auto;
		@media (max-width: 1200px) {
			width:auto;
			padding:30px 0 130px 0;
			}
		@media (max-width: 768px) {
			padding:20px 0 130px 0;
			}
		}
	
	#main_space{
		> div:has(> section){
			padding:80px 0;
			> section{
				width:var(--container-width);
				margin:0 auto;
				> aside{
					margin:20px auto 0 auto;
					text-align: right;
					a{
						display:inline-block;
						font-size: 1.1em;
						font-family: var(--font-family-minchou);
						background:rgba(255 255 255 / .7);
						border:1px solid silver;
						border-radius: 5px;
						color:rgb(var(--baceFontColor));
						padding:.3em .7em;
						&::after{
							display: inline-block;
            	content: "";
            	background-color: rgb(var(--baceFontColor));
        
            	-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-ArrowRight"><path d="M4 12h16"/><path d="M13 5l7 7-7 7"/></svg>');
            	-webkit-mask-size: contain;
            	mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-ArrowRight"><path d="M4 12h16"/><path d="M13 5l7 7-7 7"/></svg>');
            	mask-size: contain;
            	mask-repeat: no-repeat;
        
            	height: 1em;
            	width: 1em;
							vertical-align: -2px;
							margin:0 0 0 .3em;
            /*vertical-align: middle;  inline-block時、中央揃え 　　vertical-align: -2px;*/
						}
						&:hover{
							background:rgba(255 217 217 / .5);
						}
					}
				}
			}
		}
	}


	#top_img{
		padding:40px 0 0 0;
		@media (max-width: 710px) {
			padding:0;
		}
	}
	
	#breadcrumb{
		display:none;
	}
	
	#infobox{/*News*/
		width:min(860px,calc(100% - 40px));
		margin:0 auto;
		padding-bottom:80px;
		> h2{
			grid-column: 1/3;
		}
		div{
			display:grid;
			grid-template-columns: 1fr 300px;
			gap:20px;
			align-items: center;
			ul{
					border-bottom:1px dotted #bbb;
					li{
						padding:1em;
						border-top:1px dotted #bbb;
						text-align: left;
						time{
							display:block;
							font-size: .9em;
						}
						p{
							text-align: left;
						}
					}
			}
		}
		@media (max-width: 710px) {
			div{
				display:block;
				figure{
					margin:30px auto 0 auto;
				}
			}
		}
	}
	
	#top_menu{/*Menu*/
		background:#E6F0F0;
		background:url(grp/back_blue.jpg);
		> section{
			> div{
				display:grid;
				grid-template-columns: min(760px,70%) 1fr;
				gap:20px;
				align-items: end;
				> p{
					text-align: left;
				}
				> figure{
					text-align: right;
				}
			}
			> ul{
				margin:50px auto 0 auto;
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
				gap:20px;
				li{
					border:1px solid silver;
					border-radius: 10px;
					overflow: hidden;
					aspect-ratio: 3 / 2;
					position:relative;
					background:url(grp/icon_camera.png) center center no-repeat,#e9e7d6;
					a{
						display:block;
						height:100%;
						color:rgb(var(--baceFontColor));
						p{
							position:absolute;
							bottom:10px;
							right:10px;
							font-size: 15px;
							text-align: right;
							font-weight: 500;
							span{
								display:block;
								font-weight: normal;
								font-size: .9em;
							}
						}
					}
					&:hover{
						background: url(grp/image_baby.jpg) center / cover;
						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background: rgba(120, 105, 48 , 0.5); /* 黒の半透明（数値を増やすと暗くなる） */
					}
						a{
							color:white;
						}
					}
					&:nth-of-type(2){
						&:hover{
							background: url(grp/image_sitigo.jpg) center / cover;
						}
					}
					&:nth-of-type(3){
						&:hover{
							background: url(grp/image_nyugaku.jpg) center / cover;
						}
					}
					&:nth-of-type(4){
						&:hover{
							background: url(grp/image_seijin.jpg) center / cover;
						}
					}
					&:nth-of-type(5){
						&:hover{
							background: url(grp/image_kazoku.jpg) center / cover;
						}
					}
					&:nth-of-type(6){
						&:hover{
							background: url(grp/image_senzai.jpg) center / cover;
						}
					}
					&:nth-of-type(7){
						&:hover{
							background: url(grp/image_wedding.jpg) center / cover;
						}
					}
					&:nth-of-type(8){
						&:hover{
							background: url(grp/image_menu.jpg) center / cover;
						}
					}
					&:nth-of-type(9){
						&:hover{
							background: url(grp/image_animal.jpg) center / cover;
						}
					}
				}
			}
		}
		@media (max-width: 710px) {
			> section{
				> div{
					display:block;
					> figure{
						display:none;
					}
				}
				> ul{
					li{
						aspect-ratio: auto;
						a{
							background:white;
							padding:10px;
							display:block;
							p{
								position:relative;
								text-align: left;
								bottom:auto;
								right:auto;
							}
						}
					}
				}
			}
		}
	}
	
	#top_prf{/*プロフィール*/
		> section{
			> div#profile{
				margin:50px auto 0 auto;
				width:min(860px,100%);
				display:grid;
				grid-template-columns: 200px 1fr;
				gap:50px;
				> figure{
					span{
						display:block;
						border-radius:10px;
						overflow: hidden
					}
					figcaption{
						font-size: 1.1em;
						font-weight: 500;
						margin:.7em auto 0 auto;
						span{
							display:block;
							font-size: .9em;
							font-weight: normal;
						}
					}
				}
				> div{
					> * + *{
						margin-top:20px;
					}
					article{
						h4{
							font-size: 1.2em;
							font-family: var(--font-family-minchou);
							text-align: left;
							font-weight: 500;
							position:relative;
							span{
								display:inline-block;
								padding:0 .5em 0 0;
								background:white;
								position:relative;
								z-index: 2;
							}
							&::before{
								content:"";
								width:100%;
								height:1px;
								background:rgb(var(--baceFontColor));
								position:absolute;
								left:0;
								top:50%;
							}
						}
						h4 + *{
							margin-top:10px;
						}
						ul{
							li{
								display:grid;
								grid-template-columns: 10em 1fr;
								gap:0 1em;
								padding:.7em 0;
								> p{
									text-align: left;
									&:nth-of-type(1){
										text-align: right;
									}
								}
							}
						}
						p{
							text-align:left;
						}
					}
					
				}
			}
			> article{
				> h2{
					margin:80px 0 0 0;
					
					span{
						display:inline-block;
						border:1px solid silver;
						padding:.3em 1em;
						font-size: 1.3em;
						font-family: var(--font-family-minchou)
						}
					}
				ul{
					margin:50px auto 0 auto;
					display:grid;
					grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
					gap:40px;
					justify-content: center;
					li{
						> *{
							width:min(230px,100%);
							margin: 1em auto;
						}
						figure{
							img{
								width:90%;
								border-radius: 10px;
							}
							figcaption{
								margin-top:1em;
								font-size: 1.1em;
								font-weight: 500;
							}
						}
						p{
							text-align: left;
						}
					}
				}
			}
		}
		@media (max-width: 710px) {
			> section{
				> div#profile{
					display:block;
					> figure{
						width:min(230px,100%);
						margin:0 auto;
					}
					> div{
						margin:20px auto 0 auto;
					}
				}
			}
		}
	}
	
	#insta_space{/*旧インスタ　現ギャラリー*/
		background:url(grp/gallery_bg.jpg);
		> section{
			ul{
				li{
					a{
						display:block;
						> * + *{
							
							text-align: left;
							color:rgb(var(--baceFontColor));
						}
						figure{
							aspect-ratio: 1 / 1;
							position:relative;
							overflow: hidden;
							border-radius: 10px;
							background:white;
							img{
								min-width:100%;
								min-height:100%;
								object-fit: cover;
								position: absolute;
								top: 50%;
								transform: translate(0%, -50%);
							}
						}
						time{
							display:block;
							margin-top:1em;
						}
						p{
							margin-top:.5em;
							font-size: 1.1em;
						}
						&:hover{
							figure{
								img{
									opacity: .75;
								}
							}
						}
					}
				}
			}
		}
	}

	.slider {/*スライダー*/
		margin: 0 auto;
	
		.slick-slide {
			margin: 0 10px;
		}
		.slick-list{
			z-index: 5;
		}
		.slick-prev,
		.slick-next {
			z-index: 5;
			position: absolute;
			top: 40%;
			cursor: pointer;
			outline: none;
			border-top: 2px solid #666;
			border-right: 2px solid #666;
			height: 15px;
			width: 15px;
	
			&.slick-prev {
				left: 1.5%;
				transform: rotate(-135deg);
			}
	
			&.slick-next {
				right: 1.5%;
				transform: rotate(45deg);
			}
		}
	
		.slick-dots {
			text-align: center;
			margin: 40px 0 0 0;
	
			li {
				display: inline-block;
				margin: 0 5px;
	
				button {
					color: transparent;
					outline: none;
					width: 8px;
					height: 8px;
					display: block;
					border-radius: 50%;
					background: #ccc;
				}
	
				&.slick-active button {
					background: #333;
				}
			}
		}
	}
	
	#top_banner{
		padding-bottom:0 !important;
		> section{
			
			ul{
				width:740px;
				max-width:100%;
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
				gap:40px;
				margin:0 auto;
				li{
					a{
						img{
						}
						&:hover{
							img{
								opacity: .75;
							}
						}
					}
				}
			}
		}
	}