@charaset"UTF-8"

body {
font-family : 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','YuGothic,'Yu Gothic', Meiryo,'MS PGothic'  ;
}



/*ヘッダー*/
header{
    height: 100px ;
    background-color:#aeffc4;
    position : relative ;
}

header span a{
  text-decoration : none  ;
  color : #ff5292;
  border : solid 1.5px #ff5292 ;
  background : white ;
  padding : 4px ;
  border-radius : 20px ;
}

#kiyaku{
  position : absolute ;
  bottom : 10px ;
  right : 10px ;
}

#contact{
  position : absolute ;
  bottom : 10px ;
  right : 95px ;
}



/*カラム */
.main {
    background-color : white ;
    width : 70% ;
    order : 1 ;
}

.side {
    background-color : white ;
    width : 30% ;
    order : 2
}

article {
        display:flex ;
        background-color:#F6FFBD ;
}


  
  
/*pc向け*/
@media screen and (min-width:960px) {
.side{ margin : 0 0 0 5% ; } 
article { padding : 10px 10% ; } 
dd{ margin : 20px 50px} 
#mobile-menu{ display : none ;}
.big-cate a{width:42%;}}

  
/*タブレット向け*/
@media screen and (max-width:959px) and (min-width:560px) {
.side{ margin : 0 0 0 1% ; }
article{ padding : 10px 1% } 
dd{ margin : 20px 50px}
#mobile-menu{ display : none ;}
.big-cate a{width:42%;} }

  
/*スマホ向け*/
@media screen and (max-width:559px) {
.side,#contact,#kiyaku{ display : none ;}
.main{ width : 96% ;
       margin : 2% ;}
dd{ margin :20px 15px ;} 
.big-cate a{width:92%;} }



      
/*本文*/
.setumei{
  margin : 40px 15px 0px 15px;
 padding:0 0 100px 0;
 border-bottom : 1px gray dotted ;
 letter-spacing:0.05em;
 line-height:2;
}

.img1 img{
	width:90%;
	margin:10px auto;
}

.sample-btn1,.sample-btn2{
	color:white;
	border-radius : 100vh ; 
    padding : 1px 5px ;
}

.sample-btn1{
	background-color:#ffa7c9
}

.sample-btn2{
	background-color:#8573d3
}

.k-list li{
	color:black;
}

.honbun{
  	margin:40px 15px;
  }
  
  .news-list li{
	color:black;
  }

.news-dl{
	border:none
}

.news-dl dt{
	color:black;
	font-weight:normal;
	font-size:1em;
}

.news-dl dd{
	margin:2px 0 43px 15px
}

h1 {
   background-color : #2dff68 ;
   color : #5a40c9 ;
   margin : 0 ;
   font-size : 2.3em ;
   padding : 0 0 0 10px ;
}

h2{
	margin:60px 20px 0 15px;
	border-bottom:solid 3px #2dff68;
	color:#8573d3
}

.box{
	background:#F6FFBD;
	display:inline-block;
	margin:0 0 10% 10%;
	padding:10px
}

.memo-box{
	background:#F6FFBD;
	width:80%;
	margin:0 auto 30px auto;
	border:solid 1px orange;
	border-radius:10px
}

.mb-label{
	display:block;
	text-align:center;
	color:orange;
	font-weight:bold;
	padding:10px 0 0 0;
}

.memo-box p{
	margin:10px 25px;
	font-size:0.8em;
}

.howto-roop{
	margin:20px;
	border:solid 1px #ff5292;
	border-radius:10px;
	padding:5px;
}

.howto-roop summary{
	color:#ff5292;
	outline:none;
	cursor:pointer;
}

.howto-roop[open] summary{
	color:#ffffff;
	position:relative
}

.howto-roop[open] summary:before{
	content:"▼とじる";
	color:#ff5292;
	position:absolute;
	left:0;
}

	
/*サイドとか*/
.side-title {
   background-color : #2dff68 ;
   color : #5a40c9 ;
   height : 36px ;
   margin : 0 ;
   padding : 5px 0 0 3px ;
   font-size : 1.2em ;
   font-weight: bold
}

.side-nakami{
   color : #ff5292 ;
   font-weight : bold ;
   margin : 10px 5px}

li {
   color : #ff5292 ;
   margin : 12px 0 ;
}

li a{
   color : #5a40c9 ;
   text-decoration : none ;
}

.cates a{
	text-decoration : none ;
	margin : 5px 7px ;
	padding : 1px 6px ;
	background : #aeffc4 ;
	color : #5a40c9 ;
	border-radius : 10px ;
	display : inline-block ;
}
  
.sp-cate a{
	text-decoration : none ;
	margin : 5px 7px ;
	padding : 1px 6px ;
	background : #e7ff29 ;
	color : #5a40c9 ;
	border-radius : 10px ;
	display : inline-block ;
}

#snslink a{
	display : block ;
	text-align : center ;
	font-weight : bold ;
	font-size : 1.1em ;
	text-decoration : none ;
	background-color : #ffa7c6 ;
	color : white ;
	padding : 20px 10px ;
	margin : 10px 5px ;
	border-radius : 10px ;
}

