@charset "UTF-8";
/* CSS Document */

#mainimage{
background-size:cover;
background-position:50%;
max-height:900px;
position:relative;
}
#mainimage:before {
    content: "";
    display: block;
    padding-top: 37.6%;
	z-index:-1;
}

#mainimage .innerbox{
position:absolute;
bottom:0;
left:20rem;
color:#fff;
background-color:rgba(0,0,0,0.7);
padding:6rem 0 4rem 6rem;
text-align:justify;
width:70rem;
}

#mainimage .innerbox h1 p{
display:inline-block;
}
#mainimage .innerbox .en{
font-weight:900;
font-size:3rem;
line-height:1;
padding-right:1rem;
}
#mainimage .innerbox .ja{
font-weight:normal;
font-size:1.6rem;
}
#mainimage .innerbox h2{
font-size:4rem;
font-weight:400;
line-height:1.3;
padding:4rem 0;
}
#mainimage .innerbox .namebox{
border:1px solid rgba(255,255,255,0.6);
padding:2.5rem 2rem;
width:50rem;
}
#mainimage .innerbox .namebox .name{
font-size:1.7rem;
padding-bottom:1rem;
}
#mainimage .innerbox .namebox .name span{
font-size:2.2rem;
font-weight:700;
}


#txtbox{
background-color:#f9f9f9;
padding:7rem 0;
}
#txtbox .container{
max-width: 140rem;
}
#txtbox .box{
background-color:#fff;
}
#txtbox .mb_box{
margin-bottom:3rem;
}
#txtbox .image{
width:48%;
}
#txtbox .txt{
width:52%;
padding:0 4rem;
}
#txtbox .txt h3{
font-size:1.8rem;
padding:4rem 0 1.5rem 0;
}
#txtbox .txt p{
font-size:1.4rem;
line-height:1.8;
text-align:justify;
}

#imagebox{
margin-bottom:5rem;
}
#imagebox img{
width:100%;
}

#messe{
background-position:50%;
background-size:cover;
}
#messe .box{
width:50%;
padding:13rem 0 2rem 4rem;
min-height:45rem;
}
#messe h3{
padding-bottom:2rem;
font-size:1.8rem;
position:relative;
}
#messe h3 .title{
position:relative;
z-index:3;
}
#messe h3 .title2{
position:absolute;
color:#e3e1e1;
font-weight:900;
font-size: 5.5rem;
line-height: 1;
top: -3.5rem;
left: -8rem;
z-index:2;
font-family: 'M PLUS 1p', sans-serif;
}
#messe p{
text-align:justify;
}


#inta{
padding:9rem 0;
}
#inta h4{
text-align:center;
font-weight:700;
font-size:1.8rem;
line-height:1.2;
}
#inta h4 p{
font-size:2.4rem;
font-weight:900;
padding:1rem 0 3rem 0;
font-family: 'M PLUS 1p', sans-serif;
}
#inta ul{
text-align:center;
}
#inta li{
display:inline-block;
vertical-align:top;
width:36.7rem;
margin:1rem 0;
}
#inta li:nth-child(2),#inta li:nth-child(5){
margin:1rem 1.5rem;
}
#inta .box{
padding:2rem;
text-align:justify;
}
#inta .txt{
font-size:1.4rem;
}
#inta .name{
font-size:1.8rem;
font-weight:700;
}
#inta .name span{
font-size:1.5rem;
font-weight:normal;
}
#inta a{
display:block;
color:#fff;
}
#inta a .box{
background-color:#c91515;
background-image:url(../img/arrow.png);
background-repeat:no-repeat;
background-position:90% 50%;
  -webkit-transition: .3s;
  transition: .3s;
}
#inta li:nth-child(2n) a .box{
background-color:#313131;
}
#inta a:hover .box,#inta li:nth-child(2n) a:hover .box{
background-color:#00a0b0;
background-position:97% 50%;
}





@media only screen and (min-width: 1800px) {

#mainimage .innerbox{
left:10%;
}


}

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

#mainimage .innerbox{
left:2rem;
}

#txtbox .image{
width:48%;
}

#txtbox .image.left{
background-size:auto 100%;
background-position:100% 50%;
}
#txtbox .txt{
padding:0 2rem;
}

}

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


#mainimage{
background-position:80% 50%;
}
#mainimage:before {
    padding-top: 60.6%;
}

#mainimage .innerbox{
bottom:2rem;
left:0;
color:#fff;
padding:1rem 1rem 1rem 2rem;
width:auto;
}

#mainimage .innerbox h1 p{
display:block;
}
#mainimage .innerbox .en{
font-weight:900;
font-size:2rem;
line-height:1;
padding-right:1rem;
}
#mainimage .innerbox .ja{
font-weight:normal;
font-size:1.6rem;
}
#mainimage .innerbox h2,#mainimage .innerbox .namebox,#sp_innerbox h1{
display:none;
}
#sp_innerbox{
background-color:rgba(0,0,0,0.8);
padding:3rem 2rem;
color:#fff;
text-align:left;
}
#sp_innerbox h2{
font-size:1.9rem;
font-weight:700;
line-height:1.3;
padding:0 0 2rem 0;
}
#sp_innerbox .namebox{
border:1px solid rgba(255,255,255,0.6);
padding:1.5rem 1rem;
width:100%;
}
#sp_innerbox .namebox .name{
font-size:1.5rem;
padding-bottom:1rem;
line-height:1.4;
}
#sp_innerbox .namebox .name span{
font-size:1.9rem;
font-weight:700;
}


#txtbox{
padding:5rem 0;
}
#txtbox .container{
padding:0 1rem;
}
#txtbox .mb_box{
margin-bottom:3rem;
}
#txtbox .image{
width:100%;
padding-top:2rem;
}
#txtbox .txt{
width:100%;
padding:0 2rem;
}
#txtbox .txt h3{
font-size:1.7rem;
padding:3rem 0 1rem 0;
}
#txtbox .txt p{
font-size:1.5rem;
line-height:1.8;
}

#imagebox{
margin-bottom:5rem;
}
#imagebox img{
width:100%;
}

#messe{
background-position:75% 100%;
background-size:auto 20rem;
background-repeat:no-repeat;
}
#messe .box{
width:100%;
padding:0 0 23rem 0;
min-height:auto;
}
#messe h3{
padding-bottom:2rem;
font-size:1.8rem;
position:relative;
}
#messe h3 .title{
position:relative;
z-index:3;
font-size:1.8rem;
}
#messe h3 .title2{
font-weight:900;
font-size: 4.5rem;
line-height: 1;
top: -2.5rem;
left: -2rem;
z-index:2;
}
#messe p{
text-align:justify;
}






#inta{
padding:6rem 0;
}
#inta h2{
}
#inta ul{
}
#inta li{
display:block;
max-width:440px;
width:100%;
margin:2rem auto;
}
#inta li:nth-child(2),#inta li:nth-child(5){
margin:2rem auto;
}
#inta li img{
width:100%;
}
#inta .box{
padding:2rem;
text-align:justify;
}
#inta .txt{
font-size:1.4rem;
line-height:1.3;
}
#inta .name{
font-size:1.8rem;
font-weight:700;
}
#inta .name span{
font-size:1.3rem;
}
#inta a{
display:block;
color:#fff;
}
#inta a .box{
background-position:90% 75%;
}
#inta a:hover .box,#inta li:nth-child(2n) a:hover .box{
background-position:97% 75%;
}


}