body {
  /*font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;*/
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.noto_sans{font-family: 'Noto Sans JP', sans-serif;}
.noto_serif{font-family: 'Noto Serif JP';}

.container {
  /*width: 1140px;*/
  /*margin: 0 auto;*/
}
#wrapper{
  width: 100%;
  overflow-x: hidden;
}
/*ヘッダー*/
header{
  background: #111111;
  color:#fcfcfc;
  padding: 30px 0;
  /*font-family: "Ryumin", serif;*/
}
p.tel{
  font-size: 12px;
}
span.tel{
  font-size: 30px;
  font-weight: bold;
  padding-left: 5px;
  letter-spacing: 1;
}
span.sub_title{
  font-size: 14px;
}
header h1{
  font-size: 30px;
  font-weight: 500;
}
.nav_ul{
  margin-left: auto;
}
.nav_li{
  list-style:none;
  float: left;
  text-align: center;
}
.nav_li span{
  font-size:12px;
  color: #5FA365;
  letter-spacing: 1px;
}
.nav_li a{
  display: block;
  padding-left: : 35px;
  color: #fcfcfc;
}

.nav_li a:hover{
  text-decoration: none;
  opacity: 0.8;
}

.li01{width: 130px;}
.li02{width: 130px;}
.li03{width: 130px;}
.li04{width: 130px;}

.rl{
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
.abso{
  position: absolute;
  right: 100px;
  top:200px;
  display: block;
  height: 720px;
}
.header_span1{
  font-size: 30px;
  background-color: #333333;
  color: #fcfcfc;
  padding: 30px 20px;
  line-height: 2.6em;
}
.header_span2{
  font-size: 58px;
  background-color: #333333;
  color: #fcfcfc;
  padding: 30px 20px;
  line-height: 1.8em;
}


#movie{
  padding-top: 200px;
  padding-bottom: 100px;
}
#youtube{
  margin-bottom: 80px;
}
.youtube_p{
  margin-left: -25px;
}
.movie_span1{
  font-size: 52px;
  background-color: #333333;
  color: #fcfcfc;
  padding: 30px 20px;
  line-height: 2em;
}
#movie .p1,#movie .p2{
  font-size: 18px;
  line-height: 2em;
  font-weight: bold;
}

#case{
  background-color: #111111;
  color: #fcfcfc;
}
.case_flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.case_flex h2{
  font-size: 52px;
  background-color: #343434;
  padding: 30px 20px;
  position: absolute;
  top:-150px;
  right:50px;
}
.case_content{
  position: relative;
  right: 100px;
}
.case_flex p{
  line-height: 0;
}
.case_p{
  font-size: 32px;
  line-height: 2em!important;
  padding-left: 1em;
}



#about{
  padding: 180px 0;
}

#about h1{
  padding-bottom: 30px;
}

#about .p1{
  font-size: 24px;
  line-height: 2em;
  padding-bottom: 50px;
}

#about h2{
  font-size: 32px;
}

#about .p2{
  font-size: 18px;
  line-height: 2em;
}

#flow{
  background: #111111;
  padding: 100px 0;
  color: #fcfcfc;
}
#flow h1{
  font-size: 46px;
}
#flow ul{
   padding-left: 0;
}

#flow ul li{
  display: block;
  width: 100%;
  padding:20px;
  border:1px solid #fcfcfc;
  margin-bottom: 30px;
  font-size: 24px;
  text-align: center;
  background-image: url(../images/line.png);
  background-repeat: no-repeat;
  background-position: top 0 left 80px;
}
#flow ul li.li08{
  width: 48%;
  float: left;
}
#flow ul li.li09{
  width: 48%;
  float: right;
}
#flow ul li::before{
  content:' ';
  position: relative;
  left:14px;
  display: block;
  float: left;
  /*border-right:1px solid #fcfcfc;*/
  padding-right: 25px;
}
#flow ul li::after{
  content:' ';
  position: relative;
  left:10px;
  display: block;
  float: left;
  border-left:1px solid #fcfcfc;
}
#flow ul li.li01{
  background-color: #6C532B;
}
#flow ul li.li01::before{
  content:'1';
}
#flow ul li.li02::before{
  content:'2';
}
#flow ul li.li03{
  background-color: #6C532B;
}
#flow ul li.li03::before{
  content:'3';
}
#flow ul li.li04::before{
  content:'4';
}
#flow ul li.li05{
  background-color: #6C532B;
}
#flow ul li.li05::before{
  content:'5';
}
#flow ul li.li06::before{
  content:'6';
}
#flow ul li.li07::before{
  content:'7';
}
#flow ul li.li08::before{
  content:'8';
}
#flow ul li.li09::before{
  content:'9';
}