.twi-link a{
	border : solid 3px #8573d3 ;
	background-color : white ;
	color : #8573d3 ;
	display : block ;
	text-align : center ;
	font-weight : bold ;
	font-size : 1.1em ;
	text-decoration : none ;
	padding : 5px 10px ;
	margin : 10px 5px ;
	border-radius : 10px ;
}



/*各楽曲*/
button i,p i{
	color:#ffa7c6
}

button i{
	font-size:1.5em;
}

dt{font-weight : bold ;
   color : #5a40c9 ;
   font-size : 1.3em
  }

dl{border-bottom : 1px gray dotted ;
   padding : 15px 20px ;
   margin :25px 5px ;}  

dd{line-height:2}

button{border : none ;
       background : transparent ;
       outline : none ;
	   margin:0 10px
       }

.dl-mp3{
  display:inline-block;
  color : white ;
  background-color : #ffa7c6 ;
  border-radius : 100vh ; 
  padding : 1px 5px ;
  margin:10px 5px 0 0;
  text-decoration : none ;}

.dl-wav{
  display:inline-block;
  color : white ;
  background-color : #8573d3 ;
  border-radius : 100vh ; 
  padding : 1px 5px ;
  margin:10px 5px 0 0;
  text-decoration : none ;
}

dd a{
	color:black;
}

.my-clock{color : #2dff68 ;}





/*フッター*/
footer{ background : #aeffc4 ;
	text-align : center ;
}

.f-menu a{
	text-decoration : none ;
	color : #5a40c9 ;
	font-size : 0.9em
}

.f-menu a:hover{
	text-decoration : underline ;
}
	
.f-menu{
	display : flex ;
	list-style : none ;
	flex-wrap: wrap;
	justify-content: center;
	margin : 0 0 30px 0 ;
	padding : 10px 20px 10px 0
}

.f-menu li{
	margin : 20px 30px 1px 50px ;
}

small{
	color : #5a40c9 ;
}


/*ページネーション*/  
nav.pagination-container ul {
    border: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    transition: 0.3s;
    border-radius: 0px;
    overflow: hidden;
    list-style-type: none ;
}
.pagination li {
    margin: 0;
	border:solid 1px #ffcadc;
}
nav.pagination-container ul li a {
    display: block;
    padding: 15px 18px 13px;
    line-height: 1;
    color : #ff5292 ;
    text-decoration: none ;
}

li.active a {
    background: #ffe7ef;
}

.pagination a:hover{
	background-color:#ff5292;
	color:white;
}

/*スマホ用メニュー*/
#mobile-menu{
	padding : 0;
	text-align : center ;
	margin : 0 ;
}
.mm-nakami{
	display : inline-block;
}
#mobile-menu a{
	text-decoration : none;
	color : #5a40c9;
	font-weight : bold;
	font-size : 0.9em;
}

#mobile-menu li{
	color : #5a40c9;
	list-style-type : none;
	margin : 13px;
}

/*トップページ*/
.new-news{
	border : solid 3px #2dff68 ;
	border-radius : 5px ;
	margin : 10px ;
	overflow-y : scroll ;
	whitespace : nowrap ;
	max-height:100px;
}

#osirase{
	margin : 0 ;
	background-color : #2dff68 ;
	color : white ;
	padding : 1px 5px;
}

.n-date{
	font-size : 0.8em ;
	margin : 0 5px ;
	color : gray ;
}

.gazo{
	text-align : center ;
	margin : 5px ;
}

.gazo img{
	width : 200px ;
	height : 200px ;
	border-radius:50%;
}
	
.aisatu{
	margin : 40px 9% 60px 10% ;
	position : relative ;
}

.aisatu:before{
	content:"「" ;
	position : absolute;
	color : #ff5292 ;
	font-size : 2em ;
	top : -10px;
	left : -30px
}

.aisatu:after{
	content:"」" ;
	position : absolute;
	color : #ff5292 ;
	font-size : 2em ;
	bottom : -8px;
	right : -25px
}

p{
	line-height : 2
}

.shoukai p{
	margin : 25px
}

.big-cate a{
	display : inline-block ;
	text-align : center ;
	color : #5a40c9 ;
	text-decoration : none ;
	font-size : 1.3em ;
	padding : 20px 2% ;
	margin : 10px 2% ;
	border-radius : 10px ;
	font-weight : bold ;
}

.pink{
	background-color : #ffcadc
}

.green{
	background-color : #aeffc4
}

.yellow{
	background-color : #f4ffa1 ;
}

.blue{
	background-color : #C9C0F0
}

#new-music{
	margin:50px 0 0 10px;
}

#new-video{
	width:96%;
	height:0;
	padding-top:56.25%;
	position:relative;
	margin:0 auto 50px auto;
}

iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*お問い合わせフォーム*/
.mail-form{
       margin:40px auto;
       }
       
.mb-1 input,.mb-2 textarea{
       margin:20px;
	   width:80%;
       }

.mb-1,.mb-2{
	text-align:center
}

.mb-1 input{
	height:25px
}
       
.d-grid button{
       background:#8573d3;
       border:none;
       color:white;
       border-radius:5px;
       width:100px;
	   height:40px;
	letter-spacing:10;
	margin:30px;
	font-weight:bold;
	font-size:1.0em
       }

.d-grid{
	text-align:center
}