@charset "UTF-8";
/* =====================================
	全体設定
===================================== */

html{
    font-size: 62.5%;
}

a{
	color:#231815;
	text-decoration:none;
    transition: 0.3s opacity ease;
}

a:hover{
	opacity: 0.6;
}

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
	font-size: 1.8rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	color: #231815;
    line-height: 1.77;
	text-align: left;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
	-ms-text-size-adjust: 100%;/*EgdeMobile*/
	-moz-text-size-adjust: 100%;/*firefox*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";
}

.en{
    font-family: 'Abel', sans-serif;
    font-weight: bold;
}


/* =====================================
	header
===================================== */

header{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

header .logo01{
    position: absolute;
    top: 0;
    left: 0;
}

header .wrap{
    width: 100%;
    height: 160px;
    position: fixed;
    transition: 0.3s all ease;
}

header.fixed .wrap{
    height: 100px;
    background: rgba(255,255,255,0.95);
}

header .wrap img{
    position: absolute;
    top: 15px;
    left: 5%;
    opacity: 0;
    transition: 0.3s all ease;
}

header.fixed .wrap img{
    opacity: 1;
}

header nav ul{
    position: absolute;
    top: 67px;
    right: 5%;
    display: flex;
    justify-content: space-between;
    transition: 0.3s all ease;
}

header.fixed nav ul{
    top: 32px;
}

header nav ul li{
    padding: 0 12px;
}

header nav ul li a{
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    transition: 0.3s all ease;
}

header.fixed nav ul li a{
    color: #231815;
}



/* =====================================
	main
===================================== */

.visual{
    width: 100%;
    height: 784px;
    position: relative;
    background: url("../img/bg01.jpg") center;
    background-size: cover;
}

.thanks .visual, .privacy .visual{
    height: 300px;
}

.visual h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scaleX(0.87);
    letter-spacing: 0.3em;
    color: #fff;
    font-size: 7.0rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
    text-shadow: 0px 0px 15px rgba(0,0,0,1);
}

.visual h1 small{
    font-size: 4.6rem;
}

.visual .copy01{
    position: absolute;
    bottom: 50px;
    left: 3.5625%;
}

.visual .copy01{
    position: absolute;
    bottom: 50px;
    left: 3.5625%;
}

.visual a{
    position: absolute;
    bottom: 22px;
    right: 3.3125%;
}

.thanks .visual + section{
    width: 100%;
    max-width: 800px;
    padding: 200px 40px;
    margin: 0 auto;
}

.privacy .visual + section{
    width: 100%;
    max-width: 1100px;
    padding: 140px 40px 200px;
    margin: 0 auto;
}

.thanks .phoneWrapper{
    background-color: #d0111b;
    padding: 20px 0;
    margin-top: 70px;
    text-align: center;
}

.thanks .phoneWrapper .phoneText {
    color: #fff;
    text-align: left;
    display: inline-block;
}

.thanks .phoneWrapper .phoneText .phoneNumber {
    display: inline-block;
    color: #fff;
    font-size: 40px;
    font-family: 'Abel', sans-serif;
    font-weight: bold;
    pointer-events: none;
    text-decoration: none;
}

#mission{
    width: 100%;
    padding: 80px 40px 133px;
    position: relative;
}

#mission::before{
    content: "";
    position: absolute;
    top: 94px;
    left: 16.875%;
    width: 27px;
    height: 88px;
    background: #d0111b;
}

#mission::after{
    content: "";
    position: absolute;
    top: 328px;
    left: 9.5%;
    width: 148px;
    height: 88px;
    background: url("../img/bg02.png") top left;
}

#mission .inner{
    width: 100%;
    position: relative;
}

#mission .inner::before{
    content: "";
    position: absolute;
    top: 340px;
    right: calc(19.6875% - 40px);
    width: 10px;
    height: 108px;
    background: #d0111b;
}

