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

#main_v{
  position:relative;
  justify-content: center;
  align-items: center;
  padding:3vw 0 5vw 0;
}

#main_v h1{
  width:41.98%;
  margin-right:5.73%;
  margin-bottom:0px;
}
#main_v div{
  width:38.073%;
}
#main_v h2{
  margin-bottom:0px;
}
#main_v h2 span:nth-of-type(1){
  font-size:1.5vw;
  display:block;
}
#main_v h2 span:nth-of-type(1) + img{
  margin:0.8vw 0 1.5vw 0;
}
#main_v h2 span:nth-of-type(2){
  font-size:1.3vw;
  display:block;
  text-align:right;
  margin-top:0.5vw;
}


.nav_wrapper {
   width: 100%;
  background:#EB0100;
  padding:1.2rem 0;
   margin:0rem auto 13.5rem auto;
}

#navi{
margin:0 auto;
  max-width:990px;
}
#navi ul{
  display:flex;
  justify-content: center;
}
#navi ul li{
   font-family: KiwiMaru;
  width:20%;
  border-left:1px solid #ff8a8a;
  box-sizing: border-box;
}
#navi ul li:nth-of-type(1){
  width:25%;
}
/*
#navi ul li:nth-of-type(2){
  width:16%;
}
#navi ul li:nth-of-type(3){
  width:16%;
}
#navi ul li:nth-of-type(4){
  width:28%;
}*/
#navi ul li:nth-of-type(5){
   border-right:1px solid #ff8a8a;
}


#navi ul li a{
  font-size:2rem;
  text-align:center;
  display:block;
  padding:0.6em 0 0.8em 0;
  color:#fff;
}
/*#navi ul li:last-child a{
  background:url(../img/navi_bird.png) right center/1.7222em no-repeat;
}*/
#navi ul li a span{
  padding-left:1.1em;
  display:inline-block;
  background:url(../img/navi_arrow.png) 0 0.9rem/0.833em no-repeat;
}

#omoi{
  background:url(../img/omoi_bg.jpg) center center/cover no-repeat;
  padding:10rem 0 7rem 0;
}
h3{
  font-size:4rem;
  text-align:center;
}
h3 img{
  margin-bottom:0.2em;
}
h4{
  font-size:2.4rem;
  text-align:center;
  margin:1.5em 0 2em 0;
}
#omoi .baloon{
  position:absolute;
  top:-16rem;
  left:0px;
  width:100%;
  text-align:center;
}
#omoi .flex{
  justify-content: center;
  align-items: center;
  flex-wrap:nowrap;
}
#omoi .flex img{
  width:39.192%;
  margin-right:4%;
}

#omoi .flex p{
  font-size:2rem;
  line-height:2;
}
#omoi .btn{
  text-align:center;
}
#omoi .btn a{
  display:inline-block;
  font-size:2.2rem;
  color:#EB0100;
  background:url(../img/btn_arrow.png) 0.5em center/1.864em no-repeat;
  background-color:#FFF;
  border-radius:3em;
  border:solid 2px;
  padding:0.6em 3.5em 0.6em 4.5em;
  
}
#outline{
  padding:8rem 0 10rem 0;
}

#outline table{
  width:100%;
  border-bottom:1px solid #CCC;
}
#outline table th{
  background-color:#d4f2f6;
  font-size:1.8rem;
  border-top:1px solid #CCC;
  font-weight:normal;
  padding:1em;
  width:7em;
}
#outline table td{
  font-size:1.8rem;
  padding:1em;
  border-top:1px solid #CCC;
}

#outline .small_red{
 color:#cc0000;
font-size:1.4rem;
}

#work{
  padding:6rem 0 11rem 0;
  background:url(../img/work_bg.jpg) center top repeat-y;
}
#work .box{
  background-color:#FFF;
  border-radius:1em;
  box-shadow: 0.3rem 0.3rem 0.3rem 0.3rem rgba(0,0,0,0.1);
  margin-bottom:3rem;
}
#work .box .box_inner{
  width:93%;
  margin:0 auto;
}
#work .box h5{
  text-align:center;
  font-size:2.8rem;
  color:#ff4200;
  padding:1em 0 1em 0;
}
#work .box h5 span{
  font-size:1.8rem;
}
#work .box .img.sp_display{
  display:none;
}
#work .box .img + div.sp_display{
  display:none;
}
#work .box .img img{
  width: 48.335%;
}
#work .box .img + div{
  text-align:center;
  margin:1.5em 0 0em 0;
  font-size:1.8rem;
  padding-bottom:3em;
  justify-content: center;
}
#work .box .img + div p{
  width:48.5%;
}
#work .box .img + div p:nth-of-type(1){
  margin-right:3%;
}
#work .box .img + div span{
  color:#ff4200;
  display:block;
}
#work .box .img + p{
  text-align:center;
  margin:1.5em 0 0em 0;
  font-size:1.8rem;
  padding-bottom:3em;
}
#work .box .img + p span{
  color:#ff4200;
  display:block;
  margin-top:1em;
}
#work .box .comment{
  background-color:#dff5f8;
  padding:1.5em 0 0.5em 0;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
