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

#mainimage{
background-position:50%;
background-size:cover;
position:relative;
}
#mainimage:before {
    content: "";
    display: block;
    padding-top: 55%;
}
#mainimage .inner{
position:absolute;
top:50%;
left:0;
right:0;
  -ms-transform: translateY(-50%);
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  width:950px;
  margin:0 auto;
}

#mainimage h2{
font-size:4rem;
font-weight:900;
padding-bottom:30px;
}
#mainimage p{
font-size:1.8rem;
line-height:1.6;
text-align:center;
}

.info_main{
background-image:url(../../sitemap/img/mainimage.jpg);
}
#mainimage.info_main:before {
padding-top: 15.62%;
}

.pankuzu{
padding:20px 0;
font-size:1.4rem;
}

.live h2.title{
text-align:center;
padding:40px 0;
font-size:3rem;
}
.live .read{
text-align:center;
}

.boxback:nth-child(2n){
background-color:#fbfbfb;
}
.boxstyle1{
width:780px;
margin:0 auto;
padding:80px 0;
text-align:center;
}
.boxstyle1 .num{
font-size:12rem;
font-weight:700;
color:#c9caca;
line-height:1;
}
.boxstyle1 .num .step_num{
font-size:3.4rem;
line-height:1;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
.boxstyle1 h2{
font-size:3rem;
line-height:1.2;
padding-bottom:30px;
font-weight:normal;
}
.boxstyle1 h2 p {
font-size:2rem;
}
.boxstyle1 .image{
text-align:center;
}
.boxstyle1 .txt{
padding-top:20px;
font-size:1.6rem;
text-align:justify;
word-break: break-all;
}
.boxstyle1 .txt .link{
text-align:right;
padding-top:10px;
font-size:1.4rem;
}
.boxstyle1 .txt .link a{
color:#00a0e9;
text-decoration:underline;
}
.boxstyle1 .txt .link a:hover{
color:#000;
}

h4.info_cate{
padding-top:60px;
}
.info_arcive{
padding-top:60px;
}

.d_left{
float:left;
width:750px;
padding-bottom:50px;
}
.d_side{
float:right;
width:285px;
border-left:2px solid #d5d5d5;
padding:35px 0 0 40px;
}
.d_left h3{
font-size:2.4rem;
padding:20px 0;
}
.d_left .txt{
padding-top:60px;
}
.d_left .image{}
.d_left h4{
font-size:1.8rem;
padding:70px 0 20px 0;
}
.d_left .imagebox{
letter-spacing:-.4em;
}
.d_left .imagebox li{
display:inline-block;
letter-spacing:normal;
vertical-align:top;
margin:0 9px 9px 0;
}
.d_left .imagebox li:nth-child(2n){
margin:0 0 9px 0;}


.d_side .title{
font-size:2.2rem;
line-height:1;
padding-bottom:20px;
}
.d_side .title span{
font-size:1.4rem;
padding-left:15px;
}
.d_side ul{
padding-bottom:50px;
}
.d_side li{
border-bottom:1px solid #d5d5d5;
}
.d_side li a{
display:block;
padding:10px 0;
}

#infolist{}
#infolist dl{
padding:10px 0;
border-bottom:1px solid #d2d2d2;
}
#infolist dt{
float:left;
}
#infolist dd{
padding-left:100px;
}
.info_side.d_side .title {
    font-size: 2rem;
    line-height: 1;
    padding-bottom: 20px;
}


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

#mainimage{
}
#mainimage:before,#mainimage.info_main:before {
    padding-top: 46.8%;
}
#mainimage .inner{
  width:100%;
}

#mainimage h2{
font-size:6.5vw;
padding-bottom:10px;
}
#mainimage p{
font-size:1.8rem;
line-height:1.6;
text-align:center;
}

.live h2.title{
padding:60px 0 40px 0;
font-size:2.8rem;
}
.live .read{
text-align:justify;
}

.pankuzu{
padding:10px 15px 0 15px;
    line-height: 1.4;
}



.boxstyle1{
width:100%;
margin:0 auto;
padding:50px 0 70px 0;
text-align:center;
}
.boxstyle1 .num{
font-size:17vw;
line-height:1;
}
.boxstyle1 .num .step_num{
font-size:2.3rem;
line-height:1;
}
.boxstyle1 h2{
font-size:5.5vw;
line-height:1.2;
padding-bottom:20px;
}
.boxstyle1 h2 p {
font-size:5vw;
padding-bottom:3px;
}
.boxstyle1 .image{
text-align:center;
}
.boxstyle1 .txt{
padding-top:20px;
font-size:1.5rem;
}


.d_left{
float:none;
width:100%;
padding-bottom:50px;
}
.d_side{
float:none;
width:100%;
border-left:none;
border-top:2px solid #d5d5d5;
padding:35px 0 0 0;
}

.d_left h3{
font-size:2.2rem;
padding:0 0 20px 0;
}
.d_left .txt{
padding-top:30px;
}
.d_left .image{}
.d_left h4{
font-size:1.8rem;
padding:50px 0 20px 0;
}
.d_left .imagebox{
letter-spacing:-.4em;
}
.d_left .imagebox li{
margin:0 3% 9px 0;
}
.d_left .imagebox li:nth-child(2n){
margin:0 0 9px 0;}

.d_left .imagebox .img_l{ width:61%}
.d_left .imagebox .img_s{ width:36%;}

.d_side .title{
font-size:3rem;
line-height:1;
padding-bottom:20px;
}
.d_side .title span{
font-size:1.4rem;
padding-left:15px;
}
.d_side ul{
padding-bottom:50px;
}
.d_side li{
border-bottom:1px solid #d5d5d5;
}
.d_side li a{
display:block;
padding:10px 0;
}

#infolist dl{
}
#infolist dt{
float:none;
}
#infolist dd{
padding-left:0;
}



}