#mission .inner::after{
    content: "";
    position: absolute;
    top: 113px;
    right: calc(16.625% - 40px);
    width: 148px;
    height: 116px;
    background: url("../img/bg02.png") top left;
}

.ttl01{
    text-align: center;
    line-height: 1;
    font-size: 5.0rem;
    padding-top: 105px;
    margin-bottom: 53px;
    background: url("../img/logo02.png") center top no-repeat;
    background-size: 73px auto;
}

#mission p{
    text-align: center;
}

#service{
    width: 100%;
    position: relative;
    padding: 120px 40px 140px;
}

#service::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 71.25%;
    height: 553px;
    background: #fafafa;
    z-index: -1;
}

#service::after{
    content: "";
    position: absolute;
    top: 80px;
    right: 23.5%;
    width: 148px;
    height: 116px;
    background: url("../img/bg02.png");
}

#service .development{
    width: 100%;
}

.ttl02{
    font-size: 3.0rem;
    line-height: 1;
    padding-left: 24px;
    position: relative;
    font-weight: bold;
    margin-bottom: 20px;
}

.ttl02::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 7px;
    background: #d0111b;
}

#service .development > h3, #service .development > p{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#service .entrusted{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    position: relative;
    padding: 172px 0 100px;
}

#service .entrusted::before{
    content: "";
    position: absolute;
    top: 237px;
    left: 310px;
    width: 10px;
    height: 108px;
    background: #d0111b;
}

#service .entrusted::after{
    content: "";
    position: absolute;
    bottom: 85px;
    left: 0;
    width: 148px;
    height: 118px;
    background: url("../img/bg02.png");
}

#service .entrusted .txtArea{
    width: 37.727%;
    align-self: center;
    padding-left: 60px;
}

#service .entrusted .txtArea h4{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}

#service .entrusted .imgArea{
    width: 58.18%;
}

#service .entrusted .imgArea img{
    width: 93.4375%;
}

#service .case{
    width: calc(100% + 80px);
    background: #fafafa;
    padding: 80px 0 114px;
    margin-left: -40px;
}

#service .case h4{
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 60px;
    text-align: center;
}

#service .case ul{
    width: 1040px;
    margin: 0 auto;
}

#service .case ul .slick-slide{
    width: 490px;
    border-top: 1px solid #231815;
    padding-top: 34px;
    margin-right: 60px;
}

#service .case ul .slick-slide img{
    width: 100%;
    margin: 22px 0;
}

.slick-prev, .slick-next{
    width: 36px;
    height: 75px;
}

.slick-prev{
    left: -70px;
    background: url("../img/prev01.png") center no-repeat;
}

.slick-next{
    right: -70px;
    background: url("../img/next01.png") center no-repeat;
}

#service .labo{
    width: 100%;
    max-width: 1100px;
    padding: 80px 0 108px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
}

#service .labo::before{
    content: "";
    position: absolute;
    bottom: 142px;
    left: 50px;
    width: 10px;
    height: 108px;
    background: #d0111b;
}

#service .labo::after{
    content: "";
    position: absolute;
    top: 68px;
    right: 81px;
    width: 148px;
    height: 116px;
    background: url("../img/bg02.png");
}

#service .labo .imgArea{
    width: 58.18%;
}

#service .labo .imgArea img{
    width: 93.75%;
    margin: 0 0 0 auto;
}

#service .labo .txtArea{
    width: 38.18%;
    align-self: center;
    padding-right: 40px;
}

#service .labo .txtArea h4{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}

#service .merit{
    width: calc(100% + 80px);
    height: 550px;
    padding: 90px 40px 92px;
    margin-left: -40px;
    background: url("../img/bg03.jpg") center no-repeat;
    background-size: cover;
}

#service .merit h4{
    text-align: center;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 60px;
}

#service .merit ul{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#service .merit ul li{
    width: 32%;
    text-align: center;
    color: #fff;
    padding-top: 146px;
    position: relative;
}

#service .merit ul li:nth-child(1){
    background: url("../img/icon01.png") center top 58px no-repeat;
    background-size: 69px auto;
}

