@charset "utf-8";

*{
    margin: 0;
    padding:  0; 
}

img{
    max-width:100%;
    height:auto;
    vertical-align: bottom;
}

a{
	text-decoration: none;
}

.copyright small{color:  black;
	display: block;
	text-align: center;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: black;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 10px;
  right: 0px;
  left: 0;
  margin: auto;
  text-align: center;
}

h1{
	display: block;
	text-align: center;
}
h2{
	display: block;
	text-align: center;
	margin-bottom: 20px;
}
h3{
	display: block;
	text-align: center;
	color: tomato;
	text-decoration:underline;
    text-decoration-color: tomato;
}

.nav-list li a{
	color: orangered;
}

.nav-toggle{
	display: none;
}
.btn-burger{
	position:absolute;
	padding-top: 50px;
	top:60px;
	left:30px;
	z-index: 2;
	display: block;
	width:44px;
	height:44px;
	background-image: url("../img/burger.svg");
	background-repeat: no-repeat;
	background-position:  center center;
	background-size: 35px 20px;
	cursor: pointer;
}
.nav-toggle:checked ~ .btn-burger{
	background-image:url("../img/close.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 26px 26px;
}
.nav{
	padding-top:10px;
	margin-bottom: 30px;
}
.nav-list{
	display: none;
	margin:0;
	padding-bottom: 10px;
	
}
.nav-list li{
	margin:0;
	padding:10px;
}
.nav-list a{
	display: block;
	color:black;
}
.nav-toggle:checked ~ .nav .nav-list{
	display: block;
}

.footer_01{
	width: 300px;
}

.footer-sns{
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.footer-sns a{
	margin-right: 10px;
}

/*--------------------------/
	共通の設定/=iPhone 320px(縦)からの設定 /
-------------------------- */
.TextTyping{
	margin: 20px 20px;
	line-height: 1;
	width: auto;
}

.TextTyping span {
	display: none;
}

.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

.wrapper{
	max-width: 600px;
	padding-left: 30px;
	padding-right: 100px;
	margin-left: auto;
	margin-right: auto;
}
.textrain{
	max-width: 100px;
	padding-left: 1px;
	padding-right: 1px;
	margin-left: 1px;
	margin-right: 1px;
}


.webshop{
	margin-top: 20px;
	padding-left: 30px;
	padding-right: 15px;
	width: 220px;
}
.contact_us{
	padding-top: 50px;
	margin-right: 10px;
	width: 170px;
}
.footer_01{
	display: flex;
	width: 500px;
}

.title{
	margin-bottom: 20px;
}

.yannoka{
	width: 400px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
	margin-left: 60px;
}

.study_hard_cat_01{
	width: 400px;
	padding-top: 20px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.copyright{
	display: none;
}

span{
	color: orangered;
}
.footer-sns{
	background-color:white;
	padding: 10px 0px;
	width: 300px;
	margin: 0 auto;
	border-radius: 8px;
	margin-bottom: 20px;
}

.footer_01{
	margin-bottom: 20px;
}



.event_01{
	width: 480px;
	margin: 0 auto;
	margin-bottom: 60px;
}


/*
--------------------------
	タブレット / iPad 768px(縦)から1023pxまでの設定 /
-------------------------- */

@media screen and (min-width:768px){
	.TextTyping{
		display: none;
	}
	.textrain{
		display: none;
	}
	.footer_01{
		margin: 0 auto;
	}
	
	.copyright{
		display: block;
	}
	.webshop{
		padding-left: 60px;
	}
	
	.btn-burger{
		display: none;
	}
	.nav{
		padding: 40px 0;
	}
	.nav-list{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	.nav-list li{
		flex: 0 1 auto;
		padding: 0 20px;
		line-height: 1;
/*		border-right: 1px solid black;*/
	}
	.nav-list li:first-child{
/*		border-left: 1px solid black;*/
	}
	.nav-toggle:checked ~ .nav .nav-list{
		display: flex;
	}
	
	.footer-sns{
	background-color: transparent;
	padding: 10px 0px;
	width: 300px;
	margin: 0 auto;
	margin-bottom: 20px;
	border-radius: 8px;
}

	.footer_01{
		display: none;
	}
	
	.study_hard{
		margin-bottom: 30px;
	}
	
	.yannoka{margin-left: 80px;}
	
	
	
@keyframes bgchange{
      0%   {background:#ffe6e1;}/*変化させたい色*/
      25%  {background:#fdcb9e;}/*変化させたい色*/
      50%  {background:#fdcbc1;}/*変化させたい色*/
      75%  {background:#ffff8c;}/*変化させたい色*/
      90%  {background:#b2dffb;}/*変化させたい色*/
      100% {background:#ffe6e1;}/*変化させたい色*/
	}
	
	body{
	animation: bgchange 10s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
	}
	
	
}