@charset "UTF-8";
/************
共通
************/

@font-face {
  font-family: "AGaramondPro";
  src: url("./../font/AGaramondPro-Regular.otf") format("opentype"),
  src: url("./../font/AGaramondPro-Regular.eot") format("embedded-opentype")
}

body{
  background: #000;
  color: #fff;
  font-family: "AGaramondPro","Hiragino Mincho ProN",HGS明朝E,游明朝,"Yu Mincho",YuMincho, serif;
  letter-spacing: 0.3em;
  width: 100%;
}
img{
  width: 100%;
  display: block;
}

/************
header
************/
header{
  padding: 150px 5% 40px;
  position: relative;
}
header .logo{
  max-width: 261px;
  position: absolute;
  top: 40px;
  left: 3%;
}
.sp_header{
  display: none;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
  background-color: #fff;
}
.pc_header{
  display: block;
}
.pc_header ul{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-justify-content    : flex-end;
  justify-content: flex-end;
  margin: 0 0 0 auto;
}
.pc_header ul li{
  font-size: 15px;
  margin: 0 3% 0 0;
  list-style: none;
  letter-spacing: 0.28em;
}
.pc_header ul li:last-child{
  margin: 0;
}
.pc_header ul li a{
  color: #fff;
  text-decoration: none;
}
.pc_header ul li a span{
  color: #d90112;
}

@media screen and (max-width: 1050px) {
  header .logo{
    width: 17%;
    top: 55%;
  }
  .pc_header ul li{
    font-size: 14px;
  }
}
@media screen and (max-width: 850px) {
header {
    padding: 120px 5% 25px;
  }
  header .logo{
    width: 13%;
    top: 60%;
  }
  .pc_header ul li{
    margin: 0 2% 0 0;
  }
}
@media screen and (max-width: 767px) {
  header{
    padding: 15% 5%;
  }
  header .logo{
    width: 35%;
    top: 30%;
  }
  .sp_header{
    display: block;
  }
  .pc_header{
    display: none;
  }
}

/************
sp_menu
************/
.drawer-hamburger{
  width: 3rem;
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    background: #000;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before{
  height: 3px;
}
nav.drawer-nav ul{
  padding: 5% 5%;
}
nav.drawer-nav ul li{
  line-height: 1.5;
  margin-bottom: 8%;
}
nav.drawer-nav ul li a{
  color: #fff;
  text-decoration: none;
}


/************
MISSION
************/
#MISSION .inner{
  padding: 5% 5%;
  position: relative;
}
#MISSION .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MISSION .inner .items .item01{
  width: 40%;
  padding-right: 10%;
}
#MISSION .inner .items .item01 h2{
  font-size: 27px;
  font-weight: 600;
  line-height: 1.5;
  position: absolute;
  bottom: 100%;
  transform: translate(0 , 50%);
  letter-spacing: 0.1em;
  font-family: 'EB Garamond';
}
#MISSION .inner .items .item01 h3{
  font-size: 59px;
  font-weight: 600;
  line-height: 1.4;
  font-family: 'EB Garamond';
}
#MISSION .inner .items .item02{
  width: 50%
}
#MISSION .inner .items .item02 ul{}
#MISSION .inner .items .item02 ul li{
  font-size: 16px;
  margin-bottom: 4%;
  padding-left: 30px;
  position: relative;
  list-style: none;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-family: 'EB Garamond';
}
#MISSION .inner .items .item02 ul li:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  top: -2px;
  left: 0;
}

@media screen and (max-width: 767px) {
  #MISSION .inner{
    padding: 10% 5%;
  }
  #MISSION .inner .items{
    display: block;
  }
  #MISSION .inner .items .item01 h2{
    font-size: 15px;
  }
  #MISSION .inner .items .item01 h3{
    font-size: 26px;
    margin-bottom: 8%;
  }
  #MISSION .inner .items .item01 {
    width: 100%;
    padding-right: 0;
  }
  #MISSION .inner .items .item02{
    width: 100%;
  }
  #MISSION .inner .items .item02 ul li{
    font-size: 14px;
  }
}

/************
ABOUT
************/
#ABOUT .inner{
  padding: 0;
  position: relative;
}
#ABOUT .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#ABOUT .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#ABOUT .inner .items .item01{
  order: 2;
  background: url(../images/img03.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#ABOUT .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#ABOUT .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#ABOUT .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#ABOUT .inner .items .item02 .title span{
  color: #d90112;
}
#ABOUT .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#ABOUT .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: justify;
  font-weight: 400;
}