#service .merit ul li:nth-child(2){
    background: url("../img/icon02.png") center top 58px no-repeat;
    background-size: 69px auto;
}

#service .merit ul li:nth-child(3){
    background: url("../img/icon03.png") center top 58px no-repeat;
    background-size: 69px auto;
}

#service .merit ul li::before{
    font-family: 'Abel', sans-serif;
    font-weight: bold;
    color: #d0111b;
    text-align: center;
    font-size: 4.8rem;
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

#service .merit ul li:nth-child(1)::before{
    content: "01";
}

#service .merit ul li:nth-child(2)::before{
    content: "02";
}

#service .merit ul li:nth-child(3)::before{
    content: "03";
}

#service .original{
    width: 100%;
    max-width: 890px;
    margin: 0 auto;
    padding: 105px 0 0;
}

#service .original h3{
    margin-bottom: 40px;
}

#service .original ul li{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

#service .original ul li:last-child{
    margin-bottom: 0;
}

#service .original ul li .imgArea{
    width: 23.69%;
}

#service .original ul li .imgArea img{
    width: 100%;
}

#service .original ul li .txtArea{
    width: 72.247%;
    align-self: center;
}

#service .original ul li .txtArea h4{
    margin-bottom: 8px;
}

#information{
    width: 100%;
    padding: 80px 40px 140px;
    background: #fafafa;
}

#information ul{
    width: 100%;
    max-width: 950px;
    border-top: 1px solid #d3d3d3;
    margin: 0 auto;
}

#information ul li{
    border-bottom: 1px solid #d3d3d3;
    padding: 24px 38px;
    font-size: 2.0rem;
}

#information ul li .info{
    padding-left: 136px;
    text-indent: -136px;
    display: block;
}

#information ul li .date{
    margin-right: 28px;
}

#about{
    width: 100%;
    padding: 80px 40px 100px;
}

#about table{
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    line-height: 1.5;
    border-collapse: collapse;
    border-spacing: 0;
}

#about table tr:nth-child(odd) th, #about table tr:nth-child(odd) td{
    background: #fafafa;
}

#about table tr th{
    padding: 24px 0;
    width: 137px;
    text-align: center;
    vertical-align: middle;
}

#about table tr td{
    padding: 24px 0 24px 68px;
}

#contact{
    width: 100%;
    max-width: 1030px;
    padding: 0 40px 80px;
    margin: 0 auto;
}

#contact .privacy{
    text-align: center;
    margin: 0 0 50px;
}

#contact .privacy a{
    text-decoration: underline;
}

footer{
    width: 100%;
    padding: 40px 0;
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
    background: #150000;
}


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

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
	font-size: 3.6vw;
}

/* =====================================
	header
===================================== */

header .logo01{
    width: 65.2vw;
}

header .wrap{
    height: 13.466vw;
}

header.fixed .wrap{
    height: 13.466vw;
}

header .wrap img{
    top: 50%;
    transform: translateY(-50%);
    width: 20.533vw;
}

header nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255,255,255,0.95);
    display: none;
}

header nav ul{
    position: absolute;
    top: 50%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
}

header.fixed nav ul{
    top: 50%;
}

header nav ul li{
    padding: 0;
    margin-bottom: 8vw;
}

header nav ul li:last-child{
    margin-bottom: 0;
}

header nav ul li a{
    font-size: 8vw;
    color: #231815;
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: absolute;
  top: 4.133vw;
  right: 5.33vw;
  width: 5.866vw;
  height: 5.2vw;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.4vw;
  background-color: #fff;
}
.fixed .menu-trigger span {
  background-color: #231815;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(2.42vw) rotate(-45deg);
  background-color: #231815;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
  background-color: #231815;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-2.42vw) rotate(45deg);
  background-color: #231815;
}


/* =====================================
	main
===================================== */

.visual{
    height: 120vw;
    background: url("../img/sp/bg01.jpg") center;
    background-size: cover;
}

