@charset "utf-8";

@import "reset.css";
@import "cmn-options.css";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

a:link{color:#000;text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}
a:visited{color:#000;}

#wrapper {
  width: 100%;
  max-width: 750px;
  height: auto;
  background: #fff;
  margin: 0 auto;
}


.box2{
visibility : hidden;
}

.box3{
visibility : hidden;
}

.box4{
visibility : hidden;
}

.box5{
visibility : hidden;
}

/* アコーディオンA */
.ac-box{
width: auto;
margin: 30px auto 5px;
}

/*ラベル*/
.ac-box label{
max-width: 385px;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #fff;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
cursor: pointer;
color: #000;
transition: all 0.5s;
}

/*ラベルホバー時*/
.ac-box label:hover{
background: rgba( 40, 180, 240, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックを隠す*/
.ac-box input{
display: none;
}

/*チェックのアイコン（↓）*/
.ac-box label:after{
color: #000;
font-family:"FontAwesome";
content:" \f078";
}

/*チェックのアイコン（↑）*/
.ac-box input:checked ~ label::after {
color: #000;
font-family:"FontAwesome";
content:" \f077";
}

/*中身を非表示にしておく*/
.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

/*クリックで中身を表示*/
.ac-box input:checked ~ div{
height: auto;
padding: 5px;
background: #ff6cbb;
opacity: 1;
}

/*表示内容の調整*/
.ac-box div p{
color: #666;
background: #fff;
line-height: 23px;
font-size: 14px;
padding: 20px;
border: 1px solid;		
text-align: justify;
}

.ac-small p{
margin-bottom: 0px;
}




#header p {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
  color: white;	
}


.txt {
  font-size: 1.5em;
  line-height: 1.5;
}


.txt10 {
  font-size: 1.3em;
  line-height: 1.6;
}


.midashi {
  color:#f399a9;
  letter-spacing: 3px;
	text-indent: 6px;
  font-size: 2em;
}


/* ヘッダー */

.online
{position:relative;z-index: 999;}



/* セクション02 */
.music_box {
    border: #000 1px solid;
	padding: 4% 4% 4% 4%;
    width: 390px;
    margin: 0 auto; }

.music_box p{font-size: 1.8em;}


.font18 {
  font-size: 1.7em;
  line-height: 1.4;
  font-weight: bold;
}

@media (max-width: 767px) {

.font18 {
  font-size: 1.4em;
  line-height: 1.4;
  font-weight: bold;
}
#header p {
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: bold;
  color: white;	
}
.txt {
  font-size: 1.3em;
  line-height: 1.5;
}
	
.txt10 {
  font-size: 1em;
  line-height: 1.5;
}	
	
.music_box {
    border: #000 1px solid;
	padding: 4% 4% 4% 4%;
    width: 80%;
    margin: 0 auto; }
.ac-box label{
max-width: 80%;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #ededed;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
cursor: pointer;
color: #000;
transition: all 0.5s;
}	
}

/* ボックス */
.box{background: #efefef;
padding: 3%;}

.boxyellow{background: #fff;
border: 4px solid yellow;	
padding: 1% 2.5% 2.5% 2.5%;}

/* イエローアンダーライン */
.yellowline{border-bottom: 3px solid yellow;line-height: 1.8;margin-bottom: 2%;}



/* 三角形 */
.triangle3{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid yellow;
}


/* TOPボタン */
  .pagetop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
	z-index:999;
}
.pagetop a {
    display: block;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}
.pagetop a:hover {
    display: block;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
}


/* フッター
*******************************/
#footer {
  border-top: solid 1px #000;
  text-align: center;
  padding: 10px 0;
  width: 100%;
  margin-top: 5px;
}

#footer p {
  width: 100%;
  margin: 0 auto;
}




.youtube-container {
  position: relative;
  padding-bottom: 70%;
  padding-top: 00%;
  height: 0;
  overflow: hidden;
  background-color: #fff000;
}
.youtube-container iframe {
  position: absolute;
  top: 10%;
  bottom:8%;
  right:2%;
  left: 2%;
  width: 96%;
  height: 80%;
}