@media screen and (max-width: 767px) {
  #ABOUT .inner .items{
    display: -ms-inline-block;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #ABOUT .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }
  #ABOUT .inner .items .item01{
    order: 1;
    height: 300px;
  }
  #ABOUT .inner .items .item02{
    order: 2;
  }
  #ABOUT .inner .items .item02 .title{
    font-size: 16px;
  }
  #ABOUT .inner .items .item02 h3{
    font-size: 18px;
  }
  #ABOUT .inner .items .item02 h4{
    font-size: 14px;
    line-height: 1.6;
  }

}

/************
PHILOSOPHY
************/
#PHILOSOPHY .outer{
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
}
#PHILOSOPHY .inner{
  width: 50%;
}
#PHILOSOPHY .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
}
#PHILOSOPHY .inner .items .item{
  width: 50%;
  height: 100%;
  background: #fff;
  padding: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
  min-height: 250px;
}
#PHILOSOPHY .inner .items02 .item02{
  background: #000;
}
#PHILOSOPHY .inner .items .item .text_box{
  margin: auto;
  text-align: center;
  letter-spacing: 0.1em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}
#PHILOSOPHY .inner .items .item .text_box .text_box_inner{
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translate(0, -50%);
  padding: 20% 0;
  width: 70%;
}
#PHILOSOPHY .inner .items .item .text_box h3{
  color: #111;
  font-size: 59px;
  position: relative;
  padding-top: 30px;
}
#PHILOSOPHY .inner .items .item .text_box h3:after{
  content: "z  e  n";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  font-size: 18px;
  font-weight: 400;
  color: #b9b9b9;
}
#PHILOSOPHY .inner .items .item .text_box h4{
  color: #838383;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  border-top: 1px solid #e5e5e5;
  margin-top: 3%;
  padding-top: 3%;
  letter-spacing: 0.1em;
}
#PHILOSOPHY .inner .items .item .text_box p{
  font-size: 18px;
  line-height: 1.4;
}
#PHILOSOPHY .inner .items01 .item01{
  background: url(../images/img04.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#PHILOSOPHY .inner .items03 .item01{
  background: url(../images/img05.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#PHILOSOPHY .inner .items04 .item02{
  background: url(../images/img06.png)no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (min-width: 1900px) {
  #PHILOSOPHY .inner .items .item{
    min-height: 400px;
  }
}
@media screen and (max-width: 767px) {
  #PHILOSOPHY .outer{
    display: block;
  }
  #PHILOSOPHY .inner{
    width: 100%;
  }
  #PHILOSOPHY .inner .items .item{
    padding: 5% 0;
  }
  #PHILOSOPHY .inner .items .item .text_box .text_box_inner{
    padding: 30% 0;
    left: 15%;
    width: 70%;
    transform: translate(0,-50%);
  }
  #PHILOSOPHY .inner .items .item .text_box h3{
    font-size: 40px;
    padding-top: 20px;
  }
  #PHILOSOPHY .inner .items .item .text_box h3:after{
    font-size: 13px;
    top: 0px;
  }
  #PHILOSOPHY .inner .items .item .text_box h4{
    font-size: 14px;
    margin-top: 5%;
    padding-top: 5%;
  }
  #PHILOSOPHY .inner .items .item .text_box p{
    font-size: 14px;
  }
}


/************
STOCKCAR
************/
#STOCKCAR .inner{
  padding: 0;
  position: relative;
}
#STOCKCAR .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#STOCKCAR .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#STOCKCAR .inner .items .item01{
  order: 2;
  background: url(../images/img07.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#STOCKCAR .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#STOCKCAR .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#STOCKCAR .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#STOCKCAR .inner .items .item02 .title span{
  color: #d90112;
}
#STOCKCAR .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#STOCKCAR .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}
#STOCKCAR .inner .items .item02 .btn{
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border: 2px solid #414141;
  width: 212px;
  box-sizing: border-box;
  letter-spacing: 0.2em;
}
#STOCKCAR .inner .items .item02 .btn a{
  color: #fff;
  display: block;
  padding: 10px 0;
  text-decoration: none;
}


