@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:700,700italic);
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic);
@import url(reset.css);

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    color:#696969;
    overflow-y:scroll;
    overflow-x: hidden;
}

body#discography{
    background-image: url(../images/tp.gif);
    background-color: #fef9fb ;
}


/* top */
.info_box{
  text-align: center;
  width:auto;
}

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

.tac{
    text-align: center;
}

.tar{
    text-align: right;
}

.mt{
    margin-top:20px;
}

.mb{
    margin-bottom:20px;
}

.fwb{
    font-weight: bold;
}

.letter_sp,
.flor ol{
    letter-spacing: 0.04em;
}

blockquote{
    padding:8px;
    margin:20px 0;
    background-image: -moz-linear-gradient(
        top -45deg,
        #ffffff 0%,
        #ccc);
    background-image: -webkit-gradient(
        linear, left top, right bottom,
        from(#ffffff),
        to(#ccc));
    border:solid 1px #fef9fb;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
blockquote{
    background: url(../images/glbg.jpg) repeat-x;
}
}
cite{
    clear: both;
    margin:0.5em 0;
}

.fi{
    font-style: italic;
}

audio{
    width:200px;
}

.white{
    background-color: rgba(255,255,255,0.5);
    padding:1em;
}

/* header */
h1{
    font-size: 2.5em;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    color: #540309;
    font-family: 'Gentium Book Basic', serif;
}

h1.info_h1{
    font-size:1em;
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont;
}

h2{
    font-size:1em;
    margin: 0;
    padding: 0;
    color: #631316;
    letter-spacing: 0.04em;
}

h2 span{
    font-family: 'Gentium Book Basic', serif;
    font-style: italic;
}

.flol h3, .flol h4, .flol h5{
    border-top:solid 2px #a75b65;
    border-bottom:solid 2px #a75b65;
    padding:0.5em 1em;
}

/* link */
a:link, a:visited{
    color:#696969;
    font-weight: bold;
    text-decoration: none;
}

a:hover, a:active{
    text-decoration: underline;
}

/* nav */
.nav{
    width:100%;
    margin: auto auto;
    text-align: center;
    background-color: rgba(32,2,2,0.85);
}

.nav ul{
    margin: auto auto;
    padding: auto auto;
    list-style: none;
}

.nav li{
  padding: 3pt 18pt;
  display: inline-block;
  font-size: 18pt;
  font-family: 'Gentium Book Basic', serif;
  font-style: italic;
}

.nav ul{
    max-width: 980px;
}

.nav a , .nav a:visited{
    color: #a05127;
    text-decoration: none;
}

.nav a:hover , .nav a:active{
    color: #e8ecef;
    text-decoration: underline;
}

.flol p{
    margin-bottom:1em;
}

.flol blockquote{
    margin-top:0;
}

.flor p, .flor ol, .flor cite{
    font-size:9pt;
}

/*index area*/
#header_index {
    position: relative;
    text-align:center;
    width:100%;
    margin:0;
    background-color:#631316;
    background:url("../images/bg.gif") 50% 50% / cover repeat-y;
}

.con_i_header{
    position: relative;
    height:600px;
    width:100%;
    margin: auto auto;
    text-align: center;
    background: url("../images/bg_image.jpg") center top no-repeat;
}

.con_i_header h1{
    position: relative;
    top: 165px;
    margin-left: -390px;
}

#header_index .nav{
    position: absolute;
    top: 432px;
    padding: 10px;
}

/*index info*/
#newsbox ul{
    margin:0;
    padding:0.5em;
    _text-indent:15px;
    height:300px;
    overflow : auto ;
    list-style-position:inside;
    _list-style-position:outside;
    list-style-type:none;
    list-style-image:url('../images/arrow-right.gif');
    background-color: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.2);
  }

#infobox div{
    padding:0.5em;
    background-color: rgba(255,255,255,0.5);
}

#infobox img{
  float:left;
  margin: 10px;
  vertical-align: middle;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
}

#infobox .detail{
    font-weight:bold;
    text-align: right;
}

#infobox  blockquote{
    madgin-bottom:0;
}