#work .box .comment h6{
  font-size:2.2rem;
  margin-bottom:0.7em;
}
#work .box .comment li{
  flex-wrap:nowrap;
  justify-content: flex-start;
  margin-bottom:1.5em;
}
#work .box .comment li div{
  font-size:1.5rem;
  font-weight:bold;
  color:#FFF;
  background-color:#ee6975;
  border-radius:0.8em;
  line-height:1.2;
  padding:0.5em 1em 0.3em 1em;
  min-width:5em;
  margin-right:1em;
  position:relative;
}
#work .box .comment li div:after{
  border-top: 0.3em solid #ee6975;
  border-right: 0.3em  solid #ee6975;
  border-bottom: 0.3em  solid transparent;
  border-left: 0.3em solid transparent;
  position:absolute;
  content:"";
  left:50%;
  bottom:-0.5em;
  margin-left:-0.3em;
}
#work .box .comment li.east div{
  background-color:#147cb2;
}
#work .box .comment li.east div:after{
  border-top: 0.3em solid #147cb2;
  border-right: 0.3em  solid #147cb2;
}
#work .box05 .bg{
  padding-bottom:10rem;
  background:url(../img/work05_bg.jpg) 0 bottom/100% no-repeat;
}
#work .box05 .comment {
    background-color: #daec9d;
}
#work .btn{
  text-align:center;
  padding:3em 0;
}
#work .btn a{
  display:inline-block;
  font-size:2.4rem;
  color:#FFF;
  background:url(../img/btn_arrow2.png) 0.5em center/1.917em no-repeat;
  background-color:#EB0100;
  border-radius:3em;
  padding:0.6em 3.5em 0.6em 4.5em;
  
}
#work .product{
  position:relative;
  text-align:center;
}
#work .product span{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:2.8rem;
  padding-top:2.5em;
}

#contact{
  padding:6rem 0 18rem 0;
  background:url(../img/contact_bg2.jpg) center bottom no-repeat,url(../img/contact_bg.jpg) center top no-repeat;
}
#contact h3{
  margin-bottom:1em;
}
#contact .box{
  margin-bottom:4rem;
}
#contact .box .bg{
  background-color:#FFF;
  padding:0 4.5% 2em;
  margin-top:-1px;
}
#contact .box .ttl{
  font-size:2.8rem;
  text-align:center;
  line-height:1.4;
  position:relative;
  top:-1em;
  margin-bottom:-0.5em;
}
#contact .box .ttl span{
  font-size:2.2rem;
}
#contact .box .img img{
          width: 48.174%;
}
#contact .map{
  margin-bottom:6rem;
}
#contact .map iframe{
  width:55%;
}
#contact .map div{
  width:41%;
  font-size:1.8rem;
  line-height:2;
}
#contact .map div li{
  justify-content: flex-start;
  line-height:1.6;
  margin-top:0.8em;
}








@media screen and (min-width: 768px) and (max-width: 990px) {
  #navi ul li a {
    font-size: 1.8vw;
}
  #omoi .flex p {
    font-size: 2vw;
}
  #contact .map iframe {
    height:50vw;
}
  
  
}




@media screen and (max-width: 767px) {
  
#main_v {
  display:block;
    padding: 5vw 3vw 0vw 3vw;
}
  #main_v h1 {
    width: 100%;
    margin-right: 0%;
    margin-bottom:8vw;
    text-align:center;
}
  #main_v h1 img{
    width:80%;
  }
  #main_v div {
    width: 100%;
}
  #main_v h2 span:nth-of-type(1) {
    font-size: 3.6vw;
    text-align:center;
}
  #main_v h2 span:nth-of-type(1) + img {
    width:80%;
    margin: 1vw auto 4vw auto;
    display:block;
}
  #main_v h2 span:nth-of-type(2) {
    font-size: 3.3vw;
    margin-top: 1.5vw;
}
  
  
 .nav_wrapper {
    padding: 0rem 0;
    margin: 0rem auto 0rem auto;
} 
  .toggle {
    display: block;
    position: absolute;
    right: 0.5em;
    top: 4.3em;
    width: 3em;
    height: 3em;
    cursor: pointer;
    z-index: 11;
	overflow:hidden;
    background-color:#EB0100;
    border-radius:50%;
    
}
  .toggle.fixed{
    position:fixed;
    top: 1em;
  }
