@charset "UTF-8";

body {
  		/* 方眼紙模様に必須のスタイル */
  		background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                  		  linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  		background-size: 16px 16px;
 		background-repeat: repeat;
 		background-position: center center;

 		 /* 以下任意のスタイル */
  		padding: 20px;
		}
	
	
html, body{
					height:100%
					margin:0;
					padding:0;
					font-family: "Sawarabi Gothic", sans-serif;
  					font-weight: 400;
  					font-style: normal;
				}
	
header{
				display:flex; /*固定*/
				width:100%;
				height:50px;
				background-color:#ffffff;
				align-items:center;
				justify-content:space-between;
				position:fixed;
				top:0;
				left:0;
				z-index: 1000;
				box-shadow: 0 2px 5px rgba(0,0,0,0.1);   /*影をつけて見やすくする*/
				}
				

				
#about-section{
				scroll-margin-top:70px;
				}


.logo{
			width:25%;
			height:auto;
			top:20px;
			left:20px;
			margin-right:auto;
			}
			
@media screen and (max-width: 650px){
.logo{
		min-width:150px;
		margin-left:-10px;
		margin-right:0;
		}
}
			
a{
	font-weight:bold;
	text-decoration:none;
	color:#4169e1;
	}
	
@media screen and (max-width: 480px){
a{
	font-size:5%;
	}
}
	
a:hover{
		color:#ff0099;
		text-decoration:underline;
		}	

			
.nav{
		margin:0;
	}

@media screen and (max-width: 480px){
.nav{
		margin-left:3px;
		margin-right:3px;
		}
}

body {
 	 		display: flex;
  			flex-direction: column;
			min-height: 100vh;
 	 	}
 	 	
main{
			flex:1;
			}

.menu-item {
 			list-style: none;
			display: inline-block;
 			padding: 10px;
 			margin-right:30px;
			}
			
@media screen and (max-width: 480px){
.menu-item{
		padding:0 3px;
		margin-right:5px;
		}
}

.hero{
		position:relative;
		width:100%;
		display:flex;
		}

.back{
		display:block;
		width:100%;
		display:block;
		margin-top:60px;
		}
		
		
.haichi{
		position:absolute;
		top: 55%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	width:90%;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	gap:15%;
		}
		
@media screen and (max-width: 480px){
.back{
		margin-top:16%;
}

.haichi{
		top:65%;
		gap:5%;
		
		}
}
		
.illust{
		position:relative;
		width:45%;
		aspect-ratio:1 / 1;
		}
		
		
.illust img{
			position:absolute;
			height:auto;
			object-fit:contain;
			}
		
		
.glass{
    	width:100%; 
    	top:0%;
    	left:0;
    	z-index:2;
		}
		
		
.kirakira{
			width:26%;
			top:5%;
			left:5%;
			}
			
.kirakira2{
			width:20%;
			top:60%;
			left:80%;
			}
			
.kirakira,.kirakira2{
						display:none;
					}

		
.sentence2{
    		display: flex;
   		 	flex-direction: column; 
   		 	gap:5%;              
    		justify-content: center;
    		width:45%;
    		height:auto;
    		padding:0;
			}
			
.sentence2 img{
				width:70%;
				height:auto;
				margin-bottom:5px;
			}	
		
		
/*body About*/
		
.container{
			position: relative;
			margin:70px 0 30px 0;	
			text-align:center;
			width:100%;
			}
			
@media screen and (max-width: 480px){
.container{
			margin:40px 0 30px 0;
		}
}

.about{
			display:inline-block;
			width:30%;
			height:auto;
			margin:40px 0 5px;
			z-index: 3;  
			position:relative;
			}
			
@media screen and (max-width: 480px){
.about{
		min-width:100px;
		margin-top:-3%;
		}
}
			
.overlay-1{
			position:relative;
			width:100%;
			}

.sentence{
					position:relative;
					z-index:2;
					font-size:22px;
					line-height:40px;
					margin:10px auto 20px auto;
				}
				
				
@media screen and (max-width: 480px){
.sentence{
			font-size:15px;
			line-height:25px;
			margin:10px 5px 20px 5px;
			}
}
				
.aboutback{
  position: relative;
  display: inline-block;
  margin: -100px auto 0 auto;
  padding:50px 10px 30px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffffcc;
  width:100%;
  box-sizing: border-box;
}

@media screen and (max-width: 480px){
.aboutback{
			margin:-55px auto 0 auto;
			}

}

.aboutback:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  border: 60px solid transparent;
  border-top: 60px solid #ffffcc;
}

	
/*body Topic*/
		
.topic-wrapper {
  display: flex;             /* 横並びにする */
  align-items: center;       /* 縦方向中央揃え */
  justify-content: flex-start; /* 左寄せしたい場合 */
  margin: 120px 0 30px 0;         /* 上下左右の余白 */
}

@media screen and (max-width: 480px){
.topic-wrapper{
				margin:80px 0 30px 0;
				}
}

.line-left{
			flex:1;
			height: 10px;               /* 線の太さ */
  			background-color: #006600;   /* 線の色 */
  			border-top: solid 2px #006600; /* 上下に線を少し太くする */
  			border-bottom: none;
			}

.line-right {
  flex: 30;                   /* 画像の左右に自動で広がる */
  height: 10px;               /* 線の太さ */
  background-color: #006600;   /* 線の色 */
  border-top: solid 2px #006600; /* 上下に線を少し太くする */
  border-bottom: none;
			}

.topic {
  		width:30%;             /* 画像の幅 */
  		height: auto;
  		display: block;
  		margin: 0 40px;            /* 線との間隔 */
  		position: relative;
  		z-index: 2;                /* 線より前面に表示 */
		}
		
