*{
    margin:0;
}

header,section,footer{
    display: block;
}

body{
    font-size: 1rem;
    line-height:1.7;
}

.container{
    width:auto;
    margin: 0 auto;
    background-image: url('./img/hanakabe1.gif');
    background-size: contain;

}


/* 上部コンテンツ*/

.navber{
	font-size: 1.5rem;
	width: auto;
    padding: 0px;
    margin-top: 0px;
}

.navber a{
    font-size: 1.5rem;
    margin-right: 5%;
    margin-left: 5%;
}

.navber a:hover{
    color: rgb(255, 127, 197);
    font-size: 1.8rem;

}

header{
    margin: 0 auto;
    text-align: center;
    width: 80%;
    background-color:#40ff90;
}

section{
    margin: 0 auto;
    text-align: center;
    width: 80%;	
}

.rogo{
    display: block;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    width: 20%;
    height: auto;
    max-width: 200px;
    


}


.space{
   margin: 0px;

}

header h1 img{
    width: 90%;
    max-width: 400px;
    float: none;
}



.title{

    font-size: 100%;
    padding: 0%;
}


/* .slide-items { max-width:350px; height: auto;}*/
.slide{

	width:88% ;
	display: flex;
	justify-content: center;
}

.slide-items {
    width: 100%;
	max-width: 400px;
    min-width: 200px;
	/* コンテナの幅に合わせる */
	object-fit: cover; /* 画像をコンテナ内に埋め込み、アスペクト比を維持しトリミングする */
	}
	
	.slide-items img {
	  width: 90%;
	  object-fit: cover;
	}
  
	.card {
		margin-top: 5px;
        margin-left: auto;
		object-fit: contain;}
	   
/* 中間コンテンツ*/


.flex-box {
    background-color: #eee;     /* 背景色指定 */
    padding:  5px;             /* 余白指定 */
    display: flex;
    flex-wrap: wrap;            /* 折り返し指定 */
    width:100%;

}

@media (min-width: 768px) {
    .flex-box {
        background-color: #eee;     /* 背景色指定 */
        padding:  5px;             /* 余白指定 */
        display: flex;
        flex-wrap: nowrap;            /* 折り返し指定 */
        width:100%;
        
    }
  }

.flex-item {
    padding: 5px;
    color:  #fff;               /* 文字色 */
    border-radius:  0%;        /* 角丸指定 */
    width: 100%;                 /* 幅指定 */
    text-align: center;
}


.flex-item:nth-child(1) {
    background-color:  #2196F3; /* 背景色指定 */

}

 
.flex-item:nth-child(2) {
    background-color:  #f35db4; /* 背景色指定 */

}

 
.flex-item:nth-child(3) {
    background-color:  #0ac457; /* 背景色指定 */

}
 
.flex-item:nth-child(4) {
    background-color:  #2196F3; /* 背景色指定 */

    ;}

.flex-box2 {
        background-color: #fff;     /* 背景色指定 */
        padding:  5px;             /* 余白指定 */
        display: flex;
        flex-wrap: nowrap;            /* 折り返し指定 */
        width:100%;
    }
    
.flex-item2 {
        padding: 5px;
        color:  #ec9797;               /* 文字色 */
        margin-bottom: 0px;
        border-radius:  0%;        /* 角丸指定 */
        width: 100%;                 /* 幅指定 */
        text-align: left;
    }
    
    
.flex-item2:nth-child(1) {
        background-color:  #fff; /* 背景色指定 */
      
    }


.tt{
    font-size: 26px;
    font-weight: bold;
	color:#f06060;
    line-height: 30px;
	padding: 8px 0px 0px 0px;
	margin-top: 0px;
    margin-right: 0%;
    white-space: nowrap;

}


#middle{
    width:80%;
    margin: 0 auto;

}

#artist{
    width:90%;
    margin: 0 auto;

}

.cd{
    width:100%;
    max-width: 300px;
    min-width: 150px;

}

.artleft{
    float: left;
    margin-left: 0%;
    margin-right: 10%;
}

.artright{
    float: left;
    margin-left: 0%;
    margin-bottom: 7%;

    
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
 }

.talentname{
    font-size: 26px;
    font-weight: bold;
	color:#f06060;
	text-align: center;
    white-space: nowrap;
	float: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px -10px 0px;


}

.talent{

    font-weight: bold;
    font-size: 0.9em;
    color: #000;

}

p.contact{
    text-align: justify;
    width:100% ;
    font-size: 0.9em;

}

.mcontact{
    width: 80%;
    line-height: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;

}

/* 画像処理*/
.img1
{
    width: 70%;
    min-width: 200px;
    max-width: 600px;
    padding-top: 10px;
    height: auto;
}

.img2{
    width: 25%;
    min-width: 150px;
}

.img3{
    padding-top: 10px;
    height: 150px;
    width: auto;

    float: none;
}

/* テキスト処理*/
h1{
white-space: nowrap;

}

h2{
    font-size: 26px;
	color:#f06060;
    line-height: 30px;
    float: left;
	padding: 8px 0px 0px 0px;
	margin-top: 10px;
    margin-right: 10%;
    white-space: nowrap;
}

h3{
    font-size: 26px;
	color:#055c4d;
	text-align: center;
	float: none;
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 5px 0px;

}

h4{
    color: #000;
    font-size: 0.9em;

}

.midashi{
    text-align: center ;
    line-height: 1.2em;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 15px;
    margin-bottom: -5px;
    font-size: 1.6rem;
    font-weight: bolder;
    color: #e7101b;

    float: none;
}

.midashi2{
    text-align: center ;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 1.6rem;
    font-weight: bolder;
    color: #093ff3;

    float: none;
}

.komidashi{
    text-align: center ;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2rem;
    font-weight: bolder;
    color: #0aa52c;

    float: none;
}

.komidashi2{
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 0px;
    font-size: 1.0rem;
    font-weight: bolder;
    color: #e7101b;

}

.maintext{
    text-align: center;
    line-height: normal;
    color: #080000;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1rem;
    padding: 10px;
}

.nomaltext{
    text-align: left;
    line-height: normal;
    color: #020000;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -12px;
    margin-bottom: 0px;
    font-size: 1rem;
    padding: 10px;
}

.subtext{
    text-align: left;
    line-height: normal;
    color: #0704a5;
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0%;
    font-size: 0.9rem;
}

.proftext{
    text-align: center;
    line-height: normal;
    color: #0f2fe6;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2rem;
    padding: 10px;
}

.proftext2{
    text-align: left;
    line-height: normal;
    color: #0f2fe6;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2rem;
    padding: 10px;
}

.description{
    line-height: 20px;
    width: 90%;
    min-width: 250px;
    float:left;
    margin-left: 5%;
    text-align: left;

}

.description p{
    margin-bottom: 10px;

}
 


table{
    visibility:hidden;
    width: 100%;
    height: 20%;
}

footer{
	position: fixed;
	bottom: 0;

	width: 100%;
	height: 17%;
	margin: 0;
	background-color: #535151;
    float: none;

}

footer p.copyright {

    font-size: 0.7em;
	line-height: 15px;
	color: #ffffff;
    margin-left: 10%;
    margin-bottom: 5px;
    margin-top: 1%;
}

footer .info {
    float: left;
	font-size: 1em;

	color: #ffffff;
    line-height: 20px;
    margin-left: 10%;
    margin-bottom: -15px;

}

footer .mail{
    float: left;
    margin-top: -8px;
    margin-left: 10%;
    background-color: #40ff90;
    width: 200px;


}

footer img{
width:100% ;

}

p.nowrap{
    white-space: nowrap;
    text-align: justify;

}