.cdj{
  margin-top:20px;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.15);
}

.contents_base{
    position: relative;
    text-align:center;
    width:100%;
    margin:0;
    background-color: #fef9fb;
}

.contents{
    max-width:980px;
    text-align: left;
    margin:auto auto;
    padding: 50px 30px 200px;
    line-height:1.5em;
    box-shadow: 0px 0px 50px 5px rgba(99,19,22,0.2);
    background: url("../images/bg_leaf.jpg") center top no-repeat;
}

.contents h1{
  margin-bottom:20px;
}

.clearfix h2{
  margin-bottom:20px;
  padding:0.5em;
  text-align: center;
  color:#e8ecef;
  font-size:1.2em;
  font-weight: bold;
}

#schedule h2{
    margin-top: 20px;
    padding:5px;
    color:#e8ecef;
    font-size:1.2em;
}

.contents ul, .contents ol{
    list-style-position:inside;
    margin:30px 10px;
}

/*order button*/
.order{
  border-radius: 6px; /* CSS3 */
  -webkit-border-radius: 6px; /* Safari,Google Chrome用 */
  -moz-border-radius: 6px; /* Firefox用 */
  behavior: url(../js/PIE.htc); /* IE用 */
  text-align:center;
  padding:1em;
  width:200px;
}

.order_info{
    padding: 7px;
    border: double 3px #f8e58c;
}

.clearfix h2,
#schedule h2,
.order{
/*IE6 IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#631316, endcolorstr=#a75b65));
/* IE8 IE9 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#631316, endcolorstr=#a75b65))";
zoom: 1;
background: -moz-linear-gradient(left top, #540309, #b00817);/* FF3.6+ */
background: -webkit-linear-gradient(left top, #540309, #b00817);/* Chrome10+, Safari5.1+ */
background: linear-gradient(to bottom right, #540309, #b00817);/* IE10+, W3C */
}

.order a:link, .order a:visited, .order a:hover, .order a:active {
    color:#fff;
}

/* foter copyright */
footer {
    margin:auto auto;
    text-align: center;
    padding:20px;
    font-family: 'Gentium Book Basic', serif;
}



/* タブレット用 */

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


* {
    float: none;
    position: static;
}
 
img {
    max-width: 100%;
    height: auto;
}

.contents{
    max-width: 95%;
}

.con_i_header{
    position: relative;
    height:600px;
    width:100%;
    margin: auto auto;
    text-align: center;
    background: url("../images/bg_image.jpg") no-repeat;
    background-position: right top;
}

    .con_i_header h1{
    position: relative;
    top: 350px;
    margin: auto auto;
    }

    .con_i_header h1 img{
    max-width: 90%;
    }

.nav li{
  padding: 3pt 18pt;
  display: inline-block;
  font-size: 18pt;
  font-family: 'Gentium Book Basic', serif;
  font-style: italic;
}

.nav ul{
    max-width: 100%;
    text-align: center;
}

#mailform{
    max-width: 95%;
}

input:not([type="submit"]), input:not([type="button"]), textarea, option, select {
    max-width: 100%;
}
}


/* スマホ用 */

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

* {
    float: none;
    position: static;
}
 
img {
    max-width: 100%;
    height: auto;
}

.contents{
    max-width: 95%;
}

.con_i_header{
    position: relative;
    height:600px;
    width:100%;
    margin: auto auto;
    text-align: center;
    background: url("../images/bg_image.jpg") no-repeat;
    background-position: right -40px top;
}

    .con_i_header h1{
    position: relative;
    top: 350px;
    margin: auto auto;
    }

    .con_i_header h1 img{
    max-width: 90%;
    }

.nav li{
  padding: 3pt 18pt;
  display: inline-block;
  font-size: 18pt;
  font-family: 'Gentium Book Basic', serif;
  font-style: italic;
}

.nav ul{
    max-width: 100%;
    text-align: center;
}

#mailform{
    max-width: 95%;
}

input:not([type="submit"]), input:not([type="button"]), textarea, option, select {
    max-width: 100%;
}


}