#company{
  padding:100px 0;
}

#company h1{
  font-size: 52px;
}
#company .p1{
  text-align: center;
  font-size: 18px;
  margin-bottom: 80px;
  line-height: 2em;
}
#company .p2{
  font-size: 12px;
  line-height: 2em;
}
#company span.tel{
  font-size: 24px;
}
#company span.tel2{
  font-size: 38px;
  font-weight: bold;
}


footer{
  background: #111111;
  color: #fcfcfc;
  padding: 40px 0;
}
footer .p1{
  font-size: 28px;
}
footer ul{
  margin-bottom: 80px;
  padding-left: 0;
}
footer ul li{
  float: left;
  list-style: none;
  padding-right: 20px;
}
footer ul li a{
  color: #fcfcfc;
}
footer ul li a:hover{
  text-decoration: none;
  color: #fcfcfc;
  opacity: 0.8;
}
.copyright{
  text-align: center;
  font-size: 10px;
}

.p3{
  font-size: 14px;
  font-family: sans-serif;
}

.sp_show{display: none;}
.xl_show{display: none;}
#drawer{display: none;}
@media(min-width: 2300px){
  .xl_show{
    display: flex;
  }
}
@media(min-width: 1140px) and (max-width: 2229px){
    .xl_show{
      display: flex;
    }
    .case_flex h2{
    font-size: 27px;
    background-color: #343434;
    padding: 10px 10px;
    position: absolute;
    top:-50px;
    right:20px;
  }
  .case_content{
    position: static;
    right:0px;
    width: 100%;
  }
  .case_flex p{
    line-height: 0;
  }
  .case_p{
    font-size: 14px;
    line-height: 2em!important;
    padding-left: 0;
    padding-bottom: 30px;
  }
}