.visual h1{
    font-size: 12.2vw;
    text-shadow: 0px 0px 2vw rgba(0,0,0,1);
    line-height: 1.29;
}

.visual h1 small{
    font-size: 7.9733vw;
}

.visual a{
    bottom: 3.733vw;
    right: 4vw;
}

.visual a img{
    width: 12.266vw;
}

.thanks .visual, .privacy .visual{
    height: 120vw;
}

.thanks .visual + section{
    max-width: inherit;
    padding: 15vw 5.33vw 25vw;
}

.privacy .visual + section{
    max-width: inherit;
    padding: 15vw 5.33vw 25vw;
}

.thanks .phoneWrapper{
    padding: 2.66vw 0;
    margin-top: 9.33vw;
}

.thanks .phoneWrapper .phoneText .phoneNumber {
    font-size: 5.33vw;
}

#mission{
    padding: 10.66vw 0 22.266vw;
}

#mission::before{
    top: 22.8vw;
    left: 12vw;
    width: 3.6vw;
    height: 11.733vw;
}

#mission::after{
    top: 82.933vw;
    left: 6.933vw;
    width: 19.733vw;
    height: 11.733vw;
    background: url("../img/bg02.png") top left;
    background-size: 19.733vw auto;
}

#mission .inner::before{
    top: 62.933vw;
    right: 9.33vw;
    width: 1.33vw;
    height: 14.4vw;
}

#mission .inner::after{
    top: -2.266vw;
    right: 8.4vw;
    width: 19.733vw;
    height: 15.466vw;
    background: url("../img/bg02.png") top left;
    background-size: 19.733vw auto;
}

.ttl01{
    font-size: 8.66vw;
    padding-top: 18.4vw;
    margin-bottom: 6.66vw;
    background: url("../img/logo02.png") center top no-repeat;
    background-size: 12.266vw auto;
}

#service{
    padding: 10.66vw 0 16vw;
}

#service::before{
    width: 82%;
    height: 89vw;
}

#service::after{
    top: 9.2vw;
    right: 26.533vw;
    width: 19.733vw;
    height: 15.466vw;
    background: url("../img/bg02.png");
    background-size: 19.733vw auto;
}

.ttl02{
    font-size: 6vw;
    padding-left: 4.8vw;
    margin-bottom: 3.33vw;
}

.ttl02::before{
    width: 2.8vw;
    height: 1.33vw;
}

#service .development > h3, #service .development > p{
    width: 89.33vw;
}

#service .entrusted{
    display: block;
    padding: 16.933vw 0 14.4vw;
}

#service .entrusted::before{
    top: 82vw;
    left: 9.466vw;
    width: 1.33vw;
    height: 14.4vw;
}

#service .entrusted::after{
    top: 22.933vw;
    bottom: auto;
    left: auto;
    right: 6.133vw;
    width: 16.133vw;
    height: 8vw;
    background: url("../img/bg02.png");
    background-size: 19.733vw auto;
}

#service .entrusted .txtArea{
    width: 89.33vw;
    padding-left: 0;
    margin: 0 auto;
}

#service .entrusted .txtArea h4{
    font-size: 4.8vw;
    margin-bottom: 3.733vw;
}

#service .entrusted .imgArea{
    width: 79.733vw;
    margin: 0 auto 8vw;
}

#service .entrusted .imgArea img{
    width: 100%;
}

#service .case{
    width: 100%;
    padding: 16vw 0 14.4vw;
    margin-left: 0;
}

#service .case h4{
    font-size: 6vw;
    margin-bottom: 8vw;
}

#service .case ul{
    width: 78.4vw;
    margin: 0 auto;
}

#service .case ul .slick-slide{
    width: 78.4vw;
    border-top: 0.133vw solid #231815;
    padding-top: 3.733vw;
    margin-right: 0;
}

#service .case ul .slick-slide img{
    margin: 2.4vw 0 3.466vw;
}