.toggle span {
    display: block;
    position: absolute;
    width: 1.5em;
    border-bottom: solid 0.6vw #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 0.75em;
}

.toggle span:nth-child(1) {
    top: 0.9em;
}

.toggle span:nth-child(2) {
    top: 1.4em;
}

.toggle span:nth-child(3) {
    top: 1.9em;
}
.toggle.active span:nth-child(1) {
    top: 1.4em;
    left: 0.75em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {
    top: 1.4em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
  #navi{
    position:fixed;
    left:0px;
    top:0;
    background-color:#EB0100;
    padding:0px;
    padding-top:36vw;
    box-sizing: border-box;
    height:100vh;
    width:100%;
    margin-left:100vw;
    transition-duration:0.5s;
    z-index:10;
  }
  #navi.active{
    margin-left:0vw;
  }
  #navi ul {
    display: block;
    border-bottom:1px solid #CCC;
}
  #navi ul li{
    width:100%!important;
    border-left:none;
    border-top:1px solid #CCC;
  }
  #navi ul li a{
  padding:0.8em 0 0.8em 0;
}
  #navi ul li a span{
    width:90%;
    margin:0 auto;
  }
  #navi ul li:last-child a {
    /*background: url(../img/navi_bird.png) 75% center/1.7222em no-repeat;*/
}
  
  #omoi{
    margin-top:15vw;
    padding: 8rem 0 5rem 0;
  }
  #omoi .baloon {
    top: -11rem;
}
  #omoi .baloon img{
    width:9%;
  }
  h3 {
    font-size: 2.6rem;
}
  #omoi h3 img{
    width:43%;
  }
  #omoi .flex{
    display:block;
    width:90%;
    margin:0 auto;
  }
  #omoi .flex img {
    width: 70%;
    margin:1em auto;
    display:block;
}
  #omoi .flex p {
    font-size: 1.3rem;
    white-space: nowrap;
}
  #omoi .btn a {
    font-size: 1.6rem;
    margin-top:1.5em;
}
  #outline {
    padding: 4rem 0 5rem 0;
}
  #outline h3 img{
    width:30%;
  }
  h4 {
    font-size: 1.8rem;
}
  #outline table th {
    font-size: 1.4rem;
}
  #outline table td {
    font-size: 1.4rem;
}
  #work {
    padding: 6rem 0 5rem 0;
    background: url(../img/work_bg.jpg) center top/100% repeat-y;
}
  #work h3 img {
    width: 15%;
}
  #work .box h5 {
    font-size: 2rem;
}
  #work .box h5 span {
    font-size: 1.4rem;
}
  #work .box .box_inner {
    width: 88%;
}
  #work .box .img{
    display:block;
}
  #work .box .img.pc_display{
    display:none;
}
  #work .box .img img {
    width: 100%;
}
  #work .box .img img:first-child {
    margin-bottom:1em;
}
   #work .box .img + div {
    font-size: 1.6rem;
     padding-bottom:2em;
} 
  #work .box .img + p {
    font-size: 1.6rem;
}
  #work .box .img.sp_display{
  display:block;
}
#work .box .img + div.sp_display{
  display:block;
  margin-top:0px;
}
  #work .box .img + div p:nth-of-type(1) {
    margin-right: 0%;
    width:100%;
}
  
  #work .box05 .bg {
    padding-bottom: 5rem;
}
  #work .btn a {
    font-size: 1.8rem;
}
  #work .product span {
    font-size: 1.4rem;
}
  #contact {
    padding: 4rem 0 3rem 0;
    background: url(../img/contact_bg2.jpg) center bottom/150% no-repeat,url(../img/contact_bg.jpg) center top no-repeat;
}
  #contact h3 img {
    width: 15%;
}
  #contact .box .ttl {
    font-size: 2rem;
    top: -0.5em;
    margin-bottom: 0.5em;
}
  #contact .box .ttl span {
    font-size: 1.6rem;
}
  #contact .box .img{
    display:block;
    width:95%;
    margin:0 auto;
}
  #contact .box .img img {
    width: 100%;
}
  #contact .box .img img:first-child {
    margin-bottom:1em;
}
  #contact .map{
    display:block;
  }
  #contact .map iframe {
    width: 100%;
    height:70vw;
}
  #contact .map div {
    width: 100%;
    font-size: 1.6rem;
    margin-top:0.5em;
  }
  


}