@media screen and (max-width: 767px) {
  #STOCKCAR .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #STOCKCAR .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }
  #STOCKCAR .inner .items .item01{
    order: 1;
    padding: 2% 5%;
  }
  #STOCKCAR .inner .items .item02{
    order: 2;
  }
  #STOCKCAR .inner .items .item02 .title{
    font-size: 16px;
  }
  #STOCKCAR .inner .items .item02 h3{
    font-size: 18px;
  }
  #STOCKCAR .inner .items .item02 h4{
    font-size: 14px;
  }
  #STOCKCAR .inner .items .item02 .btn{
    width: 100%;
  }

}

/************
CONTACT
************/
#contact .inner{
  padding: 0 5%;
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#contact .inner .items01{
  width: 28%;
  padding: 5% 7% 5% 15%;
  position: relative;
  letter-spacing: 0.1em;
  height: 100%;
}
#contact .inner .items01:before{
  content: "";
  background: url(../images/logo01.png)no-repeat;
  width: 25%;
  padding-top: 25%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0,-50%);
  background-size: contain;
  background-position: center center;
}
#contact .inner .items01 dl dt{
  font-size: 24px;
  margin-bottom: 5%;
  line-height: 1.4;
  }
#contact .inner .items01 dl dd{
  font-size: 13px;
  margin-bottom: 2%;
  line-height: 1.4;
  color: #c6c6c6;
  }
#contact .inner .items01 dl dd:last-child{
  margin-bottom: 0;
}
#contact .inner .items01 dl dd a{
  color: #c6c6c6;
  text-decoration: none;
}
#contact .inner .items02{
  width: 40%;
  padding: 5% 5%;
}
#contact .inner .items02 h3{
  font-size: 30px;
  text-align: center;
  margin-bottom: 1%;
  font-weight: 600;
}
#contact .inner .items02 h4{
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 5%;
  letter-spacing: 0.13em;
}
#contact .inner .items02 .btn{
  font-size: 14px;
  border: 2px solid #414141;
  text-align: center;
  letter-spacing : 0.2em;
}
#contact .inner .items02 .btn a{
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}
#contact .inner .items02 .copy{
  color: rgba(255,255,255,0.3);
  font-size: 11px;
  text-align: center;
  margin-top: 10%;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  #contact .inner {
    display: block;
  }
  #contact .inner .items01{
    width: 70%;
    padding: 10% 0 10% 30%;
  }
  #contact .inner .items01 dl dt{
    font-size: 20px;
  }
  #contact .inner .items01 dl dd{
    font-size: 12px;
  }
  #contact .inner .items02{
    width: 100%;
    padding: 10% 0;
  }
  #contact .inner .items02 h3{
    font-size: 24px;
    margin-bottom: 2%;
  }
  #contact .inner .items02 h4{
    font-size: 11px;
    margin-bottom: 8%;
  }
  #contact .inner .items02 .copy{
    font-size: 10px;
    margin-top: 20%;
  }
}














/************
MESSAGE
************/


#MESSAGE .inner{
  padding: 0;
  position: relative;
}

#MESSAGE .inner{
  padding: 0;
  position: relative;
}
#MESSAGE .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE .inner .items .item01{
  order: 2;
  background: url(../images/img2428.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE .inner .items .item02{
    order: 2;
  }
  #MESSAGE .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE .inner .items .item02 .btn{
    width: 100%;
  }

}


/************
MESSAGE2
************/


#MESSAGE2 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE2 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE2 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE2 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE2 .inner .items .item01{
  order: 2;
  background: url(../images/img2429.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE2 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE2 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE2 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE2 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE2 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE2 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE2 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE2 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE2 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE2 .inner .items .item02{
    order: 2;
  }
  #MESSAGE2 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE2 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE2 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE2 .inner .items .item02 .btn{
    width: 100%;
  }

}


/************
MESSAGE3
************/


#MESSAGE3 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE3 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE3 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE3 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE3 .inner .items .item01{
  order: 2;
  background: url(../images/img2430.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE3 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE3 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE3 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE3 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE3 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE3 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE3 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE3 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE3 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE3 .inner .items .item02{
    order: 2;
  }
  #MESSAGE3 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE3 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE3 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE3 .inner .items .item02 .btn{
    width: 100%;
  }

}



/************
MESSAGE4
************/