@media screen and (max-width: 480px){
.topic{
		min-width:100px;
		margin:0 20px 0 20px;
		}
}

		
#topic {					/* Topicのスクロール位置調整用 */
  scroll-margin-top: 60px; /* 上から100px下げてスクロール */
}


		
		
.syokai{
		width:85%;
		height:20%;
		background-color:#f5f5f5;
		display:flex;
		gap:10%;
		align-items:center;
		padding-right:7%;
		padding-left:7%;
		margin:0 auto 30px auto;
		}
		
@media screen and (max-width: 790px){
.syokai{
		gap:5%;
}

.syokai > img{
				width:30% !important;
				
		}

.arrow_s_b{
			top:-25px;
			}
}
		
@media screen and (max-width: 610px){
.syokai{
		display:flex;
		flex-direction:column;
		align-items: center;
      	text-align:center;
		}
		
 .syokai .tate {
     			 order: 1;
      			width: 90%;
  				}
  				
.syokai img{
			width:auto;
			}
		

.syokai > img {
      			order: 2;
      			width: 50% !important;
      			transform: translateX(-80px);
  				}


  .arrow_s_b {
     			order: 2;
     			position:relative;
     			top:-40px;
      			margin-top:-10px;
  				}

  /* tate内の画像を大きくしすぎない */
  .tate img{
      		transform: none;
      		width:12% !important;
      		height: auto;
  			}
}
			
.tate{
		width:45%;
		height:15%;
		display:flex;
    	flex-direction: column;
    	align-items: flex-start;
    	gap:50px;
    	align-self:flex-start;
}
		
.tate img{
		transform: scale(4);
    	transform-origin: left top;
		height:auto;
		margin-bottom:10%;
		}
		
		
.tate p{
			font-size:25px;
			margin:20px 20px 20px 40px;
			}
			
@media screen and (max-width: 790px){
.tate{
		width:80%;
		gap:20px;
	}

.tate img{
			transform:scale(5);
			}
			
.tate p{
		font-size:20px;
		margin:30px 10px 10px 30px;
		}
}
			
@media screen and (max-width: 480px){
.tate{
		width:95%;
		gap:38px;
		}

.tate p{
		font-size:15px;
		margin:10px 2px 10px 10px;
		}

}
			
.syokai img{
			width:18%;
			height:auto;
			margin:10px;
			}
			
.syokai img:not(.husen){
		margin-top:25px;
}


.arrow_s_b {
  			position: relative;
 			display: inline-block;
  			padding-left: 88px;
  			align-self:flex-end;
  			margin-bottom:5%;
  			margin-left:8%;
			}
			
.arrow_s_b:before {
  content: '';
  width:clamp(60px, 7vw, 150px);
  height:clamp(60px, 7vw, 150px);
  background: #ffda3a; /*円の背景*/
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.arrow_s_b:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width:
    			clamp(10px, 1.5vw, 18px)
    			0
    			clamp(10px, 1.5vw, 18px)
    			clamp(20px, 3vw, 35px);
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top:50%;
  left: clamp(20px, 2.5vw, 35px);
  transform: translateY(-50%);
  /*bottom:auto;*/
}

.arrow_s_b:hover:before{
					background:#fff;
				}
				
.arrow_s_b:hover:after{
						border-color: transparent transparent transparent #ffda3a;
						}

.syokai img.godimg{
				width:35%;
				margin-left:-130px;
				margin-right:-40px;
				padding-bottom:30px;
			}

.syokai img.kokeshi{
		width:12%;
		height:auto;
		margin:10px 70px 0 40px;
		}
		
@media screen and (max-width: 790px){
.syokai img.godimg{
		width:35% !important;
		margin-left:-30px;
		margin-right:-30px;
		padding-top:10px;
		}
.syokai img.kokeshi{
		width:20% !important;
		}
}
		
@media screen and (max-width: 480px){
.syokai img.godimg{
					width:60% !important;
					padding-bottom:65px;
					}
					
.syokai img.kokeshi{
					width:30% !important;
					padding-left:50px;
					}
}
		
.finish{
		border:none;
		height: 12px;               /* 線の太さ */
  		background-color: #006600;   /* 線の色 */
  		width:100%;
  		margin:40px 0 40px 0;
		}
		
footer{
		width:100%;
		background-color:#cef9dc;
		justify-content: center;
		display:flex;
		gap:7%;
		padding-top:50px;
		padding-bottom:20px;
		margin:50px 0 0 0;
		position:relative;
		z-index:4;
		}
		
footer a{
			display:inline-block;
			width:auto;
		}
		
footer img:hover{
				transform:scale(1.2);
				}
	
.official{
			width:40%;
			max-width:380px;
			/*min-width:100px;*/
			height:auto;
			display:block;
		}
		
.foot{
		display:flex;
		flex-direction:column;
		line-height:2.5;
		align-items:center;
		margin-top:-30px;
		margin-left:-100px;
		}
		
.foot p{
		font-size:20px;
		}
		
.foot img{
			width:75%;
			max-width:380px;
			/*min-width:100px;*/
			height:auto;
			}
			
.scrollup {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.scrollup.on {
  transform: translateY(0);
  opacity: 1.0;
}
		
@media screen and (max-width: 480px){
footer{
		width:90%;
		display:flex;
		justify-content: space-between; /* 左右に配置 */
    	align-items: flex-start;
    	padding:30px 20px;
    	gap:2%;
		}
		
.official-link{
				display:inline-block;
				}

.official{
			display:block;
			padding-left:20px;
		}
			
.foot{
		padding-right:30px;
		width:45%;
		gap:5px;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		align-self: center;
		}
		
.foot p{
		font-size:12px;
		white-space:nowrap;
		margin-left:-20px;
		margin-top:8px;
		margin-bottom:-10px;
		}
}