.slick-prev, .slick-next{
    width: 4.8vw;
    height: 10vw;
}

.slick-prev{
    left: -9vw;
    background: url("../img/prev01.png") center no-repeat;
    background-size: 4.8vw auto;
}

.slick-next{
    right: -9vw;
    background: url("../img/next01.png") center no-repeat;
    background-size: 4.8vw auto;
}

#service .labo{
    padding: 13.33vw 0 14.4vw;
    display: block;
}

#service .labo::before{
    top: 82vw;
    left: 9.466vw;
    width: 1.33vw;
    height: 14.4vw;
}

#service .labo::after{
    top: 22.933vw;
    bottom: auto;
    left: auto;
    right: 6.133vw;
    width: 16.133vw;
    height: 8vw;
    background: url("../img/bg02.png");
    background-size: 19.733vw auto;
}

#service .labo .txtArea{
    width: 89.33vw;
    padding-left: 0;
    margin: 0 auto;
}

#service .labo .txtArea h4{
    font-size: 4.8vw;
    margin-bottom: 3.733vw;
}

#service .labo .imgArea{
    width: 79.733vw;
    margin: 0 auto 8vw;
}

#service .labo .imgArea img{
    width: 100%;
}

#service .merit{
    width: 100%;
    height: 202vw;
    padding: 16vw 0 14.4vw;
    margin-left: 0;
    background: url("../img/sp/bg03.jpg") center no-repeat;
    background-size: cover;
}

#service .merit h4{
    font-size: 4.8vw;
    margin-bottom: 10.66vw;
}

#service .merit ul{
    display: block;
}

#service .merit ul li{
    width: 100%;
    padding-top: 29vw;
    margin-bottom: 9.066vw;
}

#service .merit ul li:last-child{
    margin-bottom: 0;
}

#service .merit ul li:nth-child(1){
    background: url("../img/icon01.png") center top 12vw no-repeat;
    background-size: 13.6vw auto;
}

#service .merit ul li:nth-child(2){
    background: url("../img/icon02.png") center top 12vw no-repeat;
    background-size: 13.6vw auto;
}

#service .merit ul li:nth-child(3){
    background: url("../img/icon03.png") center top 12vw no-repeat;
    background-size: 13.6vw auto;
}

#service .merit ul li::before{
    font-size: 9.589vw;
    top: 0;
}

#service .original{
    padding: 16vw 0 0;
}

#service .original h3{
    width: 89.33vw;
    margin: 0 auto 10.66vw;
}

#service .original ul li{
    width: 89.33vw;
    margin: 0 auto 8vw;
}

#service .original ul li .imgArea{
    width: 45.522%;
}

#service .original ul li .txtArea{
    width: 50%;
}

#service .original ul li .txtArea h4{
    margin-bottom: 1.466vw;
}

#information{
    padding: 16vw 0;
}

#information ul{
    width: 89.33vw;
    border-top: 0.133vw solid #d3d3d3;
}

#information ul li{
    border-bottom: 0.133vw solid #d3d3d3;
    padding: 3.9vw;
    font-size: 3.6vw;
}

#information ul li .info{
    padding-left: 0;
    text-indent: 0;
}

#information ul li .date{
    margin-right: 0;
    display: block;
}

#about{
    padding: 16vw 0;
}

#about table{
    width: 89.33vw;
    margin: 0 auto;
}

#about table tr th{
    padding: 2.6vw 3.9vw;
    width: 100%;
    text-align: left;
    background: #fafafa;
    display: block;
}

#about table tr td{
    padding: 2.6vw 3.9vw 3.466vw;
    background: #fff!important;
    display: block;
}

#contact{
    padding: 0 0 13.33vw;
}

#contact .form{
    width: 89.33vw;
    margin: 0 auto;
}

#contact .privacy{
    margin: 0 0 6.66vw;
}

footer{
    padding: 5.33vw 0;
    font-size: 2.8vw;
}

}