@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------------------------------------------

   Fonts

--------------------------------------------------------------------------------------------- */


/*Noto Sans JP 和ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

/*font-family: 'Zen Maru Gothic', sans-serif;*/



/*Noto Sans JP 和ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*font-family: 'Noto Sans JP', sans-serif;*/



/*Rubik Distressed　チョーク◎
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Rubik+Distressed&display=swap');

/*font-family: 'Rubik Distressed', cursive;*/



/*Rubik Dirt　チョーク〇
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');

/*font-family: 'Rubik Dirt', cursive;*/






/* ---------------------------------------------------------------------------------------------

   Wrap,Contents-wrap,Footer,Contents

--------------------------------------------------------------------------------------------- */

.wrap{
	width: 100%;
	overflow: hidden;
}

.contents-wrap{ /*レギュラーコンテンツ*/
	width: 100%;
	padding: 100px 0 75px 0;
	background-image: url(../images/blackboard.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

.Others-wrap{ /*その他のコンテンツ*/
	width: 100%;
	padding: 100px 0 75px 0;
	background-image: url(../images/blackboard.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

.footer-wrap{
	width: 100%;
	padding: 100px 0 75px 0;
	background-image: url(../images/blackboard.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

.contents1000{
	width: 1000px;
	margin: 0 auto;
}

@media screen and (max-width:1000px) {
	
.contents-wrap{
	padding: 100px 0 50px 0;
}
	
.Others-wrap{
	padding: 75px 0 50px 0;
}
	
.contents1000{
	width: 94%;
}
	
}

.contents1400{
	width: 1400px;
	margin: 0 auto;
}
@media screen and (max-width:1400px) {
	
.contents1400{
	width: 94%;
}
	
}

.contents700{
	width: 700px;
	margin: 0 auto;
}
@media screen and (max-width:700px) {
	
.contents700{
	width: 94%;
}
	
}





/* ---------------------------------------------------------------------------------------------

   各イラスト背景

--------------------------------------------------------------------------------------------- */

/* レギュラー
------------------------------------------------------------*/
.illust-light{
	position: absolute;
	top: 0;
	right: 15%;
	width: 400px;
}
.illust-light img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:1200px) {
	
.illust-light{
	width: 300px;
	right: 3%;
}
	
}

@media screen and (max-width:700px) {
	
.illust-light{
	width: 250px;
}
	
}


/* Other
------------------------------------------------------------*/
.illust-light02{
	position: absolute;
	top: 0;
	right: 47.5%;
	width: 75px;
}
.illust-light02 img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:1200px) {
	
.illust-light02{
	width: 60px;
}
	
}

@media screen and (max-width:700px) {
	
.illust-light02{
	width: 50px;
	right: 15%;
}
	
}


	
	

/* ---------------------------------------------------------------------------------------------

   H2,H3,shop-guid

--------------------------------------------------------------------------------------------- */

.eg-h2{
	width: 94%;
	margin: 0 auto;
	color: #fff;
	font-size: clamp(36px, 3vw, 60px);
	font-family: 'Rubik Dirt', cursive;
	font-weight: normal;
	line-height: 1.5;
	border-bottom: 0.5px solid #999;
}
h2 {/*和文*/
	width: 94%;
	margin: 10px auto 0 auto;/*10px auto 100px auto*/
	color: #fff;
	font-size: clamp(16px, 3vw, 20px);
	line-height: 1.5;
}
.eg-h2 img{
	width: 350px;
    height: auto;
    margin-bottom: 15px;
}

.shop-guid{
	width: 94%;
	margin: 25px auto 0 auto;
}
.shop-guid li{
	color: #ccc;
	line-height: 1.75;
	font-size: clamp(10px, 3vw, 14px);
}
.shop-guid li a{
	line-height: 1.75;
	font-size: clamp(10px, 3vw, 14px);
  background: -webkit-linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
  background-size:400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textAnime 5s infinite;
	font-family: 'Noto Sans JP', sans-serif;
}
@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@media screen and (max-width:1600px) {
	
.eg-h2 img{
	width: 300px;
}
	
}

@media screen and (max-width:1400px) {
	
.eg-h2 img{
	width: 250px;
    margin-bottom: 10px;
}
	
}

@media screen and (max-width:1000px) {
	
h2 {
	margin: 10px auto 0 auto;
}
    
.eg-h2 img{
	width: 250px;
}
	
}

@media screen and (max-width:700px) {
	
.eg-h2 img{
	width: 225px;
}
	
}



/* ---------------------------------------------------------------------------------------------

  EachTextAnime テキスト

--------------------------------------------------------------------------------------------- */

/*========= 1文字ずつ出現させるためのCSS ===============*/
.eachTextAnime span{
	opacity: 0;
}
.eachTextAnime.appeartext span{
	animation:text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}




/* ---------------------------------------------------------------------------------------------

   Pタグ他

--------------------------------------------------------------------------------------------- */

.xxxl-text{
	font-size: clamp(24px, 3vw, 30px);
}

.xxl-text{
	font-size: clamp(18px, 3vw, 24px);
}

.xl-text{
	font-size: clamp(16px, 3vw, 20px);
}

.l-text{
	font-size: clamp(14px, 3vw, 18px);
}

.m-text{
	font-size: clamp(12px, 3vw, 16px);
	line-height: 2;
}

.s-text{
	font-size: clamp(10px, 3vw, 14px);
	line-height: 2;
}




/* ---------------------------------------------------------------------------------------------

   Text カラー

--------------------------------------------------------------------------------------------- */

.white-text{
	color: #fff;
}
.beige-text{
	color: #e6d8c8;
}
.green-text{
	color: #bbbf86;
}
.blue-text{
	color: #c7dedf;
}
.gray-text{
	color: #eee;
}



/* ---------------------------------------------------------------------------------------------

   Br

--------------------------------------------------------------------------------------------- */

.br-1920{
	display: block;
}
.br-1400{
	display: none;
}
.br-1200{
	display: none;
}
.br-1000{
	display: none;
}
.br-700{
	display: none;
}
.br-500{
	display: none;
}
.br-400{
	display: none;
}
.br-350{
	display: none;
}

@media screen and (max-width:1400px) {
.br-1400{
	display: block;
}
}
@media screen and (max-width:1200px) {
.br-1200{
	display: block;
}
}
@media screen and (max-width:1000px) {
.br-1000{
	display: block;
}
}
@media screen and (max-width:700px) {
.br-700{
	display: block;
}
}
@media screen and (max-width:500px) {
.br-500{
	display: block;
}
}
@media screen and (max-width:400px) {
.br-400{
	display: block;
}
}
@media screen and (max-width:350px) {
.br-350{
	display: block;
}
}





/* ---------------------------------------------------------------------------------------------

   背景カラー

--------------------------------------------------------------------------------------------- */

.beige-back{
	background: #e6d8c8;
}
.green-back{
	background: #bbbf86;
}
.blue-back{
	background: #c7dedf;
}
.white-back{
	background: #fff;
}
.gray-back{
	background: #eee;
}