@media(max-width: 1140px){
  .pc_show{
    display: none;
  }
  .sp_show{
    display: inherit;
  }
  #drawer{
    display: inherit;
  }
  header .text-right{
    text-align: left!important;
  }
  p.tel{
  font-size: 10px;
  }
  span.tel{
    font-size: 16px;
    font-weight: bold;
    padding-left: 5px;
    letter-spacing: 1;
  }
  span.sub_title{
    font-size: 10px;
  }
  header h1{
    font-size: 16px;
    font-weight: 500;
  }

  .rl{
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
  }
  .abso{
  position: absolute;
  width: calc(100% - 40px);
  left: 20px;
  top:50px;
  display: block;
  height: auto;
  text-align: right;
  }
  .header_span1{
    font-size: 16px;
    background-color: #333333;
    color: #fcfcfc;
    padding: 10px 10px;
    line-height: 1.6em;
  }
  .header_span2{
    font-size: 22px;
    background-color: #333333;
    color: #fcfcfc;
    padding: 10px 10px;
    line-height: 1.2em;
  }



  #youtube iframe{
    width: 100%;
    min-height: 220px;
  }
  #movie{
  padding-top: 100px;
  padding-bottom: 50px;
  }
  #youtube{
    margin-bottom: 20px;
  }
  .youtube_p{
    margin-left: 0;
  }
  .movie_span1{
    font-size: 22px;
    background-color: #333333;
    color: #fcfcfc;
    padding: 10px 10px;
    line-height: 2em;
  }
  #movie .p1,#movie .p2{
    font-size: 14px;
    line-height: 2em;
    font-weight: bold;
    text-align: center;
  }

  #case{
  background-color: #111111;
  color: #fcfcfc;
  padding-bottom: 50px;
  }
  .case_flex{
    display: block;
    /*justify-content: center;
    align-items: center;*/
  }
  .case_flex h2{
    font-size: 22px;
    background-color: #343434;
    padding: 10px 10px;
    position: absolute;
    top:-150px;
    right:50px;
  }
  .case_content{
    position: static;
    right:0px;
    width: 100%;
  }
  .case_flex p{
    line-height: 0;
    text-align: center;
  }
  .case_p{
    font-size: 14px;
    line-height: 2em!important;
    padding-left: 0;
    padding-bottom: 30px;
  }


  #about{
    padding: 50px 0;
  }

  #about h1{
    padding-bottom: 30px;
  }

  #about .p1{
    font-size: 14px;
    line-height: 2em;
    padding-bottom: 25px;
  }

  #about h2{
    font-size: 18px;
  }

  #about .p2{
    font-size: 12px;
    line-height: 2em;
  }


  #flow{
    background: #111111;
    padding: 50px 0;
    color: #fcfcfc;
  }
  #flow h1{
    font-size: 20px;
  }
  #flow ul{
    padding-left: 0;
  }
  #flow ul li{
    display: block;
    width: 100%;
    padding:10px;
    border:1px solid #fcfcfc;
    margin-bottom: 20px;
    font-size: 11px;
    text-align: center;
    background-image: url(../images/line.png);
    background-repeat: no-repeat;
    background-position: top 0 left 40px;
  }
  #flow ul li.li08{
    width: 48%;
    float: left;
  }
  #flow ul li.li09{
    width: 48%;
    float: right;
  }
  #flow ul li::before{
    content:' ';
    position: relative;
    left:7px;
    display: block;
    float: left;
    /*border-right:1px solid #fcfcfc;*/
    padding-right: 25px;
  }
  #flow ul li::after{
    content:' ';
    position: relative;
    left:10px;
    display: block;
    float: left;
    border-left:1px solid #fcfcfc;
  }
  #flow ul li.li01{
    background-color: #6C532B;
  }
  #flow ul li.li01::before{
    content:'1';
  }
  #flow ul li.li02::before{
    content:'2';
  }
  #flow ul li.li03{
    background-color: #6C532B;
  }
  #flow ul li.li03::before{
    content:'3';
  }
  #flow ul li.li04::before{
    content:'4';
  }
  #flow ul li.li05{
    background-color: #6C532B;
  }
  #flow ul li.li05::before{
    content:'5';
  }
  #flow ul li.li06::before{
    content:'6';
  }
  #flow ul li.li07::before{
    content:'7';
  }
  #flow ul li.li08::before{
    content:'8';
  }
  #flow ul li.li09::before{
    content:'9';
  }

  #company{
    padding:50px 0;
  }

  #company h1{
    font-size: 20px;
  }
   #company h2{
    font-size: 16px;
    font-weight: bolder;
  }
  #company .p1{
    text-align: center;
    font-size: 12px;
    margin-bottom: 80px;
    line-height: 2em;
  }
  #company .p2{
    font-size: 10px;
    line-height: 2em;
  }
  #company span.tel{
    font-size: 16px;
  }
  #company span.tel2{
    font-size: 20px;
    font-weight: bold;
  }

  footer{
    background: #111111;
    color: #fcfcfc;
    padding: 20px 0;
  }
  footer .p1{
    font-size: 16px;
  }
  footer ul{
    margin-bottom: 40px;
    padding-left: 0;
  }
  footer ul li{
    float: left;
    list-style: none;
    padding-right: 5px;
    font-size: 10px;
  }
  footer ul li a{
    color: #fcfcfc;
  }
  footer ul li a:hover{
    text-decoration: none;
    color: #fcfcfc;
    opacity: 0.8;
  }
  .copyright{
    text-align: center;
    font-size: 10px;
  }
}

@media(min-width: 996px) and (max-width: 1139px){
.case_flex h2{
    font-size: 27px;
    background-color: #343434;
    padding: 10px 10px;
    position: absolute;
    top:50px;
    right:20px;
  }
  .case_content{
    position: static;
    right:0px;
    width: 100%;
    padding-top: 150px;
  }
}

header{
  position: relative;
}
.btn{
  position: relative;
  right: 20px;
}
.btn span::before{
  display: block;
  height: 1px;
  width: 24px;
  background-color: #fcfcfc;
}
.btn span{
  display: block;
  height: 1px;
  width: 24px;
  background-color: #fcfcfc;
  margin:7px 0;
}
.btn span::after{
  display: block;
  height: 1px;
  width: 24px;
  background-color: #fcfcfc;
}

#nav_sp{
  width: 240px;
  padding: 20px;
  position: absolute;
  right: 30px;
  top:50px;
  display: none;
  background-color: #111111;
  z-index: 100;
}
#nav_sp ul{
  padding-left: 0;
}
#nav_sp li{
  padding: 10px 0;
  list-style: none;
  text-align: center;
}
#nav_sp li a{
  color: #fcfcfc;
}

@media(max-width: 782px){
.p3{
  font-size: 12px;
  font-family: sans-serif;
  padding: 0 30px;
}
}