@charset "utf-8";

:root{
	--lineColor:#FF5792;
}

#breadcrumb{
	display:none;
}

#preamble{
	width:auto;
	padding-top:0;
	main{
		> *{
			width:auto;
		}
	}
}

#top_img{
	overflow: hidden;
	position:relative !important;
	padding:2rem 0 0 0;
	div.swiper-slide{
		aspect-ratio: 3 / 2;
		border-radius: 1em;
		overflow: hidden;
	}
	@media (max-width: 768px) {
	}
}
.swiper-wrapper{
	position:static !important;
}
.swiper-button-next:after, .swiper-button-prev:after {/*左右の矢印変更！*/
	display: none;
 }
 .fa-arrow-circle-left,.fa-arrow-circle-right{/*矢印色変更*/
	 color:white;
	 &:hover{
		 color:var(--mainColor);
	 }
 }
 .swiper-button-prev, .swiper-rtl .swiper-button-next {/*矢印位置調整*/
	 left:50% !important;
	 margin-left:-580px;
	 @media (max-width: 1200px) {
		 left:20px !important;
		 margin-left:0;
	 }
 }
 .swiper-button-next, .swiper-rtl .swiper-button-prev{/*矢印位置調整*/
	right:50% !important;
	margin-right:-580px;
	@media (max-width: 1200px) {
		right:20px !important;
		margin-right:0;
	}
 }

 @media print {
  .swiper-button-next, .swiper-button-prev, .swiper-pagination {
    display: none !important;
  }
}


#about{
	background:url(../../img/pages/top/matinami.png) bottom center repeat-x,url(../../img/pages/top/kousi.png),#ffeef5;
	padding:5em 0;
	margin:3em auto 0 auto;
	position:relative;
	div.flowing-bg-text-container {
    position: absolute; 
		font-size: 18em; 
    bottom: 5rem;
    left: 0;
    width: 100%;
		line-height: 1em;
    height: 1em;
		
    overflow: hidden;
    
    /* テキストを薄く、背景に馴染ませるための設定 */
    opacity: 0.2; /* 透明度 */
    color: rgb(var(--mainColor));
    pointer-events: none; /* ★重要★ テキストの上にマウスが乗っても反応しないようにする */
		p.flowing-text {
    	
    font-weight:600; 
    
    white-space: nowrap; 
    position: absolute; 
    
    top: 50%;
    transform: translateY(-50%);
    
    width: calc(100vw + 8em); 
    left: -4em;/*EEAMSは英語なので4文字分でいいかも*/
    
    height: 1em;
        
        span {
           position: absolute;
        right: 0; 
        
        animation: marquee 45s linear infinite; /* 時間は適宜調整 */
        will-change: transform;
        }
		}
	}
	div.content-box{
		h2{
		--clamp-max: 40;
		--clamp-min: 28;
		font-size: var(--clamp);
		font-weight: 600;
		i{
			font-size: .5em;
			margin:0 .3em 0 0;
			font-weight: 400;
			display:block;
		}
		span{
			font-size: .5em;
			font-weight: 400;
		}
		}
		> p{
			&:nth-of-type(1){
				margin:1rem auto 0 auto;
				font-size: 1.4em;
				font-weight: 500;
			}
			&:nth-of-type(2){
				text-align: left;
				width:min(860px,calc(100% - 4rem));
				margin:1rem auto 0 auto;
				font-size: 1.2em;
				font-weight: 400;
			}
		}
		> div{
			display:grid;
			grid-template-columns: minmax(0, 1fr) 250px;
			gap:2em;
			width:min(860px,calc(100% - 4rem));
			margin:2rem auto 0 auto;
			> div{
				border-radius: .7em;
				border:1px solid #eee;
				background:white;
				&:nth-of-type(1){
					padding:2rem;
					position:relative;
					h3{
					text-align: left;
					font-size: 1.2em;
					font-weight: 400;
					&::before {
            display: inline-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 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z"/></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 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z"/></svg>');
            mask-size: contain;
            mask-repeat: no-repeat;
        
            height: 1em;
            width: 1em;
						margin:0 .5em 0 0;
						vertical-align: -2px;
          }
					}
					ul{
						margin:1em auto 0 auto;
						padding-bottom:200px;
						> * + *{
							margin-top:.5em;
						}
						li{
							margin-left:2em;
							list-style:disc;
							text-align: left;
						}
					}
					figure{
					position:absolute;
					bottom:10px;
					right:10px;
					}
				}
				&:nth-of-type(2){
				padding:1.5em;
				position:relative;
				z-index: 5;
				figure{
					a{
						display:inline-block;
						position:relative;
						&:hover{
							opacity: .75;
						}
						&::after{
							content:url(../../img/pages/top/icon_pdf.png);
							position:absolute;
							right:-30px;
							top:-40px;
						}
					}
					figcaption{
						font-size: 1.1em;
						font-weight: 400;
						margin:.5em auto 0 auto;
						aside{
							font-size: .8em;
							font-weight: 300;
						}
					}
				}
				> a{
					background:rgb(var(--baceFontColor));
					color:white;
					padding:.3em;
					border-radius: .5em;
					display:block;
					margin:.5em auto 0 auto;
					font-weight: 400;
					svg{
						vertical-align: -2px;
					}
					&:hover{
						background:#666;
					}
				}
				> aside{
					font-size: .8em;
					margin:.5em auto 0 auto;
				}
				}
			}
		}
		
	}
	@media print {
		padding:3rem 0;
	}
	@media (max-width: 650px) {
		div.content-box{
			> div{
				display:block !important;
				> div{
					&:nth-of-type(2){
						margin:2rem auto 0 auto;
						figure{
							width:min(200px,100%);
							margin:0 auto;
						}
					}
				}
			}
		}	
	}
}

