/*
Theme Name: demo-theme
*/

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: YuGothic,'Yu Gothic',sans-serif;
  line-height: 2;
background: #10182C
}

a {
  color: ;
  text-decoration: none;
}

a:hover {
 text-decoration: none;
}





/* トップスライダー */
.top-slider img{
 width: 100%
}

.slider-item {
  text-align: center;
}
.slider-item img {
    vertical-align: bottom}
/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
 right: -300px;
  bottom: 0;
  width: 300px;
	
  background: #10182C;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  right: 0;
  opacity: 1;
}
nav .inner {
  padding: 25px 0;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #fff;
}
nav .inner ul li a {
  display: block;
  color:#fff;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #707070;
}
@media screen and (max-width: 767px) {
  nav {
 right: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position:absolute;
  top: 50%;
    right: 10px;
    transform: translate(-10px, -50%);-webki-transform: translate(-10px, -50%);-moz-transform: translate(-10px, -50%);
  width: 50px;
  height: 50px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.open .toggle_btn {
 right: 330px;
}
.toggle_btn span {
  display: block;
  position: absolute;
left:  0;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(2) {
  width: 40px;
}
.toggle_btn span:nth-child(3) {
  width: 36px;
}
.toggle_btn span:nth-child(4) {
 width: 32px;
}
.toggle_btn span:nth-child(1) {
  top: 0px;height: 0;
}
.toggle_btn span:nth-child(2) {
  top: 29px;
}
.toggle_btn span:nth-child(3) {
  top: 37px;
}
.toggle_btn span:nth-child(4) {
 top: 45px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.open .toggle_btn span:nth-child(2), .open .toggle_btn span:nth-child(4) {
  width: 40px
}
.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translate(-1px,4px) rotate(-45deg);
  transform: translate(0px,0px) rotate(-45deg)
}
.open .toggle_btn span:nth-child(1),.open .toggle_btn span:nth-child(3) {
  display: none
}
.open .toggle_btn span:nth-child(4) {
  -webkit-transform: translate(-1px,-4px) rotate(45deg);
  transform: translate(0px,-15px) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .open .toggle_btn {
   right: 250px;
  }
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}
/*============
main
=============*/
main {
  width: 100%;
  transition: all .5s;
}
.open main {
  margin-right: 300px;
}
.menu{position: absolute;
  right: 50px;-webkit-transform: translateX(-50px);-moz-transform: translateX(-50px);
    transform: translateX(-50px);height: 98px;
    top: 0;}
.arial{font-family: 'Arial','Arial Rounded MT Bold',sans-serif;}
.fw-b{font-weight: bold}
.c-fff{color: #fff !important}
.c-707070{color:#707070}
.t-c{text-align: center}
.t-l{text-align: left}
.f-80,.top6-link i{font-size: 70px}
.f-50{font-size: 50px}
.f-30{font-size: 30px}
.f-15,p{font-size: 15px}
.flex{display: flex;}
.jc-sb{justify-content: space-between}
header{position: relative;height: 98px;}
.db {width: 100px;display: flex;
    flex-direction: column;
    justify-content: space-around;}
.db i{font-size: 40px}
.back-444855{background-color: #444855}
.header_logo img{width: 130px;margin: 10px 0 0;}
.title{position: relative}
.title h1{
position: absolute;
top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);left: 30px;}
.title h2{
position: absolute;
top: 70%;-webkit-transform: translateY(-70%);-moz-transform: translateY(-70%);transform: translateY(-70%);left: 30px;}
.top1-inner,.top1 figure{flex-basis: 50%}
.top1 figure img{width:100%;vertical-align: bottom}
article,.dotted,.section-content{width: 1000px;margin: 0 auto}
.mt-30{margin: 60px auto 0}
.mb-30{margin-bottom: 60px}
.pt-30{padding: 60px 0 0}
.pb-30{padding: 0 0 60px}
.dotted {background-image: url('img/dotted.jpg');background-position: top;background-size: contain;background-repeat: no-repeat;}
.back-444855{background-color:#444855}
.button a {
    position: relative;
    display: flex;
    justify-content:  center;
    align-items: center;
    margin: 0 auto;
    width:420px;
    padding: 10px 15px;
    color: #444855;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    background: #fff;
    overflow:hidden;
}
.button a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 190%;
    height: 700%;
    content: "";
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
    transform: translateX(-98%) translateY(-25%) rotate(45deg);
    background: #707070;
    opacity: 0.2;
}
.button a:hover:before {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.after{background: #fff;color: #10182C}
.before{background: #10182C;color: #fff}
.sliderArea fugure{flex-basis: 50%}
.sliderArea {
  max-width: 100%;
  margin-right: auto;margin-left: auto;
  padding: 0 25px;
}

.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.top4 figure img{width: 100%}
.top5 figure img{width: 80%}
.top6-link i,.top6-link{display: block}
.top6 table{width: 50%}
.top6 th,.top6  td{border-bottom: 1px solid #fff;}
 .top6  th{width: 80px}
.top6  td{padding: 5px 0 5px 10px;}
iframe{width: 100%}

.top6-l a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;  color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    background: #444855;
    overflow:hidden;
   padding: 10px 15px;
    
}
.top6-l a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 500%;
    content: "";
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translateX(-150%) translateY(-25%) rotate(45deg);
    transform: translateX(-150%) translateY(-25%) rotate(45deg);
    background: #fff;
    opacity: 0.2;
}
.top6-l a:hover:before {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.button a i,.top6-l a i{margin: 0 0 0 10px}
.pc-none{display: none}
.top6-inner img{width: 70%}
.top6-inner{display: flex;
    flex-direction: column;
    justify-content: space-between;}
.slick-list {
    overflow: unset !important}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #10182C;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 15%;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}
.top3{overflow: hidden}
.top2,.top3,.top4,.top5,.top6{padding:80px 0}
.top1-inner{place-self: center;}
.title img{opacity:0.5}
.top1 p{margin:30px auto 0}
.page section{margin: 150px auto}

.page-title,.page p,.page-inner{margin: 50px auto}
.page-title img{width: 70%}
.page .top6-l a {width: 420px;margin: 0 auto}
.mb-0{margin-bottom: 0 !important}
.jc-sa {justify-content: space-around}
.sm1 a{flex-basis: 20%}
#coating .flex,.sm1 .flex,#else .flex{flex-wrap: wrap}
#coating .flex figure,#else .flex figure{flex-basis: 30%}
#else .flex figure img,#coating .flex figure img,.sm1 .flex img{width:100%}
.page-template-service-menu-php .f-50 .f-15{display: block}
#coating figure,#else figure{margin-bottom: 50px}
.page-template-service-menu-php .f-80{position: relative;top: -30px}
.line_style05 {
    padding: 50px;
    position: relative;
}

.line_style05::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: -15px;
    width: 10px;
    height: 100%;
    border-right: 4px solid #fff;
    transform: skewX(-35deg);
}
#service-table {border-collapse: collapse;width: 1000px !important;background: #000}
#service-table th,#service-table td{padding: 0 !important;border: 1px solid #fff;}
.service-table thead th,.service-table tbody th,.service-table tbody td{vertical-align: middle;}
.service-table thead td{vertical-align:bottom}
.car-size{height: 22px}
.car-img{padding: 10px;display: table-cell;height: 70px;vertical-align: middle;width: 80%;margin: 0 auto}
.service-table th{width:25%;background: none}
.service-table td{height: 100px}
#service-table .price{padding: 0 10px !important}
.car-img img{height: auto;
    max-width: 100%;}
.smtitle{border: 1px solid #fff}
#coating dl{display: flex;justify-content: start;width: 520px;
    margin: 0 auto;}
#coating dd{margin: 0 0 0 50px}
#coating dt{position: relative;background: #10182C}
#coating dt::before{position: absolute;
  top: 48px;
  left: 24px;
  width: 3px;
    height: 100%;
  content: "";
  background-color: #fff;
    animation: yellow_circle 2.0s forwards linear;
}
.linenone::before{display: none}
#company table {background: #444855;margin: 0 auto;border-collapse: collapse;}
#company table th,#company table td{border: 1px solid #fff;padding: 20px}
.top5 .flex{justify-content:center;flex-wrap:wrap}
.top5 .flex a{flex-basis:40%;margin:5px 10px}
.top5 .flex a img{width:100%}
.table-c th,.table-c td{border-bottom:1px solid #fff;padding:10px}
@media screen and (max-width: 1000px) {
	article,.dotted,.section-content{width: 100%}
.f-80{font-size: 45px}
.f-50{font-size: 30px}
.f-30{font-size: 20px}
.f-15,p{font-size: 13px}
.title img{width: 100px}
.mt-30{margin: 45px auto 0}
.mb-30{margin-bottom: 45px}
.pt-30{padding: 45px 0 0}
    .pb-30{padding: 0 0 45px}
    .top1-inner{padding: 0 0 0 5%}
    .top1-inner,.top2 article,.top5 article{padding: 0 5%}
.top3 p,.p5,.top4 p,.top6 .flex{padding-left: 5%;padding-right: 5%;}
.top1 p{margin:20px auto 0}
.page section{margin: 120px auto}
.page-title,.page p,.page-inner{margin: 30px auto}
#coating figure,#else figure{margin-bottom: 30px}
.page article{padding: 0 5%}}

@media screen and (max-width: 767px) {
    .pc-none{display: block}.sp-none{display: none}
.top1 .flex{flex-direction: column}
	.button a,.page .top6-l a {
		width:70%}
    .page .top6-l a{
		width:80%}
.f-80,.top6-link i{font-size: 35px}
.f-50{font-size: 22px}
.f-30{font-size: 16px}
.f-15,p{font-size: 10px}
.db i{font-size: 20px}
.db {width: 55px}
.header_logo img{width: 80px}
header,.menu{height: 70px;}
.menu{right: 30px;-webkit-transform: translateX(-30px);-moz-transform: translateX(-30px);transform: translateX(-30px);}
.toggle_btn {
    right: 0;transform: translate(0, -50%);-webki-transform: translate(0, -50%);-moz-transform: translate(0, -50%);}
    .title img{width: 80px}
.mt-30{margin: 30px auto 0}
.mb-30{margin-bottom: 30px}
.pt-30{padding: 30px 0 0}
    .pb-30{padding: 0 0 30px}
    .top2 figure img{width: 90%}
    .top1 p{margin: 15px auto}
.title h1,.title h2{left: 20px;}
    .top6 .flex img{width: 50%}
    .top6 table{width:100%}
    .top6 .flex{flex-direction: column-reverse;}
.pc-none{padding: 15px 0 0;
    text-align: center;
    display: flex;
    place-items: center;
    justify-content: center;}
    iframe{height: 200px}
.top1 p,.top1 .title{margin:30px auto}
.top2,.top3,.top4,.top5,.top6{padding:50px 0}
.page section{margin: 80px auto}
.page-title,.page p,.page-inner{margin: 25px auto}
#coating figure,#else figure{margin-bottom: 25px}
.sm1 a{flex-basis: 40%}
#coating .flex figure,#else .flex figure{flex-basis: 100%}
.line_style05 {padding: 25px;}
#coating .sm-mb-none,#else .sm-mb-none{margin-bottom: 0}
#coating .sm-spnone,#else .sm-spnone{display: none}
.service-table thead td{vertical-align:top}
#service-table {width: 800px !important;}
#service-table thead td{vertical-align:top}
    #coating dl{width: 100%}
#coating dd{margin: 0 0 0 15px}
	.page-template-company-profile figure img{width:100%}
#company table th{width: 120px;}
#company table th, #company table td {padding: 5px;}
	.table-c th{width:80px}
.table-c th,.table-c td{padding:5px}
}

.disable-auto-tel a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.c-d0aa6c{color:#d0aa6c}
.wpcf7 th {;vertical-align: top;}
.wpcf7 td,.wpcf7 th {border:none;background: #fff;padding: 10px 0 !important;}
.wpcf7 th p {text-align: left;display: flex;justify-content: space-between;width: 95%;}
.contact .hissu {place-items: center;font-size: 10px;line-height: 20px;height: 20px; background:#10182C;color: #fff;padding: 5px 10px 10px;
    height: 30px;}
.contact .nini {place-items: center;font-size: 10px;line-height: 20px;height: 20px;border: 1px solid #10182C;color: #10182C;padding: 5px 10px 10px;
    height: 30px;}

.wpcf7 table{width:100%}
.wpcf7 input, .wpcf7 textarea {width: 100% !important;border: 1px solid #000 !important;padding:10px}
.wpcf7 form {margin: 0 auto !important;}
.wpcf7 .wpcf7-submit{background: #10182C !important;width: 30% !important;color:#fff}
.contact {
    text-align: center;
    border: 1.5px solid #C7C7C7;
    border-radius: 30px;
    padding: 60px;
}
.section-content{background:#fff}
.border-bottom {
    border: 1.5px solid #C7C7C7;
    margin-bottom: 30px;
}
.wpcf7 p{margin:0}
.top1 figure{place-self: center;}
@media screen and (max-width: 767px) {.top1-inner {
    place-self: auto;
}
	.wpcf7 th, .wpcf7 td {display: block;}.contact{padding:30px 5%}
	.wpcf7 input, .wpcf7 textarea,.wpcf7 .wpcf7-submit {width: 100% !important}}

/* 画面幅が1024px以上の時は */
@media screen and (min-width: 561px) {
  .ps-br{
    display: block; /* PCを改行して */
  }

  .sp-br{
    display: none; /* SPの改行を隠す */
  }
}

/* 画面幅が560px以下の時は */
@media screen and (max-width: 560px) {
  .ps-br{
    display: none; /* PCの改行を隠して */
  }

  .sp-br{
    display: block; /* SPを改行する */
  }
}