#MESSAGE4 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE4 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE4 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE4 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE4 .inner .items .item01{
  order: 2;
  background: url(../images/img2431.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE4 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE4 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE4 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE4 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE4 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE4 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE4 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE4 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE4 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE4 .inner .items .item02{
    order: 2;
  }
  #MESSAGE4 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE4 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE4 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE4 .inner .items .item02 .btn{
    width: 100%;
  }

}



/************
MESSAGE5
************/


#MESSAGE5 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE5 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE5 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE5 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE5 .inner .items .item01{
  order: 2;
  background: url(../images/img_nophoto.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE5 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE5 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE5 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE5 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE5 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE5 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE5 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE5 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE5 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE5 .inner .items .item02{
    order: 2;
  }
  #MESSAGE5 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE5 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE5 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE5 .inner .items .item02 .btn{
    width: 100%;
  }

}



/************
MESSAGE6
************/


#MESSAGE6 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE6 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE6 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE6 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE6 .inner .items .item01{
  order: 2;
  background: url(../images/img_nophoto.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE6 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE6 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE6 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE6 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE6 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE6 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE6 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE6 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE6 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE6 .inner .items .item02{
    order: 2;
  }
  #MESSAGE6 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE6 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE6 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE6 .inner .items .item02 .btn{
    width: 100%;
  }

}



/************
MESSAGE7
************/


#MESSAGE7 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE7 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE7 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE7 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE7 .inner .items .item01{
  order: 2;
  background: url(../images/img_nophoto.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE7 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE7 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE7 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE7 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE7 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE7 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE7 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE7 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE7 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE7 .inner .items .item02{
    order: 2;
  }
  #MESSAGE7 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE7 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE7 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE7 .inner .items .item02 .btn{
    width: 100%;
  }

}

/************
MESSAGE8
************/


#MESSAGE8 .inner{
  padding: 0;
  position: relative;
}

#MESSAGE8 .inner{
  padding: 0;
  position: relative;
}
#MESSAGE8 .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGE8 .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGE8 .inner .items .item01{
  order: 2;
  background: url(../images/img_nophoto.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE8 .inner .items .item02{
  order: 1;
  background: url(../images/img02.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGE8 .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGE8 .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGE8 .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGE8 .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGE8 .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGE8 .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGE8 .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGE8 .inner .items .item01{
    order: 1;
    padding: 50% 50%;
  }
  #MESSAGE8 .inner .items .item02{
    order: 2;
  }
  #MESSAGE8 .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGE8 .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGE8 .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGE8 .inner .items .item02 .btn{
    width: 100%;
  }

}



/************
MESSAGETOP
************/


#MESSAGETOP .inner{
  padding: 0;
  position: relative;
}

#MESSAGETOP .inner{
  padding: 0;
  position: relative;
}
#MESSAGETOP .inner .items{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#MESSAGETOP .inner .items .item{
  width: 36%;
  padding: 8% 7%;
}
#MESSAGETOP .inner .items .item01{
  order: 2;
  background: url(../images/back_logo.png)no-repeat;
  background-position: center center;
  background-size: cover;
}
#MESSAGETOP .inner .items .item02{
  order: 1;
  background-color: #000000;
  background-position: center center;
  background-size: cover;
}
#MESSAGETOP .inner .items .item02 .title{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9%;
  padding-left: 30px;
  position: relative;
  letter-spacing: 0.2em;
}
#MESSAGETOP .inner .items .item02 .title:before{
  content: "";
  background: url(../images/icon01.png)no-repeat;
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  bottom: 0;
}
#MESSAGETOP .inner .items .item02 .title span{
  color: #d90112;
}
#MESSAGETOP .inner .items .item02 h3{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6%;
}
#MESSAGETOP .inner .items .item02 h4{
  font-size: 14px;
  line-height: 2;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: justify;
}


@media screen and (max-width: 767px) {
  #MESSAGETOP .inner .items{
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap: wrap;
  }
  #MESSAGETOP .inner .items .item{
    width: 90%;
    padding: 10% 5%;
  }

  #MESSAGETOP .inner .items .item01{
    order: 1;
    padding: 20% 20%;
  }
  #MESSAGETOP .inner .items .item02{
    order: 2;
  }
  #MESSAGETOP .inner .items .item02 .title{
    font-size: 16px;
  }
  #MESSAGETOP .inner .items .item02 h3{
    font-size: 18px;
  }
  #MESSAGETOP .inner .items .item02 h4{
    font-size: 14px;
  }
  #MESSAGETOP .inner .items .item02 .btn{
    width: 100%;
  }

}