@charset "utf-8";


body{
    background-image: url(shikaku_image/haikeikumo.svg),linear-gradient(180deg, #F5FCFF 0%,#8de7fb 20% ,#c7fedb 98%,#F5FCFF 100%);
    background-repeat: no-repeat;
    background-size: cover;
    
    
  

}


/*
#shikakutext{
  position: absolute;
  top: 1100px;
  margin-left: 30px;
  color: #f9ffff;
  font-size: 20px;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
}*/

.menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #f9ffff;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #8de7fb;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
#menu-btn-check {
  display: none;
}



#top{
  font-family: 'Dela Gothic One', serif;
  font-size: 30px;
  text-align: center;
  margin-top: 180px;
  color:#f9ffff;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
 
}

#top2 {
  margin-top: 30px;
  
  margin: auto;
  
}

#topsetumei{
  font-family: 'Dela Gothic One', serif;
  font-size: 20px;
  text-align: center;
  margin-top: 210px;
  color:#f9ffff;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
}

#topsetumei2{
  font-family: 'Dela Gothic One', serif;
  font-size: 17px;
  text-align: center;
  margin-top: 40px;
  color:#f9ffff;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
}

.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
  margin-left: -9px;
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.cp_arrows .cp_arrow {
	position: relative;
	display: inline-block;
	padding-top: 1.8em;
	-webkit-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
	-webkit-animation: arrow-move06 2s 1s ease-in-out infinite;
	        animation: arrow-move06 2s 1s ease-in-out infinite;
	text-decoration: none;
	color: #26c6da;
	border-color: #26c6da;
}
.cp_arrows .cp_arrow:before {
	font-size: 2em;
	line-height: 1.9em;
	position: absolute;
	top: 0;
	left: 50%;
	width: 2em;
	height: 2em;
	margin-left: -0.7em;
	content: '▼';
	-webkit-transition: transform 0.5s ease-in;
	        transition: transform 0.5s ease-in;
	text-align: center;
	border: 0.13em solid #ffffff;
	border-color: inherit;
	border-radius: 10em;
}
.cp_arrows .cp_arrow:hover {
	color: #ec407a;
	border-color: #ec407a;
}
.cp_arrows .cp_arrow:hover:before {
	transform: rotate(360deg);
}
@-webkit-keyframes arrow-move06 {
	0% {
		top: 1%;
		opacity: 0.1;
	}
	70% {
		top: 5%;
		opacity: 1;
	}
	100% {
		top: 1%;
		opacity: 0.3;
	}
}
@keyframes arrow-move06 {
	0% {
		top: 1%;
		opacity: 0.1;
	}
	70% {
		top: 5%;
		opacity: 1;
	}
	100% {
		top: 1%;
		opacity: 0.3;
	}
}





carousel {
  /* 水平方向中央寄せ */
  display: flex;
  justify-content: center;
}

/* カルーセルの外枠 */
.carousel {
  width: 100%;
  height: 400px;
  display: flex;    /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  margin: 0 auto;   /* 水平方向中央寄せ */
}
/* カルーセル内の画像 */
.carousel img {
  margin: 0;
  padding: 0;
  display: block; /* imgタグの改行のすき間を消すため */
}
/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
  
  0% { margin-left: 0; }      
  
  28% { margin-left: -85%; } 
  33% { margin-left: -85%; }
  
  65% { margin-left: -175%; }
  70% { margin-left: -175%; }
  
  95% { margin-left: -270%; }
  100% { margin-left: -270%; }
}
/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel > :first-child {
  animation-name: scroll;    /* キーフレーム名 */
  animation-duration: 20s;  /* 再生時間全体は20秒 */
  animation-delay: 0s;      /* 読込直後から遅延無しで開始 */
  animation-iteration-count: infinite;  /* 無限に繰り返す */
}



#topkugiri img{
  margin-left: -9px;
  width: 100%;

}






#midashi1{
  font-family: 'Dela Gothic One', serif;
  font-size: 17px;
  margin-left: 10px;
  margin-top: 90px;
  color:#141e1e;
}



.chizu img{
  text-align: center;
  margin-top: 100px; 
  width: 90%; 

}


p{
 font-family: 'Dela Gothic One', serif;
  font-size: 16px;
  margin-top: 100px;
  color:#f9ffff;
}





#kategori img{
  margin-top: 10px; 
  width: 50%; 
  margin: auto;
  display: block;

}

#koumoku {
  margin-top: 50px;
  display: block;
  margin-bottom: 10px;
  text-align: center;
  margin-bottom: 50px;
  
}

#koumoku2 {
  margin-top: 50px;
  display: block;
  margin-bottom: 10px;
  text-align: center;
  margin-bottom: 50px;
  
}

#koumoku3 {
  margin-top: 50px;
  display: block;
  margin-bottom: 10px;
  text-align: center;
  margin-bottom: 50px;
  
}




#kugiri2 img{
  margin-left: px;
  margin-bottom: -55px;
  width: 50%;
  
 }

#topsetumei4{
  font-family: 'Dela Gothic One', serif;
  font-size: 20px;
  text-align: center;
  margin-top: 200px;
  color:#f9ffff;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
}

#topsetumei5{
  font-family: 'Dela Gothic One', serif;
  font-size: 15px;
  text-align: center;
  margin-top: 70px;
  color:#f9ffff;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
}

#midashi2{
  font-family: 'Dela Gothic One', serif;
  font-size: 25px;
  text-align: center;
  margin-top: 200px;
  color:#f9ffff;
  -webkit-text-stroke: 1px hwb(203 9% 82%);
  margin-bottom: 0px;
  
}

.sns {
  display: inline-block;
  height: 30px;
  margin-right: 10px;
  margin-bottom: 0px;
  
}


.sns img {
  margin-top: 70px;
  height: 100%;
  margin-left: 50px;
}




#topmodoru img{
  margin-left: 85%;
  width: 15%;
  margin-top: 10px;
  margin-bottom:10px;
}

#yashi{
  margin-bottom: 10px;
}

#rogo img{
 width: 25%;
 margin: auto;
 justify-content: center;
 display: block;
 margin-bottom: 20px;
  
}