@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&family=Zen+Kaku+Gothic+Antique:wght@400;500;900&display=swap');

/* すべて */
*{
  box-sizing: border-box;
}
body{
  margin: 0;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  text-align: center;
  color: #474B42;
}
ul{
  margin: 0;
  padding:0;
}
li{
  list-style-type: none;
}
a{
  text-decoration: none;
  color: inherit;
}
img{
  max-width: 100%;
  vertical-align: bottom;
  border:none;
}
h1,h2,h3,h4,h5,h6,p{
  margin:0;
}
.flex{
  display: flex;
}
.flex_center{
  justify-content: center;
}
.flex_between{
  justify-content: space-between;
}
.flex_end{
  justify-content: flex-end;
}
.flex_top{
  align-items: flex-start;
}
.flex_middle{
  align-items: center;
}
.flex_column{
  flex-direction: column;
}
.flex_wrap{
  flex-wrap: wrap;
}
.wrapper{
  overflow: hidden;
}


/* すべてここまで */

header{
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 0;
}
header::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#17110E,#1D1812);
  opacity: 0.6;
}
.header_container{
  position: relative;
  width: 1800px;
  max-width: 94%;
  margin: 0 auto;
}
.header_logo{
  width: 100px;
  max-width: 15vw;
}
.header_menu{
  display: flex;
  flex-grow: 1;
}
.header_container ul{
  flex-grow: 1;
}
.header_container ul li{
  margin: 0 2.5%;
  font-size: 14px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.header_container ul li:nth-last-child(1){
  position: relative;
  margin-left: 4%;
  padding: 0.4em 3em;
  background-color: #EB7F29;
  border: 1px solid #fff;
}
.header_container ul li:nth-last-child(1)::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 25%;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%,-50%);
}

