html{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}

h2{
    font-family: 'Cinzel', serif;
    color: #000;
    font-size: 36px;
    position: relative;
    display: inline-block;
    margin-bottom: 50px;
    font-weight: 300;
    letter-spacing: 0.5rem;
}
h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}
h3{
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #000;
    font-size: 24px;
    letter-spacing: 0.5rem;
}
h4{
    font-family: 'Cinzel', serif;
    color: #666;
    font-size: 14px;
    letter-spacing: 0.2rem;
}
.title-copy{
font-size: 10px;
font-family: 'Cinzel', serif;
color: #FFF;
}
.Cinzel{/* 英字フォント*/
    font-family: 'Cinzel', serif;
}
.Quicksand{/* 英字フォント*/
font-family: 'Quicksand', sans-serif;
}
.White{
color: #FFF;
}
.txtsize-l{
    font-size: 18px;
    letter-spacing: 0.2rem;
    line-height: 2.0rem;
}
.txtsize-m{
    font-size: 16px;
    letter-spacing: 0.2rem;
    line-height: 2.0rem;
}
.txtsize-s{
    font-size: 12px;
    letter-spacing: 0.2rem;
    line-height: 1.rem;
}
.txtsize-ss{
    font-size: 10px;
    letter-spacing: 0.2rem;
    line-height: 1.rem;
}
.mt-50{
    margin-top: 50px;
}
.mt-60{
    margin-top: 60px;
}
.mt-70{
    margin-top: 70px;
}
.mt-80{
    margin-top: 80px;
}
.mb-bt50{
    margin-bottom: 50px;
}
.mb-bt80{
    margin-bottom: 80px;
}
.mb-bt100{
    margin-bottom: 100px;
}
.img-50{
}
.img-50 img{
    width: 100%;
    height: auto;
}


/* PC */
@media(max-width: 767px){
html{
		font-size: 12px;
	}
}
html,body{
    width: 100%;
    -ms-overflow-x: hidden;
        overflow-x: hidden;
}

.bg-section{
	position: absolute;
    left: 0;
    top: 0;
	width: 100%;
	height: 100vh;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
.bg-section2{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40vmin;
z-index: -6;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* BOB JAPAN LOGO */
#logo {
margin-top: -250px;
margin-bottom: 200px;
}
#logo img{
width: 100px;
}
.title-copy{
font-size: x-small;
font-family: 'Cinzel', serif;
color: #FFF;
}

#bg-section01{
    background-image: url('../img/img01.jpg');
}
#bg-section02{
    background-image: url('../img/img02.jpg');
}
#bg-section03{
    background-image: url('../img/img03.jpg');
    top: 30vh;
}

.title{
    letter-spacing: 4px;   
}
.z-depth-2{
    position: relative;
    z-index: 2;
}

.btn-ghost{
    border: 1px solid #fff;
    color: #FFF;
}
.btn-ghost:hover{
    text-decoration: none;
    background: #080126;
    border-color: #080126;
    color: #FFF;
}
#section01{
position: relative;
z-index: 2;
padding-top: 45vh;
padding-right: 0;
padding-left: 0;
background-color: #353535;
}
#section01 .content-inner{
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#section01 .inner-el{
font-family: 'Cinzel', serif;
font-size:2.5rem;
position: relative;
text-align: center;
padding: 0 10px;
max-width: 50px;
color: #FFFFFF;
}


#section02{
background-image: url('../img/img02.jpg');
position: relative;
z-index: 4;
padding-top: 100px;
height: 80vh;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: 50% 50%;

}


#section04{
    position: relative;
    background: #fff;
    z-index: 3;
    padding: 10vh 0;
}
#section05{
    position: relative;
    z-index: 3;
    padding: 30vh 0 0;
    background: #000;
    overflow: hidden;
}
#section06{
    position: relative;
    background: #f2f2f2;
    z-index: 3;
    padding: 10vh 0;
}
/* Left Area*/
.left-area{
float: left;
width: 520px;
margin-right: 50px;
}

/* Ringht Area*/
.right-area{
    float: right;
    width: 520px;
}
        
#section02,#section04,#section06{
        padding: 40px 0;
    }
#footer{
    color: #FFF;
    padding: 50px 20px;
    font-size: 12px;
    text-align: center;
    background: #000;
}

/* Footer Left Area*/


.footer-logo img{
width: 60px;

}

.footer-copyright-area{
clear: both;
background-color: #ADD765;
}
	
/*1200px以下の場合 */
@media(max-width: 1200px){

#section02{
background-position: 50% 70%;
background-size: auto 100%;
}

/* Left Area*/
.left-area{
width: 44%;
margin-right: 50px;
}

/* Ringht Area*/
.right-area{
width: 44%;
}	
}


/*768px以下の場合 */
@media(max-width: 768px){

#logo {
margin-top: -150px;
margin-bottom: 150px;
}
#logo img{
width: 60px;
}
#section01 .inner-el{
font-size: 1.8rem;
padding: 0 6px;
}

#section02{
height: 100vh;
background-position: 70% 30%;
background-size: auto 100%;
}
#bg-section03{
    background-image: url('../img/img03.jpg');
    top: 30vh;
    background-position: -140px 60px;
    background-size: auto 80%;
    height: 0vh;
}
#section02{
    height: auto;
    background-position: 70% 30%;
    background-size: auto 100%;

}
/* Left Area*/
.left-area{
float: none;
width: 100%;
margin-right: 50px;
}

/* Ringht Area*/
.right-area{
float: none;
width: 100%;
}
#section05{
height: 50vh;

}
}