@charset "UTF-8";

/* ====================================================================================================

	トップページ設定用

==================================================================================================== */

/* ----------   トップバナー  --------------------- */
.ban_img {
  width: 90%;
  margin: 0px auto 0px;
  text-align: center;
}

.ban_img p {
  text-align: center;
  font-size: 140%;
}

.ban_img p span {
  color: red;
}


/* ----------   新着情報  --------------------- */

#news{
/*background:url(../common_img/bg_03.png) 0 0 repeat,url(../common_img/bg_01.png) repeat;
padding:55px 0 50px;
overflow:hidden;*/
width: 90%;
margin: 0px auto 0px;
text-align: center;
background: rgba(255,255,255,0.5);
border-radius: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
padding: 30px 20px;
box-shadow: 2px 2px 2px 2px #808080;
}

#news .tt{
font-size:300%;
color:#000;
padding:0px 0px 0px 0px ;
font-weight:bold;
text-align:center;
margin:0px 0px 30px;
overflow:hidden;
}


.news_info{
margin:0px 15px 0px;
}



.news_info li{
padding:0 0px 1% 0px ;
border-bottom:dotted 2px #212121;
margin:0px 0px 15px 0px ;
color:#333;
}

.news_info li figure{
float:left;
width:100px;
margin:0px 10px 0px 0px ;
}

.news_info li figure img{
border-radius: 50%;
height: 100%;
width: 100%;
}

.news_info li span{
display:block;
text-align:left;
padding:0px;
margin:0px 20px 5px 0px ;
color: red;
font-weight: bold;
font-size: 130%;
}

.news_info li p {
font-size: 140%;
padding: 0;
}


@media only screen and (max-width: 768px) {

.ban_img {
  width: 97%!important;
}

.ban_img p {
  font-size: 110%;
}

#news{
  width: 97%;
  margin: 0px auto 0px;
  text-align: center;
  background: rgba(255,255,255,0.5);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 30px 5px;
}

.news_info{
margin:0px 10px 10px;}

.news_info li{
padding:0 0px 3% 0px ;
border-bottom:dotted 2px #212121;
margin:0px 0px 20px 0px ;
color:#333;
}

.news_info li span {
  font-size: 85%;
  margin:0px 20px 3px 0px ;
}

.news_info li p {
font-size: 100%;
}

#news .tt{
font-size:160%;
}

#news .tt span{
font-size:80%;
}

.news_info li figure{
width:70px;
}

}

/* ----------   TATTOO  --------------------- */

.tat{
display:table;
width: 90%;
margin: 0px auto 20px;
text-align: center;
border-collapse: separate;
border-spacing: 10px 0;
color: #333;
}

.tat .tat_box{
display: table-cell;
}

.tat .tat_box figure{
text-align: center;
}

.tat .tat_box p{
text-align: center;
padding:15px 0;
font-size: 360%;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
/* font-weight: bold;*/
}

.tat_float{
width: 89.5%;
margin: 0px auto 10px;
}

.tat_catbox{
width: 25%;
float:left;
margin:0px 0px 25px;
color: #333;
}

.tat_catbox dl{
padding:6px;
text-align: center;
}

.tat_catbox dl dd{
text-align: center;
padding:15px 0 0;
font-weight: bold;
font-size: 160%;

}


.f_catbox{
width: 25%;
float:left;
margin:0px 0px 25px;
}

.f_catbox dl{
padding:6px;
text-align: center;
}

.f_catbox dl dd {
text-align: center;
line-height: 21px;
margin: 5px 0;
font-weight: bold;
}

.f_catbox dl dd a {
padding:15px 0 0;
text-decoration: none;
color: #212121;
/*color: #fff;*/
font-size: 120%
}

.f_catbox dl a:hover{
  color: red;
}

.f_catbox dl dd a span{
    padding: 0px 0 0px;
    /*color: #B3B3B3;*/
    /*color: rgb(41,41,41);*/
    color: #ED7900;
    font-size: 100%;
    font-weight: normal;
}

@media only screen and (max-width: 768px) {
.tat{
  width: 97%;
  margin: 0px auto 20px;
  text-align: center;
  border-collapse: separate;
  border-spacing:5px 0 ;
}

.tat .tat_box p{
text-align: center;
padding:5px 0;
font-size: 125%;
}

.tat_float{
width: 97%;
margin: 0px auto 10px;
}

.tat_catbox dl{
padding:2px;
text-align: center;
}

.tat_catbox {
    width: 25%;
    float: left;
    margin: 0px 0px 10px;
}

.tat_catbox dl dd {
    text-align: center;
    padding: 5px 0 0;
    font-size: 70%;
    word-break:break-all;
}

}

/* ----------   ARTIST  --------------------- */

#artist{
width: 90%;
margin: 0px auto 0px;
text-align: center;
background:rgba(255,255,255,0.5);
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
padding:30px 10px;
box-shadow: 2px 2px 2px 2px #808080;
}

#artist p {
  color: #333;
}

.art{
display:table;
width: 100%;
margin: 0px auto 40px;
text-align: center;
border-collapse: separate;
border-spacing: 10px 0;
}

.art .at_box{
display: table-cell;
}

.art .at_box figure{
text-align: center;
}

.art .at_box p{
text-align: center;
padding:15px 0;
font-size: 360%;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
/* font-weight: bold; */
}

.art .at_box p img{
padding:5px;
width:30px;
}

@media only screen and (max-width: 768px) {

#news{
padding:10px 0px;
}

#artist{
width: 97%;
padding:10px 0px;
}


.art {
  border-spacing: 5px 0;
  margin: 0px auto 20px;
}

.art .at_box p {
    text-align: center;
    padding: 5px 0;
    font-size: 140%;
}

.f_catbox{
width: 25%;
float:left;
margin:0px 0px 0px;
}

.f_catbox dl{
padding:2px;
text-align: center;
}

.f_catbox dl dd {
    text-align: center;
    line-height: 12px;
    margin: 5px 0;
    font-size: 90%
}

.f_catbox dl dd a {
  color: #212121;
    padding: 5px 0 0;
    font-size: 85%
}

.f_catbox dl dd a span {
  font-size: 83%;
}


}

/* ----------   ACCESS  --------------------- */
#access{
width: 90%;
margin: 0px auto 0px;
text-align: center;
background:rgba(255,255,255,0.5);
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
padding:30px 10px;
box-shadow: 2px 2px 2px 2px #808080;
}

#access p {
  text-align: center;
  font-size: 180%;
  color: #333;
  font-weight: bold;
}

@media only screen and (max-width: 768px) {
  #access{
  width: 97%;
  padding:10px 0px;
  }
  #access p {
font-size: 110%;
}

}

/* ----------   YOUTUBE  --------------------- */
.v_box {
  width: 98%;
  margin:0 auto;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  padding:5px 0px 5px;
  background:rgba(255,255,255,0.5);
  box-shadow: 2px 2px 2px 2px #808080;
}

/*.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}*/
.video iframe {
  /*position: absolute;
  top: 0;
  left: 0;*/
  width: 100%;
  height: 500px;
}

.vdo_l {
    width: 32%;
    float: left;
    margin: 0px 1% 0px 1%;
}

.vdo_c {
    width: 32%;
    float: left;
    margin: 0px 1% 0px 0;
}

.vdo_r {
    width: 32%;
    float: left;
    margin: 0px 1% 0px 0;
  }

/*.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  border-radius: 6px;
}*/


@media only screen and (max-width: 768px) {
  .video iframe {
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 280px;
  }
}