.mv{
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}
.mv_bg{
  max-height: 100vh;
}
.mv_bg_fixed{
  position: relative;
  top: 0;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  z-index: 0;
}
.mv_bg_fixed::before{
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../img/mv.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mv_bg img{
  visibility: hidden;
  opacity: 0;
}
.mv_title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.mv_arrow{
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.section_wrapper{
  position: relative;
  width: 1920px;
  max-width: 100%;
  margin: 0 auto;
}
.section_top{
  width: 100%;
  height: 200px;
  background-color: #fff;
}
.section_head{
  position: relative;
  width: 100%;
}
.section_head_bg{
  width: 100%;
}
.bg_line{
  width: 110%;
  margin-left: -5%;
}
.section_content{
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
}
.section_inner{
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
h2{
  padding: 0 2em 0 3em;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #474B42;
  text-align: left;
}
h3{
  font-size: 13px;
  font-weight: 400;
}
h3.vertical{
  writing-mode: vertical-rl;
  margin-top: 2em;
  margin-left: 11em;
  letter-spacing: 1em;
}
.section_main{
  position: relative;
  z-index: 2;
  background-color: #fff;
}
.section_left{
  width: 34%;
  margin-right: 6%;
}
.section_right{
  width: 60%;
}
#aboutus .section_left{
  margin-top: 20%;
  margin-bottom:-3em;
  text-align: right;
}
#aboutus .section_right{
  margin-top: -4em;
}
.section_right p{
  width: 524px;
  max-width: 90%;
  margin-bottom:3em;
  text-align: left;
  letter-spacing: 0.1em;
  line-height: 2.4em;
}
#aboutus .section_left img{
  width: 100%;
  max-width: 400px;
  margin-left: -20%;
}
#business .section_top{
  background-color: #F7F7F7;
}
#business .section_main{
  background-color: #F7F7F7;
}
.section_left_inner{
  width: 240px;
  max-width: 100%;
  margin-left: auto;
}
.section_right_inner{
  text-align: left;
}
.section_right_inner p{
  margin:1em 0 2em;
  font-size: 14px;
}
.section_right_inner a{
  font-size: 14px;
}
.section_right_inner span a{
  border-bottom:1px solid #474B42;
}
h4{
  font-size: 20px;
  font-weight: 900;
}
#business .section_main{
  padding-bottom:3em;
}
h5{
  font-size: 20px;
  font-weight: 900;
}
#mission{
  position: relative;
  background-color: rgba(255, 255, 255, 0.85);
  padding:8em 0;
}
.mission_title{
  margin-top:3em;
}
.mission_title p{
  font-size: 18px;
  margin-bottom:0.8em;
}
.mission_title h3{
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom:3em;
}
.mission_title h3 span{
  position: relative;
  z-index: 5;
}
.mission_title h3 span::before{
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -0.4em;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/line1.png");
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
}
.mission_block{
  width: 720px;
  max-width: 100%;
  margin: 0 auto 3em;
}
.mission_left{
  width: 25%;
}
.mission_left p{
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: 20px;
  font-weight: 900;
}
.mission_left p span{
  position: absolute;
  top: -0.5em;
  right: calc(100% + 0.1em);
  font-size: 2em;
  color: #EB7F29;
}
.mission_right{
  width: 75%;
  padding: 0.5em 2em;
  text-align: left;
  border-left: 1px solid #474B42;
}
.mission_right h6{
  font-size: 14px;
  font-weight: 900;
  margin-bottom:1em;
}
.mission_right p{
  font-size: 14px;
  line-height: 2em;
}
#message{
  position: relative;
  padding:6em 0;
  background-color: #fff;
}
.message_inner{
  position: relative;
  width: 880px;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom:4em;
  border-bottom:1px solid #474B42;
}
.message_title{
  position: relative;
  z-index: 2;
  width: 45%;
  text-align: right;
}
.message_title h2{
  padding:0;
  text-align: right;
}
.message_title h3.vertical{
  margin-left:auto;
  margin-right:8em;
}
.message_img{
  position: absolute;
  top: 0;
  right: 100%;
  width: 95%;
  transform: translate(40%,-34%);
}
.message_text{
  width: 55%;
  padding-top:4em;
}
.message_text p{
  text-align: left;
  margin-top:3em;
  letter-spacing: 0.09em;
  line-height: 2.1em;
}
.message_sign{
  margin-top:3em;
}
.message_sign span{
  font-size: 13px;
}
.message_sign img{
  width: 6em;
  margin-left: 2em;
}
.message_bottom{
  width: 880px;
  max-width: 100%;
  margin: 0 auto;
  padding-top:4em;
}
.message_bottom_left{
  width: 32%;
}
.message_bottom_left p{
  display: inline-block;
  font-size: 14px;
  line-height: 2.4em;
  text-align: left;
}
.message_bottom_right{
  width: 68%;
}
.message_bottom_right p{
  font-size: 14px;
  line-height: 2.1em;
  text-align: left;
}
#company{
  position: relative;
  padding:5em 0 6em;
  background-color: rgba(71, 75, 66, 0.5);
  color: #fff;
}
#company h2{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  text-align: center;
}
.table_container table{
  margin:3em auto 0;
  text-align: left;
}
.table_container table th{
  padding-right: 2em;
  font-size: 14px;
  font-weight: 400;
}
.table_container table td{
  padding: 1em 0 1em 2em;
  font-size: 16px;
  font-weight: 400;
}
.contact_btn{
  position: relative;
  width: 350px;
  max-width: 65%;
  margin: 3em auto;
  background-color: #EB7F29;
  border: 1px solid #fff;
}
.contact_btn::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 25%;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%,-50%);
}
.contact_btn a{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding:0.8em 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
}
footer{
  position: relative;
  padding: 2.5em 0;
  background-color: #17110E;
}
.footer_logo{
  width: 68px;
  max-width: 12vw;
  margin: 0 auto 1.5em;
}
.copyright{
  color: #fff;
  font-size: 13px;
}