@keyframes marquee {
    /* 0% (開始時): 右の画面外（親要素の幅の100%）に位置する */
    0% {
        transform: translate3d(0, 0, 0);
    }
    
    100% {
        transform: translate3d(calc(-100vw - 4em), 0, 0);
    }
}

#options{
	background:url(../../img/pages/top/yama.png) bottom center repeat-x,#fdfcf2;
	> div{
		width:var(--container-width);
		padding:8em 0;
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
		gap:1.5em;
		margin:0 auto;
		section{
			background:#ed2e23;
			overflow: hidden;
			border-radius: .7rem;
			a{
				display:block;
				padding:1rem;
				transition: all .5s ease-out;
				background:url(../../img/pages/top/maru_yellow.png) left -70px top -70px no-repeat;
				figure{
					aspect-ratio: 3 / 2;
					border-radius: .7em;
					overflow: hidden;
					color:white;
				}
				h3{
					font-size: 1.2em;
					font-weight: 500;
					color:white;
					inline-size: fit-content;
					margin-inline: auto;
					text-align: left;
					margin:.7em auto 0 auto;
				}
				p{
					font-weight: 400;
					color:white;
					margin:.5em auto 0 auto;
					padding-right:4em;
					text-align: left;
					position:relative;
					&::before{
						display: inline-block;
            content: "";
            background-color: white;
        
            -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33"><path d="M16.5,33C7.4,33,0,25.6,0,16.5S7.4,0,16.5,0s16.5,7.4,16.5,16.5-7.4,16.5-16.5,16.5ZM16.5,3c-7.44,0-13.5,6.06-13.5,13.5s6.06,13.5,13.5,13.5,13.5-6.06,13.5-13.5S23.94,3,16.5,3Z"/><path d="M14.25,24c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94-4.94-4.94c-.59-.59-.59-1.54,0-2.12.59-.59,1.54-.59,2.12,0l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
            -webkit-mask-size: contain;
            mask-image: url('data:image/svg+xml;utf-8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33"><path d="M16.5,33C7.4,33,0,25.6,0,16.5S7.4,0,16.5,0s16.5,7.4,16.5,16.5-7.4,16.5-16.5,16.5ZM16.5,3c-7.44,0-13.5,6.06-13.5,13.5s6.06,13.5,13.5,13.5,13.5-6.06,13.5-13.5S23.94,3,16.5,3Z"/><path d="M14.25,24c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94-4.94-4.94c-.59-.59-.59-1.54,0-2.12.59-.59,1.54-.59,2.12,0l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
            mask-size: contain;
            mask-repeat: no-repeat;
        
            height: 2em;
            width: 2em;
        
            position: absolute;
            top: 50%;
            right: 1rem;
            margin-top:-1em;
            
            /*vertical-align: middle;  inline-block時、中央揃え 　　vertical-align: -2px;*/
					}
				}
				&:hover{
					background:url(../../img/pages/top/maru_yellow.png) left -40px top -40px no-repeat;
					p{
						&::before{
							background:yellow;
						}
					}
				}
			}
		}
	}
	@media print {
		> div{
			padding:3em 0;
			section{
				border:2px solid red;
			}
		}
	}
	@media (max-width: 800px) {
		> div{
			grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr)) !important;
		}
	}
}

#top_prf{/*About Us*/
	padding:5em 0;
	background:url(../../img/pages/top/tree.png) center right no-repeat,#fffbd5;
	section{
		margin:0 auto;
		width:var(--container-width);
		> h3{
			--clamp-max: 35;
			--clamp-min: 25;
			font-size: var(--clamp);
			font-weight: 500;
			span{
				font-size: .6em;
				display:block;
			}
		}
		> div{
			display:grid;
			grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
			gap:3em;
			margin:0 auto;
			margin:3em auto 0 auto;
			figure{
				aspect-ratio: 3 / 2;
				background:silver;
				border-radius: .7em;
				overflow: hidden;
				box-shadow: 7px 7px 0 0 orange;
			}
			div{
				h3{
					font-size: 1.7em;
					font-weight: 600;
					span{
						font-size: .5em;
						font-weight: 300;
						display:block;
					}
				}
				> p{
					margin-top:1rem;
					font-weight: 500;
					font-size: 1.3em;
				}
				dl{
					margin-top:1.5rem;
					border-bottom:1px solid silver;
					div{
						display:grid;
						grid-template-columns: 6em 1fr;
						border-top:1px solid silver;
						align-items: center;
						dt,dd{
							padding:.5em;
						}
						dd{
							text-align: left;
							span{
								a{
									font-weight: 400;
									font-size: 1.2em;
								}
							}
						}
					}
				}
			}
		}
	}
	@media print {
		padding:3rem 0;
	}
}