@charset "utf-8";

body,h1,h2,p,ul,ol{
  margin: 0;
  padding: 0;}

body{/* background-image:url(../images/43110.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed; */

 /*background-color: rgb(77, 179, 238); */
/* 	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans',
  'ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic';} */

  font-family: "M PLUS Rounded 1c";  }


/* 波アニメーション */
  svg {
    margin-top: 220px;
    height: 200px;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
  }
  
  .header_text{
    font-family: 'Kaisei Decol', serif;
    font-family: 'Kaisei HarunoUmi', serif;
    font-family: 'Pacifico', cursive;
    font-family: 'Satisfy', cursive;
    padding-top: 20px;
    text-align: center;
    font-size: 150px;
    color: #5c534e;
  }
  
  
 /*  body {
    font-family: 'Merienda', cursive;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  } */
  /* a {
    color: rgb(235, 233, 113);
  } 
    */

  
  
    .yellow_wapper{
      margin-top: 330px;
      margin-bottom: 60px;
      background-color: rgb(243, 227, 137); 
    }
    /* header */
    header{width: 1250px;
    margin: 40px 0;}
    
    .header_img{
      width: 100%;
    }
    /* nav */
    nav ul{display:flex;
      margin: 0 auto;
      /* padding: 5px 0; */
      /* padding-left: 110px; */
      list-style: none;
      margin-left:550px;
      }
      
    nav li{font-weight:bold;
      padding-left: 50px;
      /* text-shadow: 
      rgba(151, 50, 50, 0.911) 2px 0px 0px; */
      font-size:25px;
    }
    
    nav li a{display: block;
      color:rgb(199, 119, 119);
      transition: 0.5s;
      text-align: center;
      text-decoration: none;
      }
    
    a:hover{color:  rgba(238, 185, 150, 0.911);}
    
    .cozyspace-message{
      margin-left: 50px;
    }
    
    .mannaka_1{ 
      width: 1000px;
      margin:0 auto;
    }

/* トップページ 
.top {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
 
video {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  background: url('../images/ihfh53.png') no-repeat;
  background-size: cover;
  z-index: -1;
}
 
.bg-white {
  background: rgba(255, 255, 255, 0.50);
  width: 500px;
  margin: 0 auto;
  position: absolute;
  top: 70px;
  left: 380px;
  padding: 20px;
  margin: 20px ;
  width: 500px;
  border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) 
  width:  500px;       /* ※縦横を同値に 
  height: 500px;       /* ※縦横を同値に 
}
 */

 .dt_box{
   text-align: center;
 }



  /* 講座紹介 */
  .movie_box{
    margin-top: 100px;
    margin-bottom: 60px;
    background-color: rgb(243, 227, 137);
  }

  .Course_box{
    margin-bottom: 50px; 
    border-radius: 1em;
    background-color: rgb(255, 255, 255);
    width: 700px;
    margin: 0 auto;
    padding: 70px;
    border-bottom:dashed 5px rgb(202, 87, 66);
  }

  
/* dt{font-size: 40px;
  color: rgb(202, 87, 66);
  
} */

/* 見出し */
dt {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
  font-size: 40px;
  color: rgb(202, 87, 66);
}

dt:before,
dt:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

dt:before {
  left: 0;
}

dt:after {
  right: 0;
}



.col-automy-1{
  margin-bottom: 50px;
}

.sentaku{
  text-align: center;
}

.col-auto my-1{
  margin-bottom: 50px;
}

/* 講座選択デザイン */
select {
  font-size: 17px;
  outline: none;
  margin: 0 auto;
  color: #EC6F66;
  width: 310px;
  padding: 15px;
  height: 50px;
  cursor: pointer;
  background: url(http://sharpik.com/wip/cuteselect/arrow.png) 295px 12px no-repeat rgb(250, 249, 248);
}

select:hover {
  background-color: transparent;
  color: white;
  padding: 15px 5px 15px 25px;
}

select option {
  font-size: 20px;
  text-align: center;
  background-color: white;
  color: rgb(167, 104, 89);
  width: 310px;
  padding: 10px 15px;
  height: 20px;
  cursor: pointer;
}










/* .Box1 {
  margin-bottom: 50px;
}

.Box2 {
  margin-bottom: 50px;
}

.Box3 {
  margin-bottom: 50px;
} */


/* クリエイター紹介 */
/* 画像並べる */
/* .creator_box{
  width: 1000px;
  margin:0 auto;
  margin-top: 260px;
  background-color:gb(231, 229, 107); 
} */

.creator_box{
  margin:0 auto;
  margin-top: 330px;
  background-color: rgb(243, 227, 137);
  padding: 10px ,0,0,0;
}


.cozyspace-wrapper2{
  background-color: #eeb26e;
} 

.cozyspace-wrapper3{
  background-color: #ee957f;
}




.container{
  margin-left: 150px;
  margin-bottom: 40px;
}

.container .text_container a{
  display: block;
  color:rgb(255, 255, 255);
  transition: 0.5s;
  text-align: center;
  text-decoration: none;
}

.container .text_container{
  margin-left: 50px;
}

.container a:hover{color:  rgba(76, 182, 243, 0.945);}

.cozyspace-img {
  margin-top: 30px ;
  width: 500px;
  border-radius: 50%;   /* 角丸半径を50%にする(=円形にする)  */
  width:  500px;        /* ※縦横を同値に  */
  height: 500px;        /* ※縦横を同値に  */
}

.cozyspace-img.cozyspace-message{
    display: inline-block;
    vertical-align:middle;
  }

.cozyspace-message h2{
  font-size:40px;
}

.cozyspace-message{
  margin: 0 80px;
 }

  /* container2 */

.container2 .text_container a{
  /* display: block; */
  color:rgb(255, 255, 255);
  transition: 0.5s;
  text-align: center;
  text-decoration: none;
}

/* 文字位置必要 */
.container2 .text_container{
  margin-left: 140px;
  margin-top: 20px;
}

.container2 a:hover{color:  rgba(76, 182, 243, 0.945);}

.main_img{
  height: 70px;
}


.cozyspace-message2 .text_container{
font-size:30px;
}







/* 画像に文字*/
  .container {
    width: 500px;
    border-radius: 50%;  
    width:  500px;     
    height: 500px;
    overflow:		hidden;
    margin:			0 0 10px 16px;
    position:		relative;
  }

  
  .container .text_container {
    font-size:		130%;
    text-align: 		center;
    color:			#fff;
  }


  .container .cozyspace-message {
    margin: 15px;
    width: 480px;
    border-radius: 50%;  
    width:  460px;     
    height: 380px;
    position:		absolute;
    top:			0;
    left:			0;
    opacity:		0;	/* マスクを表示しない */
    background-color:	rgba(0,0,0,0.4);
    -webkit-transition:	all 0.6s ease;
    transition:		all 0.6s ease;
  }
  .container:hover .cozyspace-message  {
    transform: scale(1.1);
    opacity:		1;	/* マスクを表示する */
    padding-top:		80px;	/* ホバーで下にずらす */
  }





  .container2 {
    padding-left: 600px;
    width: 600px;
    border-radius: 50%;  
    width:  650px;     
    height: 600px;
    overflow:		hidden;
    /* margin:			0 0 0px 0px; */
    position:		relative;
  }
  .container2 .text_container {
    font-size:		130%;
    text-align: 		center;
    color:			#fff;
  }




  .container2 .cozyspace-message2 {
    margin: 15px;
    width: 620px;
    border-radius: 50%;  
    width:  455px;     
    height: 385px;
    
    position:		absolute;
    top:			0;
    left:			0;
    opacity:		0;	/* マスクを表示しない */
    background-color:	rgba(0,0,0,0.4);
    -webkit-transition:	all 0.6s ease;
    transition:		all 0.6s ease;
  }
  .container2:hover .cozyspace-message2  {
    margin-left: 620px;
    margin-top: 50px;
    transform: scale(1.1);
    opacity:		1;	/* マスクを表示する */
    padding-top:		80px;	/* ホバーで下にずらす */
  }

/* 画像横名前 */
  .zennbu{
    display: flex;
    margin-left: 100px;
    color: rgb(255, 255, 255);
    
  }

  .yokomozi{
    margin-left: 200px;
    margin-top: 200px;
    font-size: 50px;
  }





/* 商品紹介 */

.shop{
  padding-top: 50px;
}

.item_wrapper{
  width: 1000px;
  padding-bottom: 90px;
  /* margin: 0 auto; */
  margin-left: 100px;
  display: flex;
}

.imem_1{
   padding: 10px; 
 margin-left: 50px;
  /* margin-right: 40px; */
} 

/* .blue_box{
  background-color: rgb(94, 169, 212);
  padding: 40px 10px;
  border-bottom:	solid 7px rgb(218, 56, 56);
  border-top-left-radius :40%;
  border-top-right-radius :40%;
} */

.arch{
  color: rgb(71, 94, 114);
  text-align: center;
  font-size: 25px;
}

.arch span {
	font: 26px Monaco, MonoSpace;
	height: 200px;
	position: absolute;
	color:#37d;
	width: 20px;
	left: 380px;
	top: 10px;
	transform-origin: bottom center;
	}

.imem_1 img{
  width: 300px;
}

.book_img{
  box-shadow: 15px 15px 0px 0 rgb(135, 190, 209);
}

.book_img:hover{opacity: 0.7;}



/*ページの上へ*/
.topPage{
  position: fixed;
  position: fixed;
  bottom: 16px;
  right: 16px;
  }


.topPage a{
  position: absolute; /*このクラスを自由に動かすためにposition:absoluteに設定*/
  bottom: 20px;/*.topPageの下を起点として20px上にずらす*/
  right: 40px; /*.topPageの右を起点として40px左にずらす*/
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color:#000;
  background-color:#fff;
  padding: 15px 20px;
  border-radius: 50%; /*角を丸くする*/
  transition: 0.5s ease;}

.topPage a:hover{
  color: #fff;
  background-color: rgb(218, 56, 56);
  opacity: 0.5;}