/* レスポンシブ */
@media screen and ( min-width:641px){
  .sp{
    display: none !important;
  }
}
@media screen and ( max-width:640px){
  .pc{
    display: none !important;
  }
  .sp_flex{
    display: flex;
  }
  .sp_column{
    flex-direction: column;
  }
  header{
    padding:4vw 0;
  }
  header img{
    vertical-align: middle;
  }
  .header_logo{
    margin-left: 3%;
  }
  .header_menu{
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    height: 100vh;
    background-color: rgba(23, 17, 14, 0.8);
    transform: translateX(100%);
    transition: 200ms;
  }
  .header_menu.active{
    transform: translateX(0);
  }
  .header_menu ul{
    justify-content: center;
    width: 100%;
  }
  .header_menu ul li{
    margin:5vw auto;
    font-size: 4.2vw;
    font-weight: 400;
  }
  .header_menu ul li:nth-child(1){
    width: 16vw;
  }
  .header_container ul li:nth-last-child(1){
    margin-left: auto;
  }
  .menu_btn{
    position: relative;
    z-index: 5;
    width: 12vw;
  }
  .menu_btn .close{
    display: none;
  }
  .menu_btn.active .open{
    display: none;
  }
  .menu_btn.active .close{
    display: block;
  }

  .mv_bg_fixed::before{
    background-image: url("../img/mv_sp.jpg");
    background-position: bottom;
  }
  .mv_title{
    width: 65%;
  }

  .section_top{
    height: 24vw;
  }
  h2{
    padding:0 0 0 10vw;
    font-size: 7.2vw;
  }
  h3.vertical{
    margin-top:4vw;
    margin-left: 15vw;
    font-size: 2.4vw;
    letter-spacing: 0.8em;
  }
  #aboutus .section_main{
    align-items: flex-end;
    padding-bottom: 8vw;
  }
  #aboutus .section_left{
    position: relative;
    width: 39%;
    margin-left: 8%;
    margin-right: -20%;
  }
  #aboutus .section_right{
    width: 75%;
  }
  #aboutus .section_right p{
    font-size: 3.2vw;
    width: 80%;
    margin:8em auto 2em;
    line-height: 2em;
  }

  #business .section_inner{
    align-items: baseline;
  }
  h3{
    font-size: 2.4vw;
    letter-spacing: 0.4em;
    margin-left: 2em;
  }
  #business .section_main{
    padding:0 15% 10vw;
  }
  .section_left{
    width: 100%;
    text-align: center;
    margin:0;
  }
  .section_left_inner{
    width: 100%;
  }
  .section_left_inner img{
    margin-bottom:4vw;
  }
  .section_right{
    width: 100%;
  }
  h4{
    font-size: 4.2vw;
  }
  .section_right p{
    width: 100%;
    max-width: 100%;
  }
  .section_right_inner p{
    font-size: 2.4vw;
    margin:1em auto;
  }
  .section_right_inner a{
    font-size: 2.4vw;
  }
  h5{
    font-size: 4.2vw;
    text-align: left;
  }
  #mission{
    padding:20vw 0;
  }
  .mission_logo img{
    width: 12vw;
  }
  .mission_title p{
    font-size: 4.2vw;
  }
  .mission_title h3{
    font-size: 4.8vw;
    margin-left: 0;
  }
  .mission_block{
    width: 80%;
    margin:0 auto;
  }
  .mission_left{
    width: 100%;
    padding-bottom:4vw;
  }
  .mission_left p{
    margin-right: -1em;
    font-size: 3.6vw;
    letter-spacing: 0.08em;
  }
  .mission_right{
    width: 100%;
    padding:5vw 0 15vw 0;
    border-top: 1px solid #474B42;
    border-left: none;
  }
  .mission_right h6{
    margin-bottom:0.5em;
    font-size: 3.2vw;
    line-height: 1.9em;
    text-align: center;
  }
  .mission_right p{
    padding:0 1.5em;
    font-size: 3vw;
    text-indent: -1em;
  }
  #message{
    padding:0 0 15vw;
  }
  .message_inner{
    position: static;
    width: 84%;
    margin:0 auto;
    padding-top:45vw;
  }
  .message_img{
    width: 100%;
    right: auto;
    left: 0;
    transform: translate(0,-30%);
  }
  .message_title{
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .message_title h2{
    display: inline-block;
    text-align: left;
  }
  .message_title h3.vertical{
    display: inline-block;
    writing-mode: horizontal-tb;
    margin-left: 2em;
  }
  .message_text{
    width: 100%;
    padding-top:0;
  }
  .message_text p{
    margin-top:2em;
    font-size: 3.2vw;
    line-height: 1.8em;
  }
  .message_sign span{
    font-size: 2.7vw;
  }
  .message_sign img{
    width: 5em;
    margin-left: 1.5em;
  }
  .message_bottom{
    width: 84%;
    margin:0 auto;
    padding-top:10vw;
  }
  .message_bottom_left{
    width: 100%;
  }
  .message_bottom_left p{
    width: 100%;
    font-size: 3.2vw;
  }
  .message_bottom_left p span{
    margin-left: 1.5em;
  }
  .message_bottom_right{
    width: 75%;
    margin: 4vw 0 4vw auto;
  }
  .message_bottom_right p{
    font-size: 2.7vw;
    letter-spacing: 0.09em;
    line-height: 1.8em;
  }
  #company{
    padding:20vw 0 15vw;
  }
  #company h2{
    padding:0;
    font-size: 6.4vw;
  }
  .table_container table{
    width: 84%;
    margin:5vw auto;
  }
  .table_container table th{
    width: 35%;
    font-size: 2.4vw;
    padding-right: 0;
  }
  .table_container table td{
    font-size: 2.4vw;
    padding:5vw 0;
  }
  .contact_btn a{
    padding:1em 0;
    font-size: 3.6vw;
  }
  footer{
    padding:8vw 0;
  }
  .copyright{
    font-size: 2.4vw;
  }
}
/* レスポンシブここまで */