/*
Theme Name: カーライフショップブーブ
Description: carlifeshop-boveのテーマ
Theme URI: https://carlifeshop-bove.xyz/
Author: GRACE
Author URI: https://gr1.jp/
Version: 1.0
License: GPL
License URI: https://www.gnu.org/copyleft/gpl.html
*/


@charset "utf-8";

/* ==============================================
 Reset
=============================================== */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:bottom;
}
body {
}
article,aside,details,figcaption,figure,main,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    color:#000;
    font-weight:bold;
    background: linear-gradient(transparent 50%, #fdf991 50%);
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse: separate;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
span {
  vertical-align: baseline;
}


/* ==============================================
 Common
=============================================== */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
html {
  font-size: 62.5%;
  overflow-y: scroll;
  margin: 0;
  width: 100%;
  scroll-behavior: smooth;
}
body {
  background: #fefefe;
  color: #333;
  font-family:  YakuHanJP, 'Noto Sans JP', sans-serif , "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
  font-size: 1.6rem;
  font-weight: normal;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  letter-spacing: 0.05em;
}
a {
  cursor: pointer;
  color: #fff;
  outline: medium none;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
a:visited {
    outline: medium none;
}
a:focus {
    outline: medium none;
}
a:active, a:hover {
    outline: medium none;
}
a:hover {
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: bold;
  font-weight: 600;
  margin: 0;
}
h2 {
  color: #0b4e49;
}
h3 {
  color: #0b4e49;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 20px;
}
h4 {
  color: #0b4e49;
  font-size: 1.8rem;
  text-align: left;
}
.serif {
  font-family: 'Noto Serif JP', serif;
}
address {
    font-style: italic;
    margin: 0 0 24px;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
mark {
  background: linear-gradient(transparent 50%, #fdf991 50%);
    color: #000000;
}
p {
	line-height: 1.5;
  letter-spacing: 0.05em;
  transform: rotate(360deg);
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	max-height: 100%;
	padding-top: 0px;
}
code, kbd, pre, samp {
    -moz-hyphens: none;
    font-family: monospace,serif;
    font-size: 1.4rem;
}
pre {
    background: none repeat scroll 0 0 #F5F5F5;
    color: #666666;
    font-family: monospace;
    font-size: 1.4rem;
    margin: 20px 0;
    overflow: auto;
    padding: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
small {
    font-size: 1.3rem;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
dl {
    margin: 0;
}
dt {
  line-height: 1.6;
    font-weight: bold;
    font-weight: 600;
    margin: 0;
}
dd {
  line-height: 1.6;
    margin: 0;
}
menu, ol, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}
li {
  line-height: 1.6;
}
th {
  font-weight: bold;
  font-weight: 600;
  line-height: 1.6;
}
td {
  line-height: 1.6;
}
img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    -webkit-backface-visibility: hidden
}
input[type="text"]:focus,
textarea:focus {
  outline: 0;
}
.md-hidden {
  display: none !important;
}
.box-shadow {
  -webkit-box-shadow: 5px 5px 13px 0px #c9c9c9;
  -ms-box-shadow: 5px 5px 13px 0px #c9c9c9;
  box-shadow: 5px 5px 13px 0px #c9c9c9;
}
a.box-shadow:hover {
  -webkit-box-shadow: 0px 2px 10px 0px #c9c9c9;
  -ms-box-shadow: 0px 2px 10px 0px #c9c9c9;
  box-shadow: 0px 2px 10px 0px #c9c9c9;
}
.pc-hide {
  display: none;
}
.ps-br{
  display: block; /* PCを改行して */
}
.sp-br{
  display: none; /* SPの改行を隠す */
}
.tb-br {
  display: none; /* TBの改行を隠す */
}

/* ==============================================
 Font
=============================================== */
/* Font color
----------------------------------------------- */
.fc-red {
    color: #e51f38;
}

/* Text Align
----------------------------------------------- */
.ta-center {
    text-align: center;
}
.ta-left {
    text-align: left;
}
.ta-right {
    text-align: right;
}


/* ==============================================
 Layout
=============================================== */

/* Common
----------------------------------------------- */
#wrapper {
  background: #fefefe;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1920px;
}
.container {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}
.section.section-unerline {
  padding-bottom: 50px;
}

/* flex grid
----------------------------------------------- */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.grid {
  display: grid;
}

/* column
----------------------------------------------- */
.col-lg-1 {
    width: 12%;
}
.col-lg-2 {
    width: 16.6666%;
}
.col-lg-3 {
    width: 25%;
}
.col-lg-4 {
    width: 33.3333%;
}
.col-lg-5 {
    width: 41.6666%;
}
.col-lg-6 {
    width: 50%;
}
.col-lg-7 {
    width: 57.0833%;
}
.col-lg-8 {
    width: 66.6667%;
}
.col-lg-9 {
    width: 75%;
}
.col-lg-10 {
    width: 83.3334%;
}
.col-lg-11 {
    width: 91.6666%;
}
.col-lg-12 {
    width: 100%;
}

/* Float
----------------------------------------------- */
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.aligncenter {
  text-align: center;
}
.single img.alignleft {
  margin: 0 10px 15px 0;
}
.single img.alignright {
  margin: 0 0 15px 10px;
}
.single img.aligncenter {
  display: block;
  margin: 0 auto 15px;
}

/* Table
----------------------------------------------- */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.table th, .table td {
  line-height: 1.4;
}

/* Micro Clearfix
----------------------------------------------- */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}


/* ==================================
スクロールすると要素をふわっと表示
===================================== */
.sc {
  opacity: 0;
  transition: all .5s ease;
}
.sc.show {
  opacity: 1;
  transform: none;
}
.sc-up {
  transform: translate(0, 100px);
}


/* ==============================================
 header, KV
=============================================== */
.header-top {
  background: #00a799;
  padding: 0.5em;
}
.header-top h1 {
  font-weight: normal;
  font-size: 1.4rem;
  color: #fff;
}
.header-item {
  padding: 10px 0;
}
.header-item .box:first-of-type {
  width: 30%;
  line-height: 5;
}
.header-item .box:first-of-type a:hover {
  opacity: 0.7;
}
.header-item .box:nth-of-type(2) {
  width: 10%;
}
.header-item .box:nth-of-type(2) p {
  line-height: 5;
}
.header-item .box:nth-of-type(3) {
  width: 25%;
}
.header-item .box:last-of-type {
  width: 30%;
}
.header-item .box:last-of-type p {
  font-size: 1.2rem;
  text-align: center;
}
.header-item .tel {
  padding: 10px;
  background-color: #fff;
  border: 4px solid #00a799;
  border-radius: 0;
}
.header-item .tel a {
  font-size: 3rem;
  color: #00ab9e;
}

/* ==============================================
 Navigation
=============================================== */
nav {
  background-color: #e6f4e9;
}
nav li a {
  color: #0b4e49;
  font-size: 1.8rem;
  font-weight: bold;
  display: block;
  padding: 1.25em;
}
nav li a:hover {
  opacity: 0.4;
}
nav .current {
  border-bottom: 3px #0b4e49 solid;
}
#header .drawer-header {
  display: none;
}
#sp-nav {
  display: none;
}


/* 404.php
=============================================== */
.notfound {
  text-align: center;
  margin-bottom: 80px;
}


/* チャート矢印
=============================================== */
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #dadada;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
  text-align: center;
  margin: 0 auto;
}


/* page title 下層ページのタイトル
=============================================== */
#page-title h1 {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  font-size: 4.8rem;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 80px 0;
}

/* heading
----------------------------------------------- */
.heading-2 {
  color: #fff;
  font-size: 3.0rem;
  letter-spacing: 0.05em;
  position: relative;
  margin-bottom: 10px;
}

/* breadcrumbs
----------------------------------------------- */
.breadcrumbs {
  background-color: #e6f4e9;
  font-size: 1.4rem;
  padding: 10px 0;
  letter-spacing: 0.05em;
  margin-bottom: 80px;
}
.breadcrumbs span {
  vertical-align: baseline;
}
.breadcrumbs > span {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
}
.breadcrumbs > span:first-child {
  margin-left: 0;
}
.breadcrumbs a {
  color: #1f1f1f;
}
.breadcrumbs a:hover {
  color: #1f1f1f;
}

/* pager
----------------------------------------------- */
.pager {
  margin-bottom: 80px;
  text-align: center;
}
.pager .wp-pagenavi a,
.pager .wp-pagenavi span {
  border: 1px solid #00ab9e;
  font-size: 1.6rem;
  color: #333;
  display: inline-block;
  margin: 0 10px;
  height: 40px;
  width: 40px;
  line-height: 33px;
  background: #fff;
  border-radius: 50px;
}
.pager .wp-pagenavi a:hover {
  opacity: 0.5;
  border-color: #00ab9e;
}
.pager .wp-pagenavi .current {
  background-color: #00ab9e;
  color: #fff;
  font-weight: normal;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  border: none;
  border-radius: 50px;
}
.pager .wp-pagenavi .pages {
  background: none;
  width: auto;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  color: #333;
  border: none;
  border-radius: 50px;
}


/* ============================================================================================
 共通パーツ
============================================================================================= */
.bg-dot {
  position: relative;
  margin: 0 auto;
  background-color: #ffffff;
  background-image: radial-gradient(#eaeaea 7%, transparent 21%), radial-gradient(#eaeaea 7%, transparent 21%);
  background-size: 8px 8px;
}
span.sizeup {
  font-size: 4.8rem;
}
.underline {
  position: relative;
}
.underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  border-bottom: 4px solid #0b4e49;
  width: 30px;
  margin: 0 auto;
}
.accent {
  color: #ff7800;
}
.italic {
  font-style: italic;
}
.guide {
  text-align: center;
  margin-bottom: 20px;
}
.guide p {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: bold;
}
.drift {
  animation: drift 2s infinite;
}
.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
@keyframes drift {
  0% { transform:translateY(0px); }
  50% { transform:translateY(10px); }
  100% { transform:translateY(  0px); }
}
.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ボタンエレメント
----------------------------------------------- */
.btn {
  width: 40%;
  margin: 0 auto;
}
.btn a {
  display: block;
  padding: 20px 0;
  background-color: #00ab9e;
  border-radius: 50px;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  transition: 0.2s;
  position: relative;
}
.btn a::after {
  font-family: "dashicons";
  content: "\f345";
  border: 2px #fff solid;
  border-radius: 50px;
  position: absolute;
  top: 33%;
  left: 88%;
  font-size: 1.8rem;
}
.btn a:hover {
  opacity: 0.7;
}

/* 薄緑背景
----------------------------------------------- */
.bg-green {
  background-color: #e6f4e9;
}

/* h2緑グラデボーダー
----------------------------------------------- */
.h2-gradation {
  width: 90%;
  height: auto;
  text-align: center;
  border-left: 6px solid #0b4e49;
  border-right: 6px solid #00ab9e;
  margin: 0 auto 40px;
}
.h2-gradation::before,
.h2-gradation::after{
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(to right, #0b4e49 0%, #00ab9e 100%);
}
.h2-gradation h2 {
  color: #0b4e49;
  padding: 20px 0;
  font-size: 2.4rem;
  font-weight: normal;
  text-align: center;
}

/* h2緑ボーダー
----------------------------------------------- */
.h2-border {
  border: 4px solid #00a799;
  padding: 10px 0;
  width: 70%;
  margin: 0 auto 20px;
}
.h2-border h2 {
  color: #00a799;
  font-size: 3.6rem;
  font-weight: normal;
  text-align: center;
}

/* h2緑背景下線ボーダー
----------------------------------------------- */
.h2-green {
  background-color: #e6f4e9;
  padding: 20px 30px;
  width: 100%;
  position: relative;
  border-bottom: 3px solid #dee5f0;
  margin-bottom: 30px;
}

.h2-green:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 25%;
  height: inherit;
  border-bottom: 3px solid #0b4e49;
}
.h2-green h2 {
  color: #333;
  font-size: 2.6rem;
}


/* お問い合わせエレメント
----------------------------------------------- */
.tel {
  background: #fbf548;
  border-radius: 10px;
  padding: 10px;
}
.tel a {
  color:  #0b4e49;
  font-size: 3.2rem;
  font-weight: bold;
  position: relative;
  padding-left: 15%;
  line-height: 1;
}
.tel a::before {
  font-family: "dashicons";
  content: "\f470";
  position: absolute;
  top: 17%;
  left: 0;
}
.tel p {
  text-align: center;
}
.mail {
  background: #e6f4e9;
  border-radius: 10px;
  border: 2px #0b4e49 solid;
}
.mail a {
  color: #0b4e49;
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  position: relative;
  padding: 20px 25px 0 70px;
  transition: 0.2s;
}
.mail a:hover {
  opacity: 0.5;
}
.mail a::before {
  font-family: "dashicons";
  content: "\f465";
  position: absolute;
  top: 45%;
  left: 8%;
}
.mail p {
  color: #0b4e49;
  text-align: center;
}
.mail span {
  font-size: 2rem;
  text-align: center;
  color: #0b4e49;
  font-weight: normal;
}


/* コンテンツ内のお問い合わせエレメント
----------------------------------------------- */
.common-contact {
  background-color: #00ab9e;
  padding: 10px;
}
.common-contact_border {
  border: 1px #fff solid;
  padding: 40px 0;
}
.common-contact h2 {
  color: #fff;
  font-size: 2.4rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 30px;
}
.common-contact .flex {
  justify-content: space-between;
}
.common-contact .box {
  width: 48%;
}
.common-contact .tel {
  padding: 10px 60px;
}
.common-contact .tel a {
  font-size: 4rem;
  margin-bottom: 10px;
}
.common-contact .tel p {
  font-size: 1.4rem;
}
.common-contact .tel a::before {
  top: 20%;
}
.common-contact .mail a {
  padding: 0;
  font-size: 3rem;
  text-align: center;
  line-height: 1;
  padding: 10px 50px 10px 90px;
}
.common-contact .mail a::before {
  top: 14%;
  left: 12%;
}
.common-contact .mail span {
  font-size: 2rem;
  text-align: center;
  color: #0b4e49;
  font-weight: normal;
}

/* ============================================================================================
 TOP
============================================================================================= */

#billboard {
  background-color: #fff;
}
#billboard .bx-wrapper img {
  margin: 0 auto;
}

/* .top-intro
----------------------------------------------- */
.top-intro {
  background: url(images/top/top-bg-01.png) no-repeat center/contain;
  background-color: #0b4e49;
  padding: 60px 0;
  font-size: 1.8rem;
  color: #fff;
}
.top-intro p {
  width: 90%;
  margin: 0 auto;
}

/* .top-feature
----------------------------------------------- */
.top-feature {
  background-color: #e6f4e9;
  padding: 40px 0 50px;
  margin-bottom: 30px;
}
.top-feature h2 {
  font-weight: normal;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 50px;
}
.top-feature h2::before {
  content: "FEATURE";
  font-weight: bold;
  display: block;
}
.top-feature .box {
  flex-basis: 48%;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 50px;
  -webkit-box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
  -moz-box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
  box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
}
.top-feature dl {
  padding: 0 90px 50px;
}
.top-feature dt {
  color: #0b4e49;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  font-size: 2.2rem;
}
.top-feature dd {
  font-size: 1.6rem;
  text-align: justify;
}
.top-feature .container>p {
  text-align: center;
  margin-bottom: 20px;
}
.top-feature .container>p::before {
  content: "＼";
  margin-right: 0.5em;
}
.top-feature .container>p::after {
  content: "／";
  margin-left: 0.5em;
}
.top-feature .btn a {
  font-size: 2.4rem;
}

/* .top-dealer
----------------------------------------------- */
.top-dealer {
  margin-bottom: 40px;
}
.top-dealer .detail {
  text-align: center;
  margin-bottom: 20px;
}
.top-dealer .estimates {
  text-align: center;
  color: #0b4e49;
  margin: 20px 0;
  font-size: 1.8rem;
}
.top-dealer .estimates span {
  font-weight: bold;
}
.top-dealer .estimates::after {
  content: '';/*何も入れない*/
  display: block;/*忘れずに！*/
  width: 60%;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(images/top/top-triangle.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin: 20px auto 0;
}
.top-dealer .box:nth-child(odd) .value {
  background-color: #e6f4e9;
}
.top-dealer .box:nth-child(even) .value {
  background-color: #b3e4bf;
}
.top-dealer .value {
  color: #0b4e49;
  padding: 20px 0;
  font-size: 1.8rem;
  text-align: center;
}
.top-dealer .value .bove {
  margin-bottom: 10px;
}
.top-dealer .value mark {
  font-style: normal;
  color: #0b4e49;
  font-size: 2.3rem;
}
.top-dealer .value mark span{
  font-size: 2.6rem;
}
.top-dealer .value .cheap {
  position: relative;
  background-color: #00ab9e;
  border-radius: 10px;
  font-size: 2rem;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  color: #fff;
}
.top-dealer .value .cheap .number {
  font-size: 3rem;
  font-weight: bold;
}
.top-dealer .value .cheap span{
  position: relative;
}
.top-dealer .value .cheap span:before {
  position: absolute;
  content: "";
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background-color: #fff;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.top-dealer .value .cheap .number:before {
  background-color: rgba(0,0,0,0);
}
.top-dealer .value .cheap:after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 16px;
  background-image: url(images/top/intro-case-arrow.png);
  background-size: contain;
  vertical-align: middle;
  margin: 0 0 4px 4px;

}
.top-dealer .container>p {
  text-align: right;
  color: #0b4e49;
  margin-top: 40px;
}

/* .top-reason
----------------------------------------------- */
.top-reason {
  padding-top: 40px;
  margin-bottom: 120px;
}
.top-reason h2 {
  font-size: 2.4rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 20px;
}
.top-reason .container>p {
  width: 80%;
  margin: 0 auto 30px;
  text-align: justify;
  line-height: 1.75;
}
.top-reason .point {
  background-color: #e6f4e9;
  width: 70%;
  margin: 0 auto;
  padding: 30px 0;
}
.top-reason .point p {
  font-size: 2.4rem;
  text-align: center;
  font-weight: bold;
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  color: #0b4e49;
  width: 80%;
  margin: 0 auto 30px;
}
.top-reason .flex {
  justify-content: space-around;
}
.top-reason li::before {
  font-family: "dashicons";
  content: "\f147";
  color: #0b4e49;
  background-color: #fdea47;
  border-radius: 50px;
  margin-right: 0.5em;
  vertical-align: text-top;
}
.top-reason li {
  color: #0b4e49;
  font-size: 2.4rem;
}

/* .top-service
----------------------------------------------- */
.top-service {
  background:linear-gradient(90deg,#a6dcd7 0%,#a6dcd7 50%,#b3e4bf 50%,#b3e4bf 100%);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 80px;
}
.top-service .container {
  padding-top: 120px;
}
.top-service .h2-gradation {
  width: 70%;
  position: absolute;
  top: -8%;
  left: 15%;
  z-index: 999;
}
.top-service h2 {
  font-size: 3.6rem;
  font-weight: bold;
}
.top-service .service {
  background-color: #fff;
  margin-bottom: 100px;
  padding: 40px 30px 90px 70px;
  width: 90%;
  margin-left: auto;
  margin-top: 60px;
  position: relative;
}
.top-service .service:last-of-type {
  margin-right: auto;
}
.top-service .flex {
  flex-wrap: nowrap;
  margin-bottom: 50px;
  justify-content: space-around;
  position: relative;
}
.top-service h3 {
  color: #0b4e49;
  font-size: 3.4rem;
}
.top-service .service h3::before {
  display: block;
}
.top-service .service h3::before {
  content: "CAR REPAIR";
}
.top-service .service:last-of-type h3::before {
  content: "MAINTENANCE";
}
.top-service .flex>p {
  width: 65%;
  position: absolute;
  top: -45%;
  left: -15%;
  z-index: 999;
}
.top-service .service:last-of-type .flex>p {
  top: -45%;
  left: 50%;
}
.top-service .flex .box {
  width: 47%;
  margin-left: auto;
}
.top-service .service:last-of-type {
  padding: 40px 70px 90px 50px;
  position: relative;
}
.top-service .service:last-of-type .flex .box {
  margin-right: auto;
  margin-left: 0;
  width: 44%;
}
.top-service .btn {
  width: 50%;
  position: absolute;
  left: 20%;
}
.top-service .service:last-of-type .btn {
  left: 26%;
}

/* .top-maintenance
----------------------------------------------- */
.top-maintenance {
  margin-bottom: 60px;
}
.top-maintenance .h2-gradation {
  width: 70%;
  margin: 0 auto 30px;
}
.top-maintenance h2 {
  font-size: 3.6rem;
  font-weight: bold;
}
.top-maintenance p {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  color: #0b4e49;
}

/* .top-maintenance_detail
----------------------------------------------- */
.top-maintenance_detail {
  background-color: #e6f4e9;
  margin-bottom: 80px;
  padding-bottom: 50px;
}
.top-maintenance_detail .flex {
  justify-content: space-around;
  margin-bottom: 60px;
  position: relative;
}
.top-maintenance_detail .flex>p {
  position: absolute;
  z-index: 999;
  top: -10%;
  left: 0;
}
.top-maintenance_detail .box {
  margin-left: auto;
  width: 45%;
}
.top-maintenance_detail .box>p {
  margin-bottom: 30px;
}
.top-maintenance_detail .box .tel {
  margin-bottom: 20px;
  padding: 10px 60px;
}
.top-maintenance_detail .box .mail {
  background-color: #fff;
}
.top-maintenance_detail .box .mail a {
  padding: 15px 25px 15px 110px;
  line-height: 1;
}
.top-maintenance_detail .box .mail a::before {
  top: 23%;
  left: 15%;
}
.top-maintenance_detail .box .mail p {
  margin-bottom: 10px;
}
.top-maintenance_detail .container>p {
  text-align: center;
  margin-bottom: 20px;
}
.top-maintenance_detail .container>p::before {
  content: "＼";
  margin-right: 0.5em;
}
.top-maintenance_detail .container>p::after {
  content: "／";
  margin-left: 0.5em;
}


/* .case-maker
----------------------------------------------- */
.case-maker h3 {
  margin-bottom: 20px;
  font-size: 2.4rem;
}
.case-maker .grid {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 2%;
  margin-bottom: 40px;
}
.case-maker .label {
  color: #1f1f1f;
  line-height: 1.2;
  transition: 0.2s;
}
.case-maker .case-sort--maker:last-of-type .label {
  height: 30px;
}
.case-maker p {
  text-align: center;
  margin-bottom: 20px;
}
.case-maker .logo {
  width: 100%;
  text-align: center;
}
.case-maker .maker a {
  display: block;
  transition: 0.2s;
}
.case-maker .maker a:hover {
  opacity: 0.7;
  transform: translateY(4px);
}
.case-maker .maker .logo .img {
  height: 82px;
  line-height: 56px;
  padding: 10px;
  -webkit-box-shadow: 5px 5px 13px 0px #c9c9c9;
  -ms-box-shadow: 5px 5px 13px 0px #c9c9c9;
  box-shadow: 5px 5px 13px 0px #c9c9c9;
  margin-bottom: 20px;
  transition: 0.2s;
}
.case-maker .maker .logo .img:hover {
  box-shadow: none;
}


/* .case-block
----------------------------------------------- */
.case-block {
  margin-bottom: 60px;
}
.case-block .h2-border {
  margin-bottom: 40px;
}
.case-block>.container {
  padding-top: 50px;
}
.case-block .btn {
  width: 40%;
  margin-top: 50px;
}
.case-block .bx-viewport {
  height: 330px !important;
}


/* ============================================================================================
 初めての方へ
============================================================================================= */

/* .customer-head
----------------------------------------------- */
.customer-head {
  margin-bottom: 90px;
}
.customer-head .h2-gradation {
  width: 100%;
}
.customer-head h2 {
  font-size: 3.2rem;
  font-weight: bold;
  color: #1f1f1f;
  font-style: italic;
}
.customer-head h2 span {
  font-size: 4.2rem;
  color: #0b4e49;
}
.customer-head .container>p {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 30px;
}
.customer-head .flex {
  justify-content: space-around;
  margin-bottom: 30px;
}
.customer-head .flex>p {
  flex-basis: 48%;
  text-align: justify;
  line-height: 2;
}
.customer-head .box {
  background-color: #e6f4e9;
  flex-basis: 30%;
  margin-bottom: 30px;
}
.customer-head .face::before {
  display: block;
  content: '';
  width: 16%;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url(images/contents/customer-face.png);
  margin: 0 auto 10px;
}
.customer-head .face {
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}
.customer-head .flex:nth-of-type(3)::after {
  display: inline-block;
  content: '';
  width: 11%;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url(images/contents/customer-underarrow.png);
  margin: 0 auto;
  background-position: center;
}
.customer-head .flex:last-of-type p {
  font-weight: bold;
}
.customer-head .flex:last-of-type span {
  color: #0b4e49;
}

/* .customer-flow
----------------------------------------------- */
.customer-flow {
  background-color: #e6f4e9;
  padding: 60px 0 80px;
}
.customer-flow .balloon {
  position: relative;
  display: block;
  margin: 0 auto 30px;
  padding: 5px 0;
  min-width: 120px;
  max-width: 100%;
  color: #fbf548;
  background: #0b4e49;
  width: 23%;
}
.customer-flow .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #0b4e49;
}
.customer-flow .balloon p {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
.customer-flow .balloon p::before {
  content: url(images/contents/customer-beginner.png);
  vertical-align: middle;
  margin-right: 0.5em;
}
.customer-flow h2 {
  font-size: 3.2rem;
  text-align: center;
  margin-bottom: 40px;
}
.customer-flow mark {
  font-style: normal;
}
.customer-flow h2 span {
  font-size: 4rem;
  color: #0b4e49;
}
.customer-flow .container>.flex {
  padding: 40px;
  margin-bottom: 50px;
  width: 100%;
  background-color: #fff;
  flex-wrap: nowrap;
  position: relative;
}
.customer-flow .container>.flex:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -30px;
  border: 30px solid transparent;
  border-top: 30px solid #fff;
}
.customer-flow .container>.flex:nth-of-type(9)::before {
  margin-left: 0;
  border: none;
}
.customer-flow h3 {
  text-align: left;
  color: #272727;
}
.customer-flow .flex:nth-of-type(2) h3::before,
.customer-flow .flex:nth-of-type(3) h3::before,
.customer-flow .flex:nth-of-type(4) h3::before,
.customer-flow .flex:nth-of-type(5) h3::before,
.customer-flow .flex:nth-of-type(6) h3::before,
.customer-flow .flex:nth-of-type(7) h3::before,
.customer-flow .flex:nth-of-type(8) h3::before,
.customer-flow .flex:nth-of-type(9) h3::before {
  content: '';
  display: inline-block;
  width: 80px;
  height: 50px;
  background-size: contain;
  vertical-align: inherit;
  background-repeat: no-repeat;
  margin-right: 1em;
}
.customer-flow .flex:nth-of-type(2) h3::before {
  background-image: url(images/common/common-step1.png);
}
.customer-flow .flex:nth-of-type(3) h3::before {
  background-image: url(images/common/common-step2.png);
}
.customer-flow .flex:nth-of-type(4) h3::before {
  background-image: url(images/common/common-step3.png);
}
.customer-flow .flex:nth-of-type(5) h3::before {
  background-image: url(images/common/common-step4.png);
}
.customer-flow .flex:nth-of-type(6) h3::before {
  background-image: url(images/common/common-step5.png);
}
.customer-flow .flex:nth-of-type(7) h3::before {
  background-image: url(images/common/common-step6.png);
}
.customer-flow .flex:nth-of-type(8) h3::before {
  background-image: url(images/common/common-step7.png);
}
.customer-flow .flex:nth-of-type(9) h3::before {
  background-image: url(images/common/common-step8.png);
}
.customer-flow .flex .box {
  width: 55%;
  text-align: justify;
}
.customer-flow .flex>p {
  width: 40%;
}
.customer-flow .flex:nth-of-type(2) .box:first-of-type {
  width: 52%;
}
.customer-flow .flex:nth-of-type(2) .box:last-of-type {
  width: 45%;
}
.customer-flow .flex:nth-of-type(2) .estimate {
  color: #e51f38;
  font-size: 1.5rem;
  font-weight: bold;
}
.customer-flow .flex:nth-of-type(2) .message {
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.customer-flow .flex .box>a {
  color: #0b4e49;
  font-weight: bold;
  display: inline-block;
  transition: 0.2s;
  border-bottom: 1px solid #0b4e49;
  font-size: 1.5rem;
}
.customer-flow .flex .box>a::after {
  font-family: "dashicons";
  content: "\f345";
  border-radius: 50px;
  font-size: 1.2rem;
  background-color: #0b4e49;
  color: #fff;
  padding: 2px;
  text-decoration: none;
  margin-left: 1em;
}
.customer-flow .flex .box>a:hover {
  opacity: 0.7;
}
.customer-flow .flex .link {
  margin-bottom: 20px;
}
.customer-flow .estimate::after {
  content: '';
  display: block;
  width: 28%;
  height: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(images/common/common-bg-fukidashi.png);
}
.customer-flow .tel {
  margin-bottom: 10px;
}
.customer-flow .tel a {
  font-size: 3.6rem;
  padding-left: 20%;
}
.customer-flow .tel a::before {
  left: 9%;
}
.customer-flow .mail a {
  padding: 0;
  font-size: 3rem;
  text-align: center;
  line-height: 1;
  padding: 10px 30px 10px 70px;
}
.customer-flow .mail a::before {
  top: 14%;
  left: 7%;
}
.customer-flow .mail span {
  font-size: 2rem;
  text-align: center;
  color: #0b4e49;
  font-weight: normal;
}
.customer-flow .flex .box>a span {
  font-size: 1.8rem;
}
.customer-flow .flex:nth-of-type(6) a:first-of-type {
  margin-bottom: 1em;
}
.customer-flow .flex:nth-of-type(9) .box p:first-of-type {
  margin-bottom: 20px;
}
.customer-flow .flex:nth-of-type(9) .box {
  width: 48%;
}


/* ============================================================================================
 キズ・ヘコミ
============================================================================================= */

/* .bodyworks-head
----------------------------------------------- */
.bodyworks-head .container>h2 {
  font-size: 4rem;
  text-align: center;
  line-height: 1.75;
  margin-bottom: 30px;
}
.bodyworks-head h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}
.bodyworks-head .container>p {
  text-align: center;
  margin-bottom: 50px;
  line-height: 2;
}
.bodyworks-head .flex:first-of-type {
  margin-bottom: 90px;
}
.bodyworks-head .h2-gradation {
  width: 100%;
}
.bodyworks-head .h2-gradation h2 {
  color: #0b4e49;
  font-weight: bold;
  font-size: 3rem;
}
.bodyworks-head .flex:nth-of-type(3) {
  margin-bottom: 40px;
}
.bodyworks-head .flex:nth-of-type(3) p:first-of-type,
.bodyworks-head .flex:nth-of-type(4) p:last-of-type {
  width: 30%;
}
.bodyworks-head .flex:nth-of-type(3) p:last-of-type,
.bodyworks-head .flex:nth-of-type(4) p:first-of-type {
  width: 68%;
  line-height: 1.75;
}
.bodyworks-head .flex:nth-of-type(4) {
  margin-bottom: 90px;
}
.bodyworks-head .container>p:nth-of-type(2) {
  color: #0b4e49;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 40px;
}
.bodyworks-head .container>p:nth-of-type(2)::before {
  content: "＼";
  margin-right: 0.5em;
}
.bodyworks-head .container>p:nth-of-type(2)::after {
  content: "／";
  margin-left: 0.5em;
}
.bodyworks-head .case p {
  width: 33%;
  margin-bottom: 50px;
}
.bodyworks-head .flex:last-of-type {
  flex-wrap: nowrap;
  margin-bottom: 30px;
}
.bodyworks-head .flex:last-of-type .box {
  border-top: 8px solid #e6f4e9;
  border-bottom: 8px solid #e6f4e9;
  width: 34%;
}
.bodyworks-head .box:first-of-type {
  border-left: 8px solid #e6f4e9;
  border-right: 4px solid #e6f4e9;
}
.bodyworks-head .box:nth-of-type(2) {
  border-left: 4px solid #e6f4e9;
  border-right: 4px solid #e6f4e9;
}
.bodyworks-head .box:last-of-type {
  border-left: 4px solid #e6f4e9;
  border-right: 8px solid #e6f4e9;
}
.bodyworks-head .flex:last-of-type h3 {
  display: flex;
  align-items: center;
  padding-top: 20px;
  margin-bottom: 20px;
}
.bodyworks-head .flex:last-of-type h3:before,
.bodyworks-head .flex:last-of-type h3:after {
  content: "";
  flex-grow: 1;
  height: 8px;
  background: #e6f4e9;
  display: block;
}
.bodyworks-head .flex:last-of-type h3:before {
  margin-right: .4em;
}
.bodyworks-head .flex:last-of-type h3:after {
  margin-left: .4em;
}
.bodyworks-head ul {
  padding: 0 20px;
}
.bodyworks-head li {
  margin-bottom: 1em;
  position: relative;
  padding-left: 1.75em;
  text-indent: -1.75em;
  font-weight: 300;
  text-align: justify;
}
.bodyworks-head li::before {
  font-family: "dashicons";
  content: "\f345";
  font-size: 1.2rem;
  background-color: #0b4e49;
  color: #fff;
  padding: 1px;
  text-decoration: none;
  margin-right: 1em;
}

/* .bodyworks-point
----------------------------------------------- */
.bodyworks-point {
  padding: 20px 0 80px;
  border-bottom: 10px solid #e6f4e9;
  margin-bottom: 200px;
}
.bodyworks-point .h2-gradation {
  width: 100%;
  margin-bottom: 20px;
}
.bodyworks-point .h2-gradation h2 {
  font-size: 3.6rem;
  font-weight: bold;
}
.bodyworks-point .container>p {
  text-align: center;
  margin-bottom: 60px;
  color: #0b4e49;
  font-size: 2.4rem;
}
.bodyworks-point .point {
  color: #0b4e49;
  font-size: 2.6rem;
  letter-spacing: 2px;
  background-color: #e6f4e9;
  border-radius: 50px;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
  width: 30%;
  margin: 0 auto 40px;
}
.bodyworks-point h3 {
  color: #333;
  font-size: 4rem;
  margin-bottom: 50px;
  font-weight: 400;
}
.bodyworks-point h3 mark {
  font-weight: 400;
}
.bodyworks-point .box>p:last-of-type {
  text-align: center;
  color: #0b4e49;
  font-size: 2rem;
  margin-bottom: 60px;
}
.bodyworks-point .box .flex p {
  line-height: 2;
  text-align: justify;
}
.bodyworks-point .box .flex p:first-of-type {
  width: 45%;
}
.bodyworks-point .box .flex p:last-of-type {
  width: 52%;
}
.bodyworks-point .box {
  margin-bottom: 90px;
}
.bodyworks-point .box:last-of-type {
  margin-bottom: 0;
}

/* .bodyworks-repair
----------------------------------------------- */
.bodyworks-repair {
  background: url(images/contents/bodyworks-bg.jpg) no-repeat center/cover;
  background-color: #0b4e49;
  color: #fff;
  padding-bottom: 80px;
  margin-bottom: 60px;
  position: relative;
}
.bodyworks-repair .h2-gradation {
  width: 100%;
  position: absolute;
  top: -25%;
  left: 0;
  z-index: 999;
}
.bodyworks-repair h2 span {
  font-size: 2.4rem;
}
.bodyworks-repair h2 {
  font-size: 3.6rem;
  font-weight: bold;
}
.bodyworks-repair h3 {
  color: #fff;
  font-weight: 500;
  padding-top: 70px;
}
.bodyworks-repair p {
  line-height: 2;
  width: 80%;
  margin: 0 auto;
}

/* .bodyworks-inspection
----------------------------------------------- */
.bodyworks-inspection .h2-gradation {
  margin-bottom: 30px;
}
.bodyworks-inspection h2 {
  font-size: 3.6rem;
  font-weight: bold;
}
.bodyworks-inspection h3 {
  font-size: 3rem;
  margin: 0 auto 50px;
  text-align: left;
  width: 80%;
  font-weight: normal;
}
.bodyworks-inspection p {
  line-height: 2.25;
  width: 49%;
}
.bodyworks-inspection .flex {
  flex-wrap: nowrap;
  margin-bottom: 20px;
}

/* .bodyworks-area
----------------------------------------------- */
.bodyworks-area {
  padding: 60px 0;
}
.bodyworks-area .h2-green {
  margin-bottom: 50px;
}
.bodyworks-area .box {
  border: 2px solid #0b4e49;
  padding: 20px 30px;
}
.bodyworks-area h3 {
  font-size: 2rem;
}
.bodyworks-area p {
  font-weight: 300;
}

/* .bodyworks-maker
----------------------------------------------- */
.bodyworks-maker {
  padding: 50px 0;
}
.bodyworks-maker .box {
  background-color: #fff;
  padding: 30px 0;
}
.bodyworks-maker h3 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
}
.bodyworks-maker h3:before,
.bodyworks-maker h3:after {
  content: "";
  flex-grow: 1;
  height: 8px;
  background: #e6f4e9;
  display: block;
}
.bodyworks-maker h3:before {
  margin-right: .4em;
}
.bodyworks-maker h3:after {
  margin-left: .4em;
}
.bodyworks-maker p {
  padding: 0 30px;
  text-align: justify;
}

/* ============================================================================================
 整備・車検
============================================================================================= */

/* .maintenance-head
----------------------------------------------- */
.maintenance-head .container>h2 {
  font-size: 4rem;
  text-align: center;
  line-height: 1.75;
  margin-bottom: 30px;
}
.maintenance-head .container>h2 mark {
  font-weight: normal;
}
.maintenance-head h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}
.maintenance-head .container>p {
  text-align: left;
  margin-bottom: 50px;
  line-height: 2;
}
.maintenance-head .flex:first-of-type {
  margin-bottom: 50px;
}

/* .maintenance-pro
----------------------------------------------- */
.maintenance-pro {
  padding: 50px 0;
  margin-bottom: 70px;
}
.maintenance-pro h2 {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 10px;
}
.maintenance-pro h2 + p {
  text-align: center;
  color: #0b4e49;
  margin-bottom: 50px;
  font-weight: bold;
  font-size: 2.4rem;
}
.maintenance-pro h2 mark {
  color: #0b4e49;
}
.maintenance-pro h2 + p mark {
  color: #0b4e49;
}
.maintenance-pro .flex {
  margin-bottom: 40px;
}
.maintenance-pro .flex:nth-of-type(1) p:first-of-type,
.maintenance-pro .flex:nth-of-type(2) p:last-of-type {
  width: 30%;
}
.maintenance-pro .flex:nth-of-type(1) p:last-of-type,
.maintenance-pro .flex:nth-of-type(2) p:first-of-type {
  width: 68%;
  line-height: 1.75;
  text-align: justify;
}

/* .maintenance-case
----------------------------------------------- */
.maintenance-case {
  padding-bottom: 60px;
}
.maintenance-case .container>p {
  color: #0b4e49;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 40px;
  text-align: center;
}
.maintenance-case .container>p::before {
  content: "＼";
  margin-right: 0.5em;
}
.maintenance-case .container>p::after {
  content: "／";
  margin-left: 0.5em;
}
.maintenance-case .case p {
  width: 33%;
  margin-bottom: 50px;
}
.maintenance-case .flex:nth-of-type(3) {
  flex-wrap: nowrap;
  margin-bottom: 30px;
}
.maintenance-case .flex:nth-of-type(3) .box {
  border-top: 8px solid #e6f4e9;
  border-bottom: 8px solid #e6f4e9;
  width: 34%;
}
.maintenance-case .box:first-of-type {
  border-left: 8px solid #e6f4e9;
  border-right: 4px solid #e6f4e9;
}
.maintenance-case .box:nth-of-type(2) {
  border-left: 4px solid #e6f4e9;
  border-right: 4px solid #e6f4e9;
}
.maintenance-case .box:last-of-type {
  border-left: 4px solid #e6f4e9;
  border-right: 8px solid #e6f4e9;
}
.maintenance-case .flex:nth-of-type(3) h3 {
  display: flex;
  align-items: center;
  padding-top: 20px;
  margin-bottom: 20px;
}
.maintenance-case .flex:nth-of-type(3) h3:before,
.maintenance-case .flex:nth-of-type(3) h3:after {
  content: "";
  flex-grow: 1;
  height: 8px;
  background: #e6f4e9;
  display: block;
}
.maintenance-case .flex:nth-of-type(3) h3:before {
  margin-right: .4em;
}
.maintenance-case .flex:nth-of-type(3) h3:after {
  margin-left: .4em;
}
.maintenance-case ul {
  padding: 0 20px;
}
.maintenance-case li {
  margin-bottom: 1em;
  position: relative;
  padding-left: 1.75em;
  text-indent: -1.75em;
  font-weight: 300;
  text-align: justify;
}
.maintenance-case li::before {
  font-family: "dashicons";
  content: "\f345";
  font-size: 1.2rem;
  background-color: #0b4e49;
  color: #fff;
  padding: 1px;
  text-decoration: none;
  margin-right: 1em;
}
.maintenance-case .flex:nth-of-type(4) {
  flex-wrap: nowrap;
  margin-bottom: 30px;
}
.maintenance-case .flex:nth-of-type(4) p {
  width: 40%;
}
.maintenance-case .flex dl {
  width: 57%;
  padding: 20px 20px 0 0px;
}
.maintenance-case .flex dt {
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.maintenance-case .flex dd {
  font-weight: 300;
  line-height: 2;
  font-size: 1.4rem;
}

/* .maintenance-point
----------------------------------------------- */
.maintenance-point {
  padding: 60px 0 80px;
  border-bottom: 10px solid #e6f4e9;
  margin-bottom: 50px;
}
.maintenance-point .h2-gradation {
  width: 100%;
  margin-bottom: 20px;
}
.maintenance-point .h2-gradation h2 {
  font-size: 3rem;
  font-weight: bold;
}
.maintenance-point .container>p {
  text-align: center;
  margin-bottom: 60px;
  color: #0b4e49;
  font-size: 2.4rem;
}
.maintenance-point .point {
  color: #0b4e49;
  font-size: 2.6rem;
  letter-spacing: 2px;
  background-color: #e6f4e9;
  border-radius: 50px;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
  width: 30%;
  margin: 0 auto 40px;
}
.maintenance-point h3 {
  color: #333;
  font-size: 4rem;
  margin-bottom: 50px;
  font-weight: 400;
}
.maintenance-point h3 mark {
  font-weight: 400;
}
.maintenance-point .box .flex p {
  line-height: 2;
  text-align: justify;
}
.maintenance-point .box .flex p:first-of-type {
  width: 45%;
}
.maintenance-point .box .flex p:last-of-type {
  width: 52%;
}
.maintenance-point .box {
  margin-bottom: 90px;
}
.maintenance-point .box:last-of-type {
  margin-bottom: 0;
}

/* .maintenance-other
----------------------------------------------- */
.maintenance-other .container {
  padding-bottom: 50px;
}
.maintenance-other .flex {
  flex-wrap: nowrap;
  justify-content: space-around;
}
.maintenance-other .box {
  width: 45%;
}
.maintenance-other h3 {
  margin-bottom: 50px;
}
.maintenance-other .box:last-of-type h3 {
  margin-bottom: 86px;
}
.maintenance-other .box p {
  margin-bottom: 20px;
  text-align: justify;
  line-height: 2;
}
.maintenance-other ul:first-of-type {
  width: 40%;
}
.maintenance-other ul:last-of-type {
  width: 58%;
}
.maintenance-other li {
  margin-bottom: 1em;
  padding-left: 0.5em;
  text-indent: -0.5em;
  font-size: 1.5rem;
}
.maintenance-other li::before {
  font-family: "dashicons";
  content: "\f147";
  font-size: 1.6rem;
  color: #0b4e49;
  text-decoration: none;
  margin-right: 0.25em;
}
.maintenance-other ul:last-of-type li:nth-of-type(2) {
  margin-bottom: 32px;
}

/* .maintenance-factory
----------------------------------------------- */
.maintenance-factory {
  padding: 60px 0 50px;
  margin-bottom: 30px;
}
.maintenance-factory h2 {
  font-size: 3.6rem;
  font-weight: bold;
  background-color: #fff;
}
.maintenance-factory .flex {
  flex-wrap: nowrap;
}
.maintenance-factory .flex:nth-of-type(2) {
  margin-bottom: 70px;
}
.maintenance-factory .flex:nth-of-type(2) p {
  width: 49%;
  text-align: justify;
}
.maintenance-factory .flex:last-of-type .box {
  width: 48%;
  background-color: #fff;
  font-size: 1.5rem;
}
.maintenance-factory .box-title {
  background-color: #0b4e49;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  padding: 20px 0;
}
.maintenance-factory .box:last-of-type .box-title:last-of-type {
  margin-bottom: 20px;
}
.maintenance-factory ol {
  padding: 0 40px;
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.maintenance-factory li {
  line-height: 2;
}
.maintenance-factory .box:last-of-type p {
  padding: 0 20px;
  text-align: justify;
  line-height: 2;
}
.maintenance-factory .box:last-of-type p:first-of-type {
  margin-bottom: 20px;
}

/* .maintenance-inspection
----------------------------------------------- */
.maintenance-inspection .h2-gradation {
  width: 100%;
  margin-bottom: 20px;
}
.maintenance-inspection .h2-gradation h2 mark {
  color: #0b4e49;
}
.maintenance-inspection .h2-gradation h2 {
  font-size: 3rem;
  font-weight: bold;
}
.maintenance-inspection .h2-gradation h2 span {
  font-size: 3.6rem;
}
.maintenance-inspection>.container p {
  text-align: center;
  color: #0b4e49;
  font-size: 2.4rem;
  margin-bottom: 70px;
}
.maintenance-inspection>.container p mark {
  font-weight: normal;
  color: #0b4e49;
}
.maintenance-inspection .flex {
  flex-wrap: nowrap;
}
.maintenance-inspection .flex:nth-of-type(2) p:first-of-type {
  width: 45%;
}
.maintenance-inspection .flex:nth-of-type(2) p:last-of-type {
  width: 54%;
  color: #333;
  text-align: justify;
  font-size: 1.6rem;
  line-height: 2;
}
.maintenance-inspection .flex:nth-of-type(2) p:last-of-type span {
  font-size: 2.4rem;
}
.maintenance-inspection .flex:nth-of-type(2) p:last-of-type mark {
  font-weight: normal;
}
.maintenance-inspection .flex:nth-of-type(4),
.maintenance-inspection .flex:last-of-type {
  justify-content: space-evenly;
  margin-bottom: 50px;
}
.maintenance-inspection li {
  margin-bottom: 0.5em;
  padding-left: 0.5em;
  text-indent: -0.5em;
  font-size: 1.4rem;
}
.maintenance-inspection li::before {
  font-family: "dashicons";
  content: "\f147";
  font-size: 1.4rem;
  color: #0b4e49;
  text-decoration: none;
  margin-right: 0.25em;
}
.maintenance-inspection p.two-year {
  font-size: 1.4rem;
  line-height: 2;
  border: 8px solid #e6f4e9;
  padding: 30px;
  color: #333;
  text-align: justify;
}


/* ============================================================================================
company
============================================================================================= */

/* .company-lead
----------------------------------------------- */
.company-lead .h2-gradation {
  width: 100%;
}
.company-lead h2 {
  font-size: 3.2rem;
  font-weight: bold;
  font-style: italic;
  color: #333;
}
.company-lead h2 span {
  font-size: 4.2rem;
}
.company-lead h2 span.green {
  color: #0b4e49;
}
.company-lead p img {
  width: 100vw;
}

/* .company-detail
----------------------------------------------- */
.company-detail {
  padding-top: 60px;
  margin-bottom: 30px;
}
.company-detail table {
  width: 100%;
  margin: 0 auto 60px;
  background-color: #fff;
  padding: 40px 60px;
  font-size: 1.5rem;
}
.company-detail table th {
  border-bottom: 1px solid #d9d9d9;
  padding: 20px 0 20px 40px;
  text-align: left;
  width: 200px;
  vertical-align: top;
  font-weight: bold;
}
.company-detail table td {
  border-bottom: 1px solid #d9d9d9;
  padding: 20px;
  vertical-align: top;
}
.company-detail table tr:first-of-type th,
.company-detail table tr:first-of-type td {
  border-top: 1px solid #d9d9d9;
}
.company-detail table tr:first-of-type td {
}
.company-detail table a {
  color: #333;
}
.company-detail p img {
  width: 100vw;
}

/* .company-area
----------------------------------------------- */
.company-area {
  margin-bottom: 60px;
}
.company-area h2 {
  font-size: 3.2rem;
  font-weight: bold;
  font-style: italic;
  color: #333;
}
.company-area h2 span {
  font-size: 4.2rem;
}
.company-area h2 span.green {
  color: #0b4e49;
}
.company-area .map {
  height: 0;
  overflow: hidden;
  padding-bottom: 40%;
  position: relative;
  margin-bottom: 40px;
}
.company-area .map iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.company-area .flex {
  flex-wrap: nowrap;
}
.company-area h3 {
  font-size: 1.6rem;
  color: #333;
  text-align: justify;
  line-height: 1.5;
  margin-bottom: 20px;
}
.company-area .box {
  width: 58%;
}
.company-area .box p {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 2;
}
.company-area .flex>p {
  width: 40%;
}



/* ============================================================================================
 プライバシーポリシー
============================================================================================= */
.privacy h2::before {
  font-family: "dashicons";
  content: "\f159";
  color: #0b4e49;
  font-size: 1.8rem;
  vertical-align: bottom;
  margin-right: 0.5em;
}
.privacy h2 {
  text-align: left;
  margin-bottom: 10px;
  font-size: 1.6rem;
  color: #333;
}
.privacy .container p {
  margin-bottom: 60px;
  text-align: justify;
  line-height: 2;
  font-size: 1.5rem;
}
.privacy .container p:nth-of-type(4) {
  margin-bottom: 10px;
}
.privacy .container p:last-of-type {
  margin-bottom: 100px;
}
.privacy .container ul {
  margin-bottom: 60px;
  padding-left: 1em;
}
.privacy .container li {
  line-height: 1.875;
}
.privacy .container li:before {
  content: "・";
  margin-right: 0.5em;
}

/* ============================================================================================
新着情報
============================================================================================= */

/* news archive
----------------------------------------------- */
.news-archive .archive-post {
  margin-bottom: 40px;
  background-color: #fff;
  padding: 4%;
  box-shadow: 10px 10px 15px -10px;
  transition: 0.2s;
}
.news-archive .archive-post:hover {
  box-shadow: none;
  transform: translateY(4px);
}
.news-archive .archive-post:last-of-type {
  margin-bottom: 80px;
}
.news-archive .post-archive {
  float: left;
  width: 70%;
}
.news-archive .post-archive h2 {
  font-size: 1.8rem;
}
.news-archive .post-archive .h2-border {
  padding: 14px 0;
}
.news-archive .post-archive h2 + p {
  margin-top: 20px;
}
.news-archive .post-archive article a {
  display: block;
  color: #1f1f1f;
  text-decoration: none;
  position: relative;
}
.news-archive .post-archive article a:hover {
  opacity: 0.7;
  box-shadow: none;
}
.news-archive .post-archive article a .archive-contents::after {
  font-family: "dashicons";
  content: "\f345";
  color: #ccc;
  font-size: 2.4rem;
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  padding-left: 0.25em;
}
.news-archive .post-archive article a img {
  float: left;
  width: 150px;
}
.news-archive .post-archive article a .archive-contents {
  position: relative;
  margin-left: 170px;
}
.news-archive .post-archive article a .post-date {
  color: #333;
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 0.5em;
}
.news-archive .post-archive article a .cate {
  font-size: 1.2rem;
  display: inline-block;
  margin-bottom: 8px;
}
.news-archive .post-archive article a .cate span {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
}
.news-archive .post-archive article a .cate span.cat-1,
.news-archive .post-archive article a .cate span.cat-2 {
  background: #e6f4e9;
  color: #333;
}
.news-archive .post-archive article a h1 {
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 10px;
  clear: none;
}
.news-archive .post-archive article a .post-excerpt {
  color: #1f1f1f;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}
.news-archive .post-archive article a p {
  line-height: 1.5;
  text-align: justify;
}
.news-archive .post-archive .pager {
  margin-bottom: 0;
}


/* news detail
----------------------------------------------- */
.news-detail .post-detail {
  float: left;
  width: 70%;
  list-style-position: inside;
  padding: 30px;
  box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
}
.news-detail .post-detail .post-date {
  vertical-align: top;
  margin-right: 1em;
}
.news-detail .post-detail .cate {
  display: inline-block;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.news-detail .post-detail .cate span {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
}
.news-detail .post-detail .cate span.cat-1,
.news-detail .post-detail .cate span.cat-2 {
  background: #e6f4e9;
  color: #0b4e49;
}
.news-detail .post-detail h2 {
  position: relative;
  font-size: 2.4rem;
  line-height: 1.25;
  color: #0b4e49;
  margin-bottom: 1em;
  text-align: left;
}
.news-detail .post-detail h2 span {
  font-size: 1.2rem;
  position: absolute;
  right: 15px;
  top: 18px;
  letter-spacing: 0.05em;
  color: #333;
  font-weight: normal;
}
.news-detail .post-detail hr {
  margin-bottom: 2em;
  border-top: 1px solid #333;
}
.news-detail .post-detail .post-thumbnail {
  margin-bottom: 20px;
  text-align: center;
}
.news-detail .post-detail .post-contents {
  line-height: 1.8;
}
.news-detail .post-navigation {
  clear: both;
  text-align: center;
  margin: 50px 0 50px;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  background-color: #fefefe;
}
.news-detail .post-navigation a {
  font-size: 1.4rem;
  color: #0b4e49;
  display: block;
  text-decoration: none;
  padding: 20px;
  position: relative;
}
.news-detail .post-navigation a:hover {
  opacity: 0.5;
}
.news-detail .post-navigation .prev,
.news-detail .post-navigation .next {
  position: relative;
  width: 30%;
}
.news-detail .post-navigation .prev a::after {
  position: absolute;
  left: 0;
  top: 45%;
  width: 8px;
  height: 8px;
  font-family: "dashicons";
  content: "\f341";
  color: #0b4e49;
  font-size: 1.4rem;
}
.news-detail .post-navigation .next a::after {
  position: absolute;
  right: 0;
  top: 45%;
  width: 8px;
  height: 8px;
  font-family: "dashicons";
  content: "\f345";
  color: #0b4e49;
  font-size: 1.4rem;
}
.news-detail .post-navigation .back a {
  color: #fff;
  font-size: 1.6rem;
}
.news-detail .post-navigation .back a:hover {
  opacity: 0.7;
}

/* news widget（サイドナビ）
----------------------------------------------- */
.post-widget {
  float: right;
  width: 27%;
}
.post-widget #archives-cate {
  margin-bottom: 30px;
}
.post-widget h2 {
  color: #00a799;
  text-align: center;
  font-size: 1.6rem;
  padding: 15px 0;
  margin-bottom: 0;
  border: 4px solid #00a799;
  font-weight: normal;
}
.post-widget ul {
  padding: 0 30px;
  background-color: #fff;
}
.post-widget ul li {
  border-bottom: 1px solid #d9d9d9;
}
.post-widget ul li:last-of-type {
  border-bottom: none;
}
.post-widget ul li a {
  color: #1f1f1f;
  letter-spacing: 0.05em;
  display: block;
  padding: 20px 0;
  text-decoration: none;
  position: relative;
}
.post-widget ul li a:hover {
  opacity: 0.5;
}
.post-widget ul li a::after {
  font-family: "dashicons";
  position: absolute;
  right: 10px;
  top: 25%;
  font-size: 2rem;
  content: "\f345";
  color: #ccc;
}
.post-widget ul li a span {
  font-size: 1.4rem;
}


/* ============================================================================================
 施工事例
============================================================================================= */

/* archive-case.php
----------------------------------------------- */
.case-top h2 {
  font-size: 3.2rem;
  margin-bottom: 30px;
  text-align: center;
}
.case-top .lead {
  width: 65%;
  margin: 0 auto 80px;
  line-height: 2;
}

.case-cate p {
  width: 60%;
  margin: 0 auto 40px;
  font-size: 1.8rem;
}
.case-cate .flex {
  flex-wrap: wrap;
  margin-bottom: 160px;
  justify-content: space-around;
}
.case-cate .btn {
  width: 20%;
}
.case-cate .btn a {
  border-radius: 0;
}
.case-cate .btn a::after {
  border: none;
  top: 35%;
}

.case-maker .case-sort--maker>p {
  width: 60%;
  margin: 0 auto 40px;
  font-size: 1.8rem;
  text-align: left;
}

.case-archive {
  padding: 110px 0 100px;
}
.case-archive h2 {
  font-size: 3.6rem;
}
.case-archive h3 {
  font-size: 3.6rem;
  color: #1f1f1f;
  margin-bottom: 60px;
  text-align: center;
  line-height: 1;
}
.case-archive-list li {
  background: #fff;
  margin-right: 2%;
  width: 23.5%;
  transition: all  0.2s ease;
  border: 1px solid #e2e2e2;
}
/* .case-archive-list li:hover {
  box-shadow: none;
  opacity: 0.7;
    transform: translateY(4px);
} */
.case-archive .case-archive-list li {
  margin-bottom: 40px;
}
.case-archive-list li:nth-child(4n) {
  margin-right: 0;
}
.case-archive-list li .thumb {
  display: block;
  text-align: center;
  overflow: hidden;
  transition: .2s;
}
.case-archive-list li .thumb:hover {
  opacity: 0.5;
}
.case-archive-list li .case-archive-contents {
  padding: 15px 15px 20px;
}
.case-archive-list li .category a {
  background: #e6f4e9;
  color: #0b4e49;
  display: inline-block;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 2px 6px;
  margin: 0 2px 5px 0;
}
.case-archive-list li h1 {
  font-size: 1.6rem;
  padding-bottom: 20px;
  line-height: 1.5;
  min-height: 54px;
  text-align: justify;
  font-weight: normal;
}
.case-archive-list li h1 a {
  font-size: 1.6rem;
  color: #0b4e49;
  text-decoration: none;
  letter-spacing: 0.05em;
}
.case-archive-list li h1 a:hover {
  opacity: 0.6;
}
.case-archive-list li table {
  width: 100%;
}
.case-archive-list li table td {
  font-size: 1.2rem;
  line-height: 1.4;
  width: 50%;
  vertical-align: top;
}
.case-archive-list li table td span {
  display: block;
  font-size: 1.0rem;
  color: #1f1f1f;
  margin-bottom: 3px;
}
.case-archive-list li table td a {
  color: #1f1f1f;
  text-decoration: none;
}
.case-archive .default-btn a {
  display: block;
  padding: 25px 0;
  background-color: #1f1f1f;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 2.4rem;
  transition: 0.2s;
  width: 50%;
  margin: 40px auto 0;
  position: relative;
}
.case-archive .default-btn a::after {
  font-family: "dashicons";
  content: "\f139";
  padding-left: 0.5em;
  position: absolute;
  top: 35%;
}
.case-archive .default-btn a:hover {
  opacity: 0.7;
  letter-spacing: 0.1em;
  border-radius: 10px;
}

/* single-case.php
----------------------------------------------- */
.case-detail__data {
  margin-bottom: 40px;
}
.case-detail {
  padding: 0 60px 60px;
}
.case-detail h2 {
  font-size: 2.6rem;
  margin: 0 auto 40px;
  color: #333;
  line-height: 1.25;
  text-align: left;
}
.case-detail hr {
  margin-bottom: 40px;
}
.case-detail .case-detail__photo {
  text-align: center;
  width: 50%;
}
.case-detail .case-detail__meta {
  width: 47%;
}
.case-detail .case-detail__meta .category a {
  background: #e6f4e9;
  color: #0b4e49;
  display: inline-block;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 4px 10px;
  margin: 0 5px 15px 0;
}
.case-detail .case-detail__meta table {
  border-top: 1px solid #d9d9d9;
  width: 100%;
}
.case-detail .case-detail__meta table th {
  border-bottom: 1px solid #d9d9d9;
  text-align: left;
  padding: 10px 15px;
  width: 25%;
  vertical-align: top;
  color: #333;
  background-color: #f5f5f5;
}
.case-detail .case-detail__meta table td {
  border-bottom: 1px solid #d9d9d9;
  padding: 10px 25px 10px 10px;
  vertical-align: top;
}
.case-detail .case-detail__meta table td a {
  color: #1f1f1f;
  text-decoration: none;
}
.case-detail .case-detail__meta dl {
  padding: 20px 0;
}
.case-detail .case-detail__meta dt::before {
  font-family: "dashicons";
  content: "\f159";
  color: #0b4e49;
  font-size: 1.8rem;
  vertical-align: sub;
  margin-right: 0.5em;
}
.case-detail .case-detail__meta h4 {
  margin-top: 25px;
}
.case-detail .case-detail__contents {
  padding: 40px;
  line-height: 1.8;
  background-color: #fff;
  border: 10px solid #f0f0f0;
}
.case-detail .case-detail__contents img {
  margin-bottom: 20px;
}

.case-flow>.container {
  padding: 50px 0;
}
.case-flow h2 {
  font-size: 2rem;
  color: #333;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #0b4e49;/*左線*/
  margin-bottom: 30px;
}
.case-flow h3 {
  text-align: center;
  margin-bottom: 40px;
  color: #1f1f1f;
}
.case-flow ul {
  margin-bottom: 50px;
}
.case-flow ul li {
  background-color: #fff;
  width: 100%;
  padding: 4%;
  margin-bottom: 40px;
}
.case-flow ul li:last-child {
  margin-bottom: 0;
}
.case-flow ul li:last-child::after {
  content: none;
}
.case-flow ul li .thumb {
  display: block;
  text-align: center;
  width: 46%;
}
.case-flow ul li .case-flow__comment {
  width: 50%;
}
.case-flow ul li.full .case-flow__comment {
  float: none;
  width: 100%;
}
.case-flow ul li h4 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #1f1f1f;
  text-align: left;
  line-height: 1.25;
}
.case-flow ul li h4 img {
  margin-right: 0.5em;
  top: -1px;
  position: relative;
  width: 17%;
  vertical-align: bottom;
}
.case-flow p {
  text-align: justify;
}


/* ============================================================================================
 フォーム
============================================================================================= */
.form {
  margin-bottom: 70px;
}
.form h2 {
  margin-bottom: 60px;
  font-size: 3rem;
  text-align: center;
}
.form .detail {
  display: flex;
  justify-content: space-around;
  line-height: 1;
  width: 90%;
  margin: 0 auto 40px;
}
.form .box {
  width: 40%;
}
.form .tel {
  padding: 10x;
  background-color: #fff;
  border: 4px solid #0b4e49;
  border-radius: 0;
}
.form .tel a {
  font-size: 3.6rem;
}
.form .box p {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 10px;
}
.form .note {
  width: 50%;
  text-align: justify;
}
.form .note p {
  font-size: 1.3rem;
  line-height: 2;
}
.form .note p span {
  color: #e51f38;
}
.form table {
  background-color: #fff;
  width: 100%;
  padding: 30px 80px 60px;
}
.form table th {
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  padding: 22px 20px;
  width: 260px;
  vertical-align: middle;
  letter-spacing: 0.05em;
  background-color: #e6f4e9;
}
.form table th.last {
  vertical-align: top;
}
.form table th span {
  display: block;
}
.form table th .required {
  background-color: #e51f38;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 1px 10px;
  letter-spacing: 0.1em;
  margin-left: auto;
  width: 24%;
  margin-top: -21px;
}
.form table th .optional {
  background-color: #b1c1e0;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 1px 10px;
  letter-spacing: 0.1em;
  margin-left: auto;
  width: 24%;
  margin-top: -21px;
}
.form table td {
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  padding: 30px;
  vertical-align: middle;
}
.form table td img {
  max-width: 300px;
}
.form input[type="text"], .form button, .form textarea {
  border: 1px solid #e6e6e6;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  padding: 8px;
  background: #fff;
  -webkit-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
}
.form .mwform-tel-field input[type="text"] {
  width: auto;
}
.form input[type="file"] {
  padding: 8px 0;
}
.form input[type="submit"],
.form input[type="button"] {
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
.form input[type="submit"]::-webkit-search-decoration,
.form input[type="button"]::-webkit-search-decoration {
  display: none;
}
.form input[type="submit"]:focus,
.form input[type="button"]:focus {
  outline-offset: -2px;
  outline: 0;
}
.form .mw_wp_form_preview table th.last {
  vertical-align: middle;
}
.form .mw_wp_form_preview .check-privacy {
  display: none;
}
.form .check-privacy {
  margin-bottom: 60px;
}
.form .check-privacy span {
  vertical-align: text-bottom;
}
.form .check-privacy a {
  color: #1f1f1f;
  text-decoration: none;
}
.form .check-privacy a::after {
  font-family: "dashicons";
  content: "\f504";
  vertical-align: bottom;
  padding: 0 0.5em;
}
.form .check-privacy a:hover {
  opacity: 0.5;
}
.form input[name="submitConfirm"],
.form input[name="submit"] {
  background-color: #00ab9e;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 1.5% 13%;
  position: relative;
  transition: 0.2s;
  border-radius: 50px;
}
.form input[name="submitConfirm"]:hover,
.form input[type="submit"]:hover {
  opacity: 0.5;
}
.form .mw_wp_form_preview input[name="submitBack"] {
  background: url("images/common/common-icon-arrow-left.png") no-repeat left 90px top 50% / 15px;
  color: #0b4e49;
  font-size: 2.4rem;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-align: center;
  display: inline-block;
  padding: 0 0 0 13%;
  margin-right: 20%;
  position: relative;
  transition: 0.2s;
}
.form .confirmmessage {
  text-align: center;
  font-weight: bold;
  margin-bottom: 50px;
  color: #0b4e49;
}
.form .confirmtxt {
  width: 70%;
  margin: 60px auto 0;
}
.form .complete p {
  width: 80%;
  margin: 0 auto 60px;
}
.form .complete .box {
  margin: 0 auto 40px;
}
.form .complete .tel p {
  width: 100%;
  margin-bottom: 0;
}
.form .complete .btn {
  width: 40%;
}


/* ============================================================================================
 Footer
============================================================================================= */

/*
 Footer カーライフサポート（footer-service.php）
----------------------------------------------- */
.footer-service .bg-green {
  padding-top: 40px;
}
.footer-service .h2-border {
  background-color: #fff;
  margin-bottom: 40px;
}
.footer-service h2 {
  color: #00a799;
  font-weight: bold;
}
.footer-service .container>p {
  text-align: center;
  margin-bottom: 60px;
}
.footer-service .bg-green .box h3 {
  font-size: 1.8rem;
  color: #1f1f1f;
}
.footer-service .bg-green .flex {
  flex-wrap: wrap;
}
.footer-service .bg-green .flex .box {
  width: 23%;
  margin-bottom: 60px;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
  -moz-box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
  box-shadow: 5px 5px 15px 0px rgba(36,41,46,0.4);
}
.footer-service .bg-green .flex .box p:nth-of-type(1) {
  margin-bottom: 20px;
}
.footer-service .bg-green .flex .box p:nth-of-type(2) {
  text-align: justify;
  padding: 0 15px 25px;
}
.footer-service>.container {
  padding: 50px 0;
}
.footer-service>.container .box {
  width: 48%;
}
.footer-service>.container h3 {
  margin-bottom: 50px;
}
.footer-service>.container .box p {
  margin-bottom: 20px;
  text-align: center;
}
.footer-service>.container .btn {
  width: 85%;
}

/*  Footer コンタクト（footer-contact.php）
----------------------------------------------- */
.footer-contact {
  background-color: #e6f4e9;
  padding: 20px;
}
.footer-contact_border {
  border: 4px #fff dashed;
  padding: 40px 0;
}
.footer-contact h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.5;
}
.footer-contact .column {
  width: 48%;
  margin-bottom: 50px;
}
.footer-contact .column p {
  margin-bottom: 30px;
  color: #000;
}
.footer-contact .flex>p{
  width: 30%;
}
.footer-contact .box {
  width: 67%;
  flex-basis: 67%;
}
.footer-contact .box .flex {
  flex-wrap: nowrap;
}
.footer-contact .box>p {
  margin-bottom: 30px;
  flex-basis: 30%;
}
.footer-contact .tel {
  padding: 20px 30px;
  width: 49%;
}
.footer-contact .tel a {
  font-size: 3rem;
  margin-bottom: 10px;
}
.footer-contact .tel p {
  font-size: 1.2rem;
  color: #1f1f1f;
}
.footer-contact .tel a::before {
  top: 20%;
}
.footer-contact .mail {
  background-color: #fff;
  width: 49%;
}
.footer-contact .mail a {
  padding: 0;
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.25;
  padding: 13px 20px 10px 50px;
}
.footer-contact .mail a::before {
  top: 17%;
  left: 6%;
}
.footer-contact .mail span {
  font-size: 1.8rem;
  text-align: center;
  color: #0b4e49;
  font-weight: normal;
}

/*
 Footer 新着情報・アクセスマップ（footer.php）
----------------------------------------------- */
.footer-news_map {
  padding: 60px 0;
}
.footer-news_map h2 {
  font-size: 2.4rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 50px;
}
.footer-news_map .box {
  width: 48%;
}
.footer-news_map .map {
  height: 0;
  overflow: hidden;
  padding-bottom: 80%;
  position: relative;
}
.footer-news_map .map iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.footer-news_map .col a {
  color: #0b4e49;
  text-decoration: none;
  padding-top: 15px;
}
.footer-news_map .col a:hover {
  opacity: 0.7;
}
.footer-news_map article {
  margin-bottom: 20px;
  box-shadow: 10px 10px 15px -10px;
  transition: 0.2s;
}
.footer-news_map article:hover {
  transform: translateY(4px);
  box-shadow: none;
}
.footer-news_map article a {
  display: block;
  color: #0b4e49;
  background-color: #fff;
  text-decoration: none;
  padding: 20px;
  position: relative;
}
.footer-news_map article a:hover {
  opacity: 0.7;
}
.footer-news_map article a .archive-contents::after {
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 10px;
  font-family: "dashicons";
  content: "\f139";
  color: #0b4e49;
  font-size: 2.4rem;
}
.footer-news_map article a .archive-contents {
  position: relative;
}
.footer-news_map article a .date {
  font-size: 1.2rem;
  color: #0b4e49;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 1em;
}
.footer-news_map article a .cate {
  font-size: 1.2rem;
  display: inline-block;
  margin-bottom: 8px;
}
.footer-news_map article a .cate span {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
}
.footer-news_map article a .cate span.cat-1 {
  background: #e6f4e9;
  color: #0b4e49;
}
.footer-news_map article a .cate span.cat-2 {
  background: #e6f4e9;
  color: #0b4e49;
}
.footer-news_map article a h1 {
  color: #0b4e49;
  font-size: 1.6rem;
  margin-bottom: 10px;
  clear: none;
  width: 95%;
}
.footer-news_map article a .post-excerpt {
  color: #0b4e49;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.footer-news_map .btn {
  width: 80%;
}


/*
 Footer 対応メーカー・最下部（footer.php）
----------------------------------------------- */
.footer-common {
  padding: 40px 0;
}
.footer-maker .container {
  background-color: #fff;
  padding: 40px 60px;
  margin-bottom: 40px;
}
.footer-maker h2 {
  font-size: 2rem;
  text-align: center;
  font-weight: normal;
}
.footer-maker .flex {
  width: 100%;
  padding: 4% 0 1%;
}
.footer-maker .flex ul {
  margin-bottom: 20px;
  font-size: 1.4rem;
}
.footer-maker .flex li {
  font-weight: 300;
}
.footer-maker .flex li::before {
  content: "・";
  margin-right: 0.5em;
}
.footer-maker p {
  font-size: 1.4rem;
}

.footer-info {
  padding-bottom: 20px;
}
.footer-info .flex {
  justify-content: space-around;
}
.footer-info .box {
  width: 48%;
}
.footer-info .box>ul li:nth-of-type(1) {
  margin-bottom: 1em;
}
.footer-info h3 {
  color: #0b4e49;
  text-align: left;
  margin-bottom: 20px;
  font-weight: normal;
}
.footer-info .box:last-of-type h3 {
  font-weight: bold;
}
.footer-info .box ul {
  color: #0b4e49;
}
.footer-info .link {
  display: flex;
  justify-content: space-between;
}
.footer-info .link ul {
  color: #1f1f1f;
  width: 50%;
}
.footer-info .link li {
  line-height: 1.2;
}
.footer-info a,
.footer-info a:hover,
.footer-info .link a,
.footer-info .link a:hover {
  color: #1f1f1f;
}
.footer-info .container>.box:first-of-type a {
  color: #0b4e49;
}
.footer-info .link a:hover {
  opacity: 0.7;
}
.footer-info a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.footer-info a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.footer-info a:hover::after {
  transform: scale(1, 1);
}
.footer-info .link li {
  margin-bottom: 10px;
  font-weight: 300;
}
.footer-info .link li:before {
  content: "・";
  margin-right: .5em;
}

footer .copyright {
  text-align: center;
  font-size: 1.6rem;
  background-color: #0b4e49;
  color: #fff;
  padding: 20px 0;
}
footer .copyright a {
  color: #fff;
}

/* ============================================================================================
 ページトップボタン
============================================================================================= */
.pagetop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 10;
  cursor: pointer;
  transition: 0.2s;
  text-align: right;
  border-radius: 50%;
  background: #0b4e49;
  opacity: 0.5;
}
.pagetop:hover {
  opacity: 0.7
}
.pagetop a{
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  position: relative;
}
.pagetop a::before{
  font-family: "dashicons";
  content: "\f343";
  font-size: 2.4rem;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  position: absolute;
  top: -3%;
}


/* ============================================================================================
 ビジュアルエディタ装飾
============================================================================================= */
.freeeditor h1 {
	text-align: left;
	font-size: 140%;
	font-weight: bold;
	border-bottom: 3px solid #e8e7e3;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
.case-detail .freeeditor h2,
.news-detail .freeeditor h2 {
	text-align: left;
	border: none;
	font-size: 130%;
	font-weight: bold;
	border-bottom: 2px solid #e8e7e3;
	padding-left: 0;
	padding-bottom: 5px;
  margin-bottom: 20px;
  width: auto;
  color: #1f1f1f;
  line-height: 1.8;
}
.freeeditor h3 {
  color: #1f1f1f;
	text-align: left;
	font-size: 120%;
	font-weight: bold;
	border-bottom: 1px solid #e8e7e3;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.freeeditor h4 {
	text-align: left;
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 10px;
  color: #1f1f1f;
}
.freeeditor h5 {
	text-align: left;
	font-weight: bold;
	margin-bottom: 10px;
}
.freeeditor strong {
	font-weight: bold;
}
.freeeditor strong,
.freeeditor strong span,
.freeeditor h1 span,
.freeeditor h2 span,
.freeeditor h3 span,
.freeeditor h4 span,
.freeeditor h5 span {
	font-weight: bold;
}
.case-detail .freeeditor img {
	width: auto;
	max-width: 100%;
}


/* 768px以上（PC/TB）の場合、電話番号タップコール無効 */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}


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

  /* page title
  =============================================== */
  #page-title h1 {
    padding: 100px 0;
  }


}

/* ===================================================================================================================


　tablet


=================================================================================================================== */
@media screen and (max-width: 991px) {
  .md-hidden {
      display: block !important;
  }
  img.md-hidden {
      display: inline !important;
  }
  .sm-hidden {
      display: none !important;
  }
  img.sp-img-full {
      width: 100%;
  }
  dt, dd, th, td {
    line-height: 1.5;
  }

  #footer .areaname {
    margin: 10px;
  }

  .footer-contact h2,
  .footer-contact .inner > p,
  .footer-contact .form-btn p {
    text-shadow: none;
  }
  h2 {
    font-size: 3.2rem;
  }

  h4 {
    font-size: 2.2rem;
  }
  .order1 {
    order: 2;
  }
  .order2 {
    order: 1;
  }
  .order01 {
    order: 1;
  }
  .order02 {
    order: 2;
  }
  .ps-br{
    display: none; /* PCの改行を隠して */
  }
  .tb-br{
    display: block; /* タブレットを改行する */
  }

  /* ==============================================
   Layout
  =============================================== */
  .container {
    max-width: 96%;
  }
  span.sizeup {
    font-size: 4rem;
  }

  /* column
  ----------------------------------------------- */
  .col-sm-1 {
      width: 12%;
  }
  .col-sm-2 {
      width: 16.6666%;
  }
  .col-sm-3 {
      width: 25%;
  }
  .col-sm-4 {
      width: 33.3333%;
  }
  .col-sm-5 {
      width: 41.6666%;
  }
  .col-sm-6 {
      width: 50%;
  }
  .col-sm-7 {
      width: 57.0833%;
  }
  .col-sm-8 {
      width: 66.6667%;
  }
  .col-sm-9 {
      width: 75%;
  }
  .col-sm-10 {
      width: 83.3334%;
  }
  .col-sm-11 {
      width: 91.6666%;
  }
  .col-sm-12 {
      width: 100%;
  }


  /* ============================================================================================
   メインコンテンツ共通
  ============================================================================================= */
  .h2-gradation {
    width: 100%;
  }
  .h2-gradation h2 {
    font-size: 2.2rem;
  }

  /* header
  ----------------------------------------------- */
  .header-menu .container > .box {
    line-height: 6;
  }
  .header-item .flex {
    justify-content: space-around;
  }
  .header-menu .item {
    padding: 10px 20px;
  }
  .header-menu .item a {
    font-size: 2rem;
  }
  .header-menu .item a::before {
    font-size: 1.4rem;
  }
  .header-menu li {
    font-size: 1rem;
  }
  .header-item .tel {
    padding: 5px 10px;
  }
  .header-item .tel a {
    font-size: 2.4rem;
  }
  .header-item .box:first-of-type {
    width: 23%;
  }
  .header-item .box:nth-of-type(2) {
    width: 14%;
  }
  .header-item .box:last-of-type {
    width: 35%;
  }
  .header-item .box:last-of-type p {
    font-size: 1rem;
  }
  .header-item .box:first-of-type,
  .header-item .box:nth-of-type(2) p {
    line-height: 4;
  }
  #gnav ul li a {
    font-size: 1.2rem;
  }
  .btn {
    width: 50%;
  }

  /* ============================================================================================
   .common-contact
  ============================================================================================= */
  .common-contact .box {
    width: 49%;
  }
  .common-contact .tel {
    padding: 10px 20px;
  }
  .common-contact .tel a {
    font-size: 3.4rem;
  }
  .common-contact .tel p {
    font-size: 1.2rem;
  }
  .common-contact .mail {
    padding: 10px;
  }
  .common-contact .mail a {
    font-size: 2.4rem;
    padding: 0 20px 0 55px;
  }
  .common-contact .mail a::before {
    left: 5%;
    top: 4%;
  }


  /* ============================================================================================
   TOP
  ============================================================================================= */
  .top-intro p {
    width: 92%;
  }
  .top-feature h2 {
    font-size: 2.2rem;
  }
  .top-feature dl {
    padding: 0 30px 30px;
  }
  .top-feature .btn a{
    font-size: 2rem;
    padding: 16px 0;
  }
  .top-dealer .flex {
    flex-wrap: nowrap;
  }
  .top-dealer .flex .box {
    width: 32%;
  }
  .top-dealer .value .cheap {
    font-size: 1.8rem;
  }
  .top-dealer .value .cheap span{
    font-size: 1.7rem;
  }
  .top-dealer .value .cheap .number{
    font-size: 2.5rem;
  }
  .top-reason .container>p {
    width: 100%;
  }
  .top-reason .point {
    width: 100%;
  }
  .top-service .h2-gradation {
    top: -6%;
  }
  .top-service .flex>p {
    top: -35%;
  }
  .top-service .flex {
    margin-bottom: 20px;
  }
  .top-service .btn {
    width: 70%;
    left: 10%;
  }
  .top-service .service:last-of-type .btn {
    left: 15%;
  }
  .top-service .service {
    margin-top: 0;
  }
  .top-service .service:last-of-type .flex>p {
    top: -30%;
  }
  .top-service .service:last-of-type .flex .box {
    width: 47%;
  }
  .top-maintenance_detail .flex>p {
    width: 50%;
  }
  .top-maintenance_detail .box .tel {
    padding: 10px 20px;
  }
  .top-maintenance_detail .box .tel p {
    font-size: 1.4rem;
  }
  .top-maintenance_detail .box .mail a {
    padding: 10px 25px 10px 55px;
    text-align: center;
  }
  .top-maintenance_detail .box .mail span {
    font-size: 1.8rem;
  }
  .top-maintenance_detail .box .mail a::before {
    left: 7%;
    top: 17%;
  }
  .top-maintenance_detail .flex {
    margin-bottom: 20px;
  }
  .top-service h3 {
    font-size: 2.8rem;
  }

  /* ============================================================================================
   初めての方へ
  ============================================================================================= */
  .customer-head {
    margin-bottom: 50px;
  }
  .customer-head h2 {
    font-size: 2.4rem;
    line-height: 1.25;
  }
  .customer-head h2 span {
    font-size: 3rem;
  }
  .customer-head .box {
    flex-basis: 32%;
  }
  .customer-head .face {
    font-size: 1.4rem;
  }
  .customer-head .face::before {
    width: 21%;
  }
  .customer-flow .balloon {
    width: 30%;
    margin-bottom: 10px;
  }
  .customer-flow h2 {
    font-size: 3rem;
  }
  .customer-flow .tel a {
    font-size: 2.6rem;
  }
  .customer-flow .mail a {
    padding: 10px 30px 10px 50px;
    font-size: 2rem;
  }
  .customer-flow .mail span {
    font-size: 1.6rem;
  }
  .customer-flow .container>.flex {
    padding: 30px 20px;
  }
  .customer-flow h3 {
    font-size: 2rem;
  }
  .customer-flow .step1contact {
    padding: 0;
  }
  .customer-flow .flex .box {
    width: 50%;
  }
  .customer-flow .flex>p {
    width: 45%;
  }
  .customer-flow .container:nth-of-type(2) h3::before,
  .customer-flow .container:nth-of-type(3) h3::before,
  .customer-flow .container:nth-of-type(4) h3::before,
  .customer-flow .container:nth-of-type(5) h3::before,
  .customer-flow .container:nth-of-type(6) h3::before,
  .customer-flow .container:nth-of-type(7) h3::before,
  .customer-flow .container:nth-of-type(8) h3::before,
  .customer-flow .container:nth-of-type(9) h3::before {
    vertical-align: text-top;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) {
    justify-content: space-between;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .box {
    width: 48%;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .tel a {
    font-size: 3.2rem;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .tel p {
    font-size: 1.2rem;
  }
  .customer-flow .mail a::before {
    top: 20%;
    left: 9%;
  }
  .customer-flow .container:first-of-type .flex .box p {
    font-size: 1.4rem;
  }
  .customer-flow .flex:nth-of-type(6) .box>a {
    font-size: 1.2rem;
  }

  /* ============================================================================================
   キズ・ヘコミ
  ============================================================================================= */
  .bodyworks-head .container>h2 {
    font-size: 3.2rem;
    line-height: 1.5;
  }
  .bodyworks-head .flex:first-of-type {
    flex-wrap: nowrap;
    margin-bottom: 50px;
  }
  .bodyworks-head .flex:first-of-type p {
    width: 24%;
  }
  .bodyworks-head .h2-gradation h2 {
    font-size: 2.4rem;
  }
  .bodyworks-head .flex:nth-of-type(4) {
    margin-bottom: 50px;
  }
  .bodyworks-head .case p {
    width: 30%;
  }
  .bodyworks-head li {
    font-size: 1.4rem;
  }
  .bodyworks-point .container>p {
    margin-bottom: 30px;
  }
  .bodyworks-point .point {
    margin-bottom: 20px;
  }
  .bodyworks-point h3 {
    margin-bottom: 30px;
  }
  .bodyworks-point .box {
    margin-bottom: 50px;
  }
  .bodyworks-point .box .flex p {
    line-height: 1.5;
  }
  .bodyworks-point .box>p:last-of-type {
    margin-bottom: 20px;
  }
  .bodyworks-repair p {
    width: 90%;
    line-height: 1.5;
  }
  .bodyworks-inspection h3 {
    width: 90%;
    margin-bottom: 30px;
  }
  .bodyworks-inspection p {
    line-height: 1.5;
  }

  /* ============================================================================================
   整備・車検
  ============================================================================================= */
  .maintenance-head .container>h2 {
    font-size: 3rem;
    line-height: 1.5;
  }
  .maintenance-head .flex:first-of-type {
    flex-wrap: nowrap;
    margin-bottom: 50px;
  }
  .maintenance-head .flex:first-of-type p {
    width: 24%;
  }
  .maintenance-pro h2 {
    font-size: 2.4rem;
  }
  .maintenance-pro h2 + p {
    margin-bottom: 20px;
    font-size: 1.6rem;
  }
  .maintenance-pro .flex:nth-of-type(1) p:last-of-type, .maintenance-pro .flex:nth-of-type(2) p:first-of-type {
    line-height: 1.5;
  }
  .maintenance-case .case p {
    width: 30%;
    font-size: 1.6rem;
  }
  .maintenance-case li {
    font-size: 1.4rem;
  }
  .maintenance-case .flex:nth-of-type(3) h3 {
    font-size: 2rem;
  }
  .maintenance-case .flex dl {
    padding: 10px 20px 10px 0px;
  }
  .maintenance-case .flex dt {
    font-size: 1.6rem;
  }
  .maintenance-case .flex dd {
    line-height: 1.5;
  }
  .maintenance-case .flex:nth-of-type(5) p {
    width: 40%;
  }
  .maintenance-point .h2-gradation h2 {
    font-size: 2.4rem;
  }
  .maintenance-point .container>p {
    margin-bottom: 30px;
  }
  .maintenance-point .point {
    margin-bottom: 20px;
  }
  .maintenance-point .box .flex p {
    line-height: 1.5;
  }
  .maintenance-point h3 {
    font-size: 3rem;
    margin-bottom: 30px;
  }

  .maintenance-other h3 {
    font-size: 2rem;
  }
  .maintenance-other .box:last-of-type h3 {
    margin-bottom: 80px;
  }
  .maintenance-other .box {
    width: 48%;
  }
  .maintenance-other .box p {
    line-height: 1.5;
  }
  .maintenance-other .box:last-of-type .flex {
    justify-content: space-between;
  }
  .maintenance-other ul:last-of-type li:nth-of-type(2) {
    margin-bottom: 1em;
  }
  .maintenance-other ul:first-of-type,
  .maintenance-other ul:last-of-type {
    width: 50%;
  }
  .maintenance-other li {
    font-size: 1.4rem;
  }
  .maintenance-factory .box:last-of-type p {
    line-height: 1.5;
  }
  .maintenance-factory li {
    line-height: 1.5;
  }
  .maintenance-factory .flex:last-of-type .box {
    padding-bottom: 20px;
  }
  .maintenance-inspection>.container p {
    margin-bottom: 40px;
  }
  .maintenance-inspection .flex:nth-of-type(2) p:last-of-type {
    line-height: 1.5;
  }
  .maintenance-inspection .flex:nth-of-type(2) p:last-of-type span {
    font-size: 2rem;
  }

  /* ============================================================================================
   施工事例
  ============================================================================================= */

  .case-block .btn {
    width: 60%;
  }
  .case-maker .label {
    font-size: 1.2rem;
  }
  .case-maker p {
    margin-bottom: 10px;
  }
  .case-maker .borderbox:last-of-type .label {
    height: 20px;
  }

  /* case archive
  ----------------------------------------------- */
  .case-top .outer {
    background: none;
    margin-bottom: 40px;
  }
  .case-top .inner {
    width: 90%;
    margin: 0 auto;
  }
  .case-top h2 {
    text-align: center;
    line-height: 1.25;
  }
  .case-top .lead {
    width: 52%;
  }
  .case-top .btn a {
    font-size: 1.4rem;
  }
  .case-top .btn a::after {
    top: 30%;
  }
  .case-cate .borderbox {
    padding: 40px 20px;
  }

  /* case detail
  ----------------------------------------------- */
  .case-detail__data {
    margin-bottom: 40px;
  }
  .case-detail {
    padding: 0 10px 30px;
  }
  .case-detail h2 {
    width: 100%;
    font-size: 1.4em;
  }
  .case-detail .case-detail__meta table th {
    width: 30%;
  }
  .customer-flow .step1contact {
    padding: 20px;
  }
  .case-flow .default-btn {
    width: 50%;
  }
  .customer-flow .form-btn a {
    font-size: 2.4rem;
  }
  .case-flow ul li h4 img {
    vertical-align: middle;
  }


  /* ============================================================================================
   会社概要
  ============================================================================================= */
  .company-lead h2 span {
    font-size: 3.2rem;
  }
  .company-detail table th {
    width: 150px;
  }
  .company-area h2 span {
    font-size: 3.2rem;
  }
  .company-area .box p {
    line-height: 1.5;
  }
  .company-area .map{
    padding-bottom: 140%;
  }

  /* ============================================================================================
   お問い合わせ
  ============================================================================================= */

  /* form
  ----------------------------------------------- */
  .form h2 {
    font-size: 2.8rem;
  }
  .form .note p {
    line-height: 1.5;
  }
  .form .detail {
    width: 100%;
  }
  .form .detail .note {
    width: 50%;
  }
  .form .tel a {
    font-size: 2.6rem;
  }
  .form .box p {
    font-size: 1.2rem;
  }
  .form table {
    padding: 0 0 40px;
  }
  .form .confirmtxt {
    width: 90%;
  }
  .form .mw_wp_form_preview input[name="submitBack"] {
    background: url("images/common/common-icon-arrow-left.png") no-repeat left 70px top 50% / 7px;
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .form .complete p {
    width: 100%;
  }
  .form .complete .box {
    width: 50%;
  }
  .form .complete .box .tel a {
    font-size: 3.6rem;
  }


  /* ============================================================================================
   新着情報
  ============================================================================================= */
  .news-archive,
  .news-detail {
    padding-top: 0;
  }
  .news-archive .post-archive {
    padding: 10px;
    width: 73%;
  }
  .news-detail .post-navigation .back a {
    font-size: 1.4rem;
  }
  .news-detail .post-navigation .btn {
    width: 40%;
  }

  /* news widget
  ----------------------------------------------- */
  .post-widget {
    width: 25%;
  }
  .post-widget ul {
    padding: 0 20px;
  }
  .post-widget ul li a::after {
    right: 0;
  }

  /* ============================================================================================
   Footer
  ============================================================================================= */
  .footer-service .bg-green .flex .box {
    width: 24%;
  }
  .footer-service>.container .box p {
    text-align: justify;
  }
  .footer-service>.container .box p:last-of-type {
    height: 70px;
  }
  .footer-service>.container .btn {
    width: 100%;
  }
  .footer-service .box h3 {
    font-size: 1.8rem;
  }
  .footer-service .bg-green .flex .box p:nth-of-type(2) {
    font-size: 1.4rem;
  }

  /*
   Footer 問い合わせ（footer-contact.php）
  ----------------------------------------------- */
  .footer-contact .container > p {
    width: 90%;
    text-align: center;
  }
  .footer-contact .box>p {
    text-align: justify;
    font-size: 1.5rem;
  }
  .footer-contact h2 {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
  .footer-contact .box {
    width: 52%;
  }
  .footer-contact .tel {
    padding: 10px 30px;
    margin-bottom: 20px;
    width: 100%;
  }
  .footer-contact .tel a {
    font-size: 3.2rem;
  }
  .footer-contact .mail {
    width: 100%;
  }
  .footer-contact .mail a {
    padding: 10px 20px 10px 50px;
    line-height: 1;
  }
  .footer-contact .mail a::before {
    top: 16%;
    left: 9%;
  }
  .footer-contact .box .flex {
    flex-wrap: wrap;
  }

  /*
   Footer 新着情報（footer.php）
  ----------------------------------------------- */
  .footer-news_map .btn {
    width: 100%;
  }
  .footer-news_map .map {
    padding-bottom: 140%;
  }

  /*
   Footer 最下部（footer.php）
  ----------------------------------------------- */
  .footer-maker .container {
    padding: 20px;
  }
  .footer-info .inner {
    width: 47%;
  }
  .footer-info .link ul:first-of-type {
    width: 40%;
  }
  .footer-info .link ul:last-of-type {
    width: 58%;
  }
}



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

.sp {
  display: none;
}
}

/* ===================================================================================================================


　sp


=================================================================================================================== */

/* ---------------------
　767px以下
---------------------- */
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
  .sm-hidden {
      display: block !important;
  }
  img.sm-hidden {
      display: inline !important;
  }
  .xs-hidden {
      display: none !important;
  }
  .pc-hide {
    display: block;
  }
  .sp-hide {
    display: none;
  }

  h2 {
    font-size: 2.4rem;
  }
  h2 span {
    font-size: 3.2rem;
  }
  h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .h2-gradation {
    width: 100%;
  }
  .h2-gradation h2 {
    font-size: 2rem;
  }
  .h2-border {
    width: 100%;
  }
  .h2-green {
    padding: 20px;
  }
  .h2-green h2 {
    font-size: 2rem;
  }

  .ps-br{
    display: none; /* PCの改行を隠して */
  }
  .tb-br {
    display: none; /* タブレットの改行を隠す */
  }
  .sp-br{
    display: block; /* SPを改行する */
  }

  /* ==============================================
   Layout
  =============================================== */
  .section {
    margin-bottom: 30px;
  }

  /* column
  ----------------------------------------------- */
  .col-xs-1 {
      width: 12%;
  }
  .col-xs-2 {
      width: 16.6666%;
  }
  .col-xs-3 {
      width: 25%;
  }
  .col-xs-4 {
      width: 33.3333%;
  }
  .col-xs-5 {
      width: 41.6666%;
  }
  .col-xs-6 {
      width: 50%;
  }
  .col-xs-7 {
      width: 57.0833%;
  }
  .col-xs-8 {
      width: 66.6667%;
  }
  .col-xs-9 {
      width: 75%;
  }
  .col-xs-10 {
      width: 83.3334%;
  }
  .col-xs-11 {
      width: 91.6666%;
  }
  .col-xs-12 {
      width: 100%;
  }

  /* ==============================================
   Header
  =============================================== */
  #header {
    background-color: #e9e9e9;
  }
  #header .sp-menu {
    display: flex;
    padding-right: 2%;
    position: fixed;
    z-index: 10000;
    background-color: #fff;
    width: 100%;
  }
  #header .sp-menu.following {
    top: 0;
  }
  #header .header-top {
    padding: 0.125em;
  }
  #header .header-top h1 {
    line-height: 1.5;
    font-size: 1rem;
  }
  #header .header-menu .item a::before {
    font-size: 1.2rem;
  }
  #header .header-menu .box:nth-of-type(2) {
  line-height: 1.25;
  text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  color: #ff7800;
  }
  #header .header-menu .container {
    padding: 0 10px;
  }
  #header .header-menu .box:first-of-type {
    width: 40%;
  }
  #header .header-menu .item {
    display: block;
    width: 85%;
    margin: 0 auto;
    padding: 5px 13px;
  }
  #header .header-menu .item a {
    font-size: 1.6rem;
  }
  #header .header-item .box:first-of-type {
    width: 92%;
    line-height: 2.5;
    margin: 0 auto;
  }
  #header .header-item .box:nth-of-type(3),
  #header .header-item .box:last-of-type {
    display: none;
  }
  #header .header-item .box:nth-of-type(2) {
    width: 40%;
    margin-right: 3%;
  }
  #header .header-menu li {
    line-height: 1.25;
    text-align: center;
  }
  #header .header-item .flex {
    justify-content: space-between;
  }
  #header .header-menu .item .box:first-of-type {
    display: none;
  }
  #header .header-menu .container > .box {
    line-height: 3.5;
  }
  #header .header-menu .box:last-of-type {
    width: 100%;
  }
  #header .header-menu .box:nth-of-type(4) {
    margin-left: 25%;
  }
  #header .header-menu .box:nth-of-type(4) a.pc-hide {
    background-color: #fff;
    width: 100%;
    border-radius: 50px;
    padding: 10px 12px;
    display: block;
    margin-top: 0.25em;
  }
  #header .header-menu .box:nth-of-type(4) .dashicons {
    padding-top: 2px;
  }
  #header .header-menu .box a:hover {
    opacity: 0.7;
  }
  #header .header-menu .box > a::before {
    content: none;
  }
  #header .header-menu .box > a {
    margin-bottom: 0;
  }
  #header .header-main {
    background: #fff;
    border-top: 3px solid #222;
  }
  #header .header-main .header-logo {
    padding: 6px 0;
    width: 250px;
  }
  #header .header-main .header-info {
    display: none;
  }
  #header .drawer-header {
    display: block;
    float: right;
    padding-top: 8px;
    width: 31px;
  }
  #header .sp-submenu {
    background-color: #fff;
  }
  #header .sp-submenu .flex {
    justify-content: space-between;
    background-color: #00a799;
  }
  #header .sp-submenu .flex .box:first-of-type {
    width: 80%;
    text-align: center;
    font-weight: bold;
  }
  #header .sp-submenu .flex .box:first-of-type p {
    line-height: 1.5;
    font-size: 1.2rem;
    font-weight: normal;
  }
  #header .sp-submenu .flex .box:nth-of-type(2) {
    width: 20%;
  }
  #header .sp-submenu .flex .box:last-of-type p {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;
  }
  #header .sp-submenu .flex .box .tel {
    padding: 10px;
    background-color: #fff;
    border: 4px solid #00a799;
    border-radius: 0;
  }
  #header .sp-submenu .flex .box .tel a {
    color: #00a799;
    font-size: 3rem;
    font-weight: bold;
    position: relative;
    padding-left: 15%;
    line-height: 1;
  }
  #header .sp-submenu .flex .box .tel a::before {
    font-family: "dashicons";
    content: "\f470";
    position: absolute;
    top: 21%;
    left: 0;
  }
  #header .sp-submenu .flex .box .mail a {
    padding: 23% 25%;
    text-align: left;
  }
  #header .sp-submenu .flex .box .mail a::before {
    content: none;
    top: 0;
    left: 0;
  }
  #header .sp-submenu .flex .box .mail {
    border: none;
    background: none;
  }
  #header .sp-submenu .flex .box .mail span {
    font-size: 4rem;
    color: #fff;
  }


  /* ==============================================
   Navigation
  =============================================== */
  #gnav {
    display: none;
  }
  #sp-nav {
    display: block;
    line-height: 3.25;
    width: 20%;
    margin-left: 10%;
  }
  #sp-nav #nav-drawer {
    position: relative;
    text-align: center;
  }

  /*チェックボックス等は非表示に*/
  #sp-nav .nav-unshown {
    display:none;
  }

  /*アイコンのスペース*/
  #sp-nav #nav-open {
    display: inline-block;
    width: 32px;
    height: 22px;
    vertical-align: middle;
  }

  /*ハンバーガーアイコンをCSSだけで表現*/
  #sp-nav #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 2px;/*線の太さ*/
    width: 30px;/*長さ*/
    border-radius: 3px;
    background: #0b4e49;
    display: block;
    content: '';
    cursor: pointer;
  }
  #sp-nav #nav-open span:before {
    bottom: -10px;
  }
  #sp-nav #nav-open span:after {
    bottom: -20px;
  }
  #sp-nav p {
    color: #0b4e49;
    font-size: 1rem;
    margin-top: -10px;
    text-align: center;
  }


  /*閉じる用の薄黒カバー*/
  #sp-nav #nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }

  /*中身*/
  #sp-nav #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
    max-width: 75%;/*最大幅（調整してください）*/
    height: 100%;
    background: #0b4e49;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(135%);
    transform: translateX(135%);/*右に隠しておく*/
    padding: 20px 30px;
  }

  /*チェックが入ったらもろもろ表示*/
  #sp-nav #nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .8;
  }

  /* 閉じるボタン */
  #sp-nav .close-btn {
    text-align: left;
    color: #fff;
  }
  #sp-nav .close-btn2 {
    width: 30px;
    font-size: 1.4rem;
    width: 20%;
    position: fixed;
    top: 10px;
    left: 10px;
    font-weight: bold;
    height: 60px;
  }
  #sp-nav .close-btn2::before {
    display: block;
    font-size: 3rem;
  }

  #sp-nav #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(34%);
    transform: translateX(34%);/*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }

  /* 書き足し */
#sp-nav #nav-content ul {
  display: block;
  font-size: 1.4rem;
  margin-top: 0;
}
#sp-nav #nav-content li::before {
  content: none;
  margin-right: 0;
}
#sp-nav #nav-content ul li {
  margin-bottom: 15px;
  border-bottom: 1px solid #fff;
  position: relative;
}
#sp-nav #nav-content ul li:last-of-type {
  margin-bottom: 30px;
}
#sp-nav #nav-content li::after {
  content: "";
  position: absolute;
  right: 0;
  margin-top: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sp-nav #nav-content a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px;
  font-size: 1.4rem;
}
#sp-nav #nav-content a:active {
  opacity: 0.3;
}
#sp-nav #nav-content .box {
  width: 100%;
}

#sp-nav #nav-content .box .tel a {
    color: #0b4e49;
    font-size: 2.3rem;
    font-weight: bold;
    position: relative;
    padding-left: 35px;
    line-height: 0.25;
}
#sp-nav #nav-content .box .tel a::before {
    font-family: "dashicons";
    content: "\f470";
    position: absolute;
    top: 45%;
    left: 5%;
}
#sp-nav #nav-content .box p {
  margin-top: 5px;
  color: #1f1f1f;
  font-size: 1rem;
  text-align: center;
}
#sp-nav #nav-content .box .mail a {
    font-size: 1.6rem;
    line-height: 1.25;
    padding: 10px 25px 10px 45px;
    color: #0b4e49;
}
#sp-nav #nav-content .box .mail a::before {
    font-family: "dashicons";
    content: "\f465";
    position: absolute;
    top: 20%;
    left: 10%;
}
#sp-nav #nav-content .box .mail p {
  color: #0b4e49;
}
#sp-nav #nav-content .box .mail span {
  font-size: 1.4rem;
}
#sp-nav #nav-content .box:first-of-type {
  margin-bottom: 20px;
}
nav {
  background-color: #fff;
}


/* ============================================================================================
 メインコンテンツ共通
============================================================================================= */

  /* page title
  ----------------------------------------------- */
  #page-title h1 {
    padding: 30px 10px;
    font-size: 2.6rem;
  }
  /* heading
  ----------------------------------------------- */
  .heading-2 {
    font-size: 2.4rem;
    padding-left: 0;
    margin-bottom: 20px;
  }
  .heading-3 {
    font-size: 1.7rem;
  }

  /* breadcrumbs
  ----------------------------------------------- */
  .breadcrumbs {
    font-size: 1.1rem;
    margin-bottom: 20px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .breadcrumbs > span {
    margin-right: 5px;
    margin-left: 5px;
  }

  /* 施工事例SPでスライダー解除
  ----------------------------------------------- */
  .case-block .container {
    padding-left: 0;
    padding-right: 0;
  }
    .pc {
      display: none;
    }
    #case_slidersp {
      margin-bottom: 40px;
    }
    #case_slidersp li {
      width: 47%;
    }
    .case-archive-list li table td {
      display: block;
      line-height: 1.2;
      margin-bottom: 2em;
    }
    .case-archive-list li table td:last-of-type {
      margin-bottom: 0;
    }


span.sizeup {
  font-size: 2.8rem;
}
.drift {
  width: 80%;
  margin: 0 auto;
}
.guide p {
  font-size: 1.6rem;
}
.btn {
  width: 90%;
}
.flex {
  flex-wrap: wrap;
}

/* ============================================================================================
 コンテンツ内共通お問い合わせ
============================================================================================= */
.common-contact .box {
  width: 100%;
}
.common-contact h2 {
  font-size: 2rem;
  font-weight: 500;
}
.common-contact .tel {
  margin-bottom: 20px;
}
.common-contact .mail a {
  text-align: center;
}
.common-contact .mail a::before {
  left: 8%;
}

  /* ============================================================================================
   TOP
  ============================================================================================= */
  #billboard {
    background: none;
    padding: 0;
  }
  #billboard .container {
    max-width: 100%;
  }

  .top-intro {
    background-position: bottom;
    padding: 30px 0 70px;
  }
  .top-feature .box {
    flex-basis: 100%;
  }
  .top-dealer .flex {
    flex-wrap: wrap;
  }
  .top-dealer .flex .box {
    width: 100%;
  }
  .top-dealer .flex .box p:nth-of-type(2) {
    text-align: center;
  }
  .top-dealer .box .value {
    margin-bottom: 20px;
  }
  .top-dealer .value .cheap:after{
    margin: 0 0 2px 4px;
  }
  .top-dealer .container>p {
    margin-top: 0;
  }
  .top-reason .point p {
    width: 90%;
    padding: 20px;
  }
  .top-reason .flex {
    width: 70%;
    margin: 0 auto;
    justify-content: space-between;
  }
  .top-service .h2-gradation {
    width: 100%;
    left: 0%;
    top: -4%;
  }
  .top-service h2 {
    font-size: 2.2rem;
  }
  .top-service .service {
    width: 100%;
    margin-left: 0;
    padding: 20px;
    margin-bottom: 30px;
  }
  .top-service .flex {
    display: block;
  }
  .top-service .flex>p {
    top: 0;
    left: 0;
    width: 100%;
    position: static;
    margin-bottom: 10px;
  }
  .top-service .flex .box {
    width: 100%;
    margin-left: 0;
  }
  .top-service .flex .box p{
    font-size: 1.6rem;
  }
  .top-service .btn {
    width: 100%;
    position: static;
  }
  .top-service .btn a::after {
    top: 33%;
  }
  .top-service .service:last-of-type {
    padding: 20px;
  }
  .top-service .service:last-of-type .flex {
    display: flex;
    flex-wrap: wrap-reverse;
  }
  .top-service .service:last-of-type .flex .box {
    width: 100%;
  }
  .top-maintenance {
    margin-bottom: 30px;
  }
  .top-maintenance .h2-gradation {
    width: 100%;
  }
  .top-maintenance .h2-gradation h2 {
    font-size: 2.2rem;
  }
  .top-maintenance_detail .container>p {
    font-size: 1.2rem;
  }
  .top-maintenance_detail .flex {
    display: block;
  }
  .top-maintenance_detail .flex>p {
    width: 100%;
    position: static;
    top: 0;
    margin-bottom: 20px;
  }
  .top-maintenance_detail .box {
    display: inline-block;
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .top-maintenance_detail .box>p {
    display: inline-block;
    font-size: 1.5rem;
    text-align: left;
  }
  .top-maintenance_detail .box .tel {
    padding: 10px 50px;
  }
  .top-maintenance_detail .box .mail a::before {
    left: 13%;
  }

  .case-maker .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .case-block h2 {
    margin-bottom: 0;
  }

  /* ============================================================================================
   初めての方へ
  ============================================================================================= */
  .customer-head h2 span {
    font-size: 2.4rem;
  }
  .customer-head .container>p {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .customer-head .box {
    width: 100%;
    margin-bottom: 20px;
  }
  .customer-head .box p {
    margin-bottom: 0;
  }
  .customer-head .flex>p {
    margin-bottom: 20px;
    width: 100%;
    line-height: 1.5;
  }
  .customer-head .container>.flex:nth-of-type(2) {
    display: block;
  }
  .customer-head .face::before {
    width: 45%;
  }
  .customer-head .face {
    padding: 20px 10px;
    font-size: 1.2rem;
  }
  .customer-head .flex:nth-of-type(3)::after {
    width: 15%;
  }
  .customer-head .flex:nth-of-type(4) {
    display: block;
  }

  /* .customer-flow
  ----------------------------------------------- */
  .customer-flow {
    padding-bottom: 10px;
  }
  .customer-flow .balloon {
    width: 60%;
  }
  .customer-flow h2 {
    line-height: 1.25;
    font-size: 2.4rem;
  }
  .customer-flow .container>.flex {
    display: block;
    padding: 20px;
  }
  .customer-flow .flex:nth-of-type(2) .box:first-of-type {
    width: 100%;
  }
  .customer-flow .flex:nth-of-type(2) .box:last-of-type {
    width: 100%;
  }
  .customer-flow .flex .box {
    width: 100%;
    margin-bottom: 20px;
  }
  .customer-flow .flex>p {
    width: 100%;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .box {
    width: 100%;
  }
  .customer-flow .tel {
    margin-bottom: 20px;
  }
  .customer-flow .tel a {
    font-size: 3.2rem;
  }
  .customer-flow .mail a {
    font-size: 2.2rem;
  }
  .customer-flow .mail a::before {
    left: 11%;
  }
  .customer-flow .flex:nth-of-type(9) .box {
    width: 100%;
  }

  /* ============================================================================================
   キズ・ヘコミ
  ============================================================================================= */
  .bodyworks-head .flex:first-of-type {
    flex-wrap: wrap;
  }
  .bodyworks-head .flex:first-of-type p {
    width: 49%;
    margin-bottom: 10px;
  }
  .bodyworks-head .container>p {
    margin-bottom: 20px;
    line-height: 1.5;
  }
  .bodyworks-head .h2-gradation h2 {
    font-size: 2.2rem;
  }
  .bodyworks-head .container>p:nth-of-type(2)::before {
    content: "";
    margin-right: 0;
  }
  .bodyworks-head .container>p:nth-of-type(2)::after {
    content: "";
    margin-left: 0;
  }
  .bodyworks-head .flex>p {
    width: 32%;
  }
  .bodyworks-head .flex:last-of-type {
    display: block;
  }
  .bodyworks-head .flex:last-of-type .box {
    width: 100%;
    margin-bottom: 20px;
  }
    .bodyworks-head .flex:nth-of-type(3) {
    display: block;
  }
  .bodyworks-head .flex:nth-of-type(3) p:first-of-type, .bodyworks-head .flex:nth-of-type(4) p:last-of-type {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .bodyworks-head .flex:nth-of-type(3) p:last-of-type, .bodyworks-head .flex:nth-of-type(4) p:first-of-type {
    width: 100%;
  }
  .bodyworks-head .box:first-of-type {
    border-right: 8px solid #e6f4e9;
  }
  .bodyworks-head .box:nth-of-type(2) {
    border-left: 8px solid #e6f4e9;
    border-right: 8px solid #e6f4e9;
  }
  .bodyworks-head .box:last-of-type {
    border-left: 8px solid #e6f4e9;
  }
  .bodyworks-head h2 {
    line-height: 1.25;
  }
  .bodyworks-head h3 {
    text-align: center;
    font-size: 2rem;
  }
  .bodyworks-head .box {
    width: 100%;
  }
  .bodyworks-point .h2-gradation h2 {
    font-size: 2.4rem;
  }
  .bodyworks-point .point {
    width: 50%;
  }
  .bodyworks-point h3 {
    font-size: 2.4rem;
  }
  .bodyworks-point .box {
    display: block;
  }
  .bodyworks-point .box>p:last-of-type {
    font-size: 1.6rem;
  }
  .bodyworks-point .box .flex p:first-of-type {
    width: 100%;
    margin-bottom: 20px;
  }
  .bodyworks-point .box .flex p:last-of-type {
    width: 100%;
  }
  .bodyworks-repair .h2-gradation {
    top: -22%;
  }
  .bodyworks-inspection h3 {
    font-size: 1.6rem;
  }
  .bodyworks-inspection .flex {
    display: block;
  }
  .bodyworks-inspection p {
    width: 100%;
    margin-bottom: 20px;
  }
  .bodyworks-maker p {
    padding: 0 20px;
  }

  /* ============================================================================================
   整備・車検
  ============================================================================================= */
  .maintenance-head .container>h2 {
    font-size: 2.4rem;
  }
  .maintenance-head h3 {
    font-size: 1.8rem;
  }
  .maintenance-head .container>p {
    line-height: 1.5;
  }
  .maintenance-head .flex:first-of-type {
    flex-wrap: wrap;
  }
  .maintenance-head .flex:first-of-type p {
    width: 49%;
    margin-bottom: 10px;
  }
  .maintenance-pro h2 + p {
    margin-bottom: 20px;
    font-size: 1.6rem;
  }
  .maintenance-pro .flex {
    display: block;
  }
  .maintenance-pro .flex:nth-of-type(1) p:first-of-type, .maintenance-pro .flex:nth-of-type(2) p:last-of-type {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .maintenance-pro .flex:nth-of-type(1) p:last-of-type, .maintenance-pro .flex:nth-of-type(2) p:first-of-type {
    width: 100%;
    margin-bottom: 20px;
  }
  .maintenance-case .container>p:nth-of-type(2)::before {
    content: "";
    margin-right: 0;
  }
  .maintenance-case .container>p:nth-of-type(2)::after {
    content: "";
    margin-left: 0;
  }
  .maintenance-case .flex:nth-of-type(3) {
    display: block;
  }
  .maintenance-case .flex:nth-of-type(3) .box {
    width: 100%;
    margin-bottom: 20px;
  }
  .maintenance-case .flex:nth-of-type(3) .box:first-of-type {
    border-right: 8px solid #e6f4e9;
  }
  .maintenance-case .flex:nth-of-type(3) .box:nth-of-type(2) {
    border-left: 8px solid #e6f4e9;
    border-right: 8px solid #e6f4e9;
  }
  .maintenance-case .flex:nth-of-type(3) .box:last-of-type {
    border-left: 8px solid #e6f4e9;
  }
  .maintenance-case .container>p::before {
    content: "";
    margin-right: 0;
  }
  .maintenance-case .container>p::after {
    content: "";
    margin-left: 0;
  }
  .maintenance-case .flex:nth-of-type(4) {
    display: block;
  }
  .maintenance-case .flex:nth-of-type(4) p {
    width: 100%;
  }
  .maintenance-case .flex:nth-of-type(5) p {
    width: 100%;
  }
  .maintenance-case .flex dl {
    width: 100%;
    padding: 20px 10px;
  }
  .maintenance-point .flex {
    display: block;
  }
  .maintenance-point .box .flex p:first-of-type {
    width: 100%;
    margin-bottom: 20px;
  }
  .maintenance-point .box .flex p:last-of-type {
    width: 100%;
  }
  .maintenance-point .point {
    width: 50%;
  }
  .maintenance-point h3 {
    font-size: 2rem;
  }
  .maintenance-other .flex {
    display: block;
  }
  .maintenance-other .box:last-of-type .flex {
    display: flex;
  }
  .maintenance-factory .flex:nth-of-type(2) {
    display: block;
  }
  .maintenance-factory .flex:nth-of-type(2) p {
    width: 100%;
    margin-bottom: 20px;
  }
  .maintenance-factory .flex {
    display: block;
  }
  .maintenance-factory .flex:last-of-type .box {
    width: 100%;
    margin-bottom: 40px;
  }
  .maintenance-inspection .h2-gradation h2 {
    font-size: 2rem;
  }
  .maintenance-inspection .h2-gradation h2 span {
    font-size: 2.6rem;
  }
  .maintenance-inspection .flex {
    display: block;
  }
  .maintenance-inspection .flex:nth-of-type(2) p:first-of-type {
    width: 100%;
  }
  .maintenance-inspection .flex:nth-of-type(2) p:last-of-type {
    width: 100%;
  }
  .maintenance-inspection>.container p {
    font-size: 2rem;
  }
  .maintenance-inspection p.two-year {
    font-size: 1.6rem;
    line-height: 1.5;
  }
  .maintenance-head .box {
    width: 100%;
    margin-bottom: 20px;
  }
  .maintenance-head .flex>p {
    width: 100%;
  }

  /* ============================================================================================
   アバウト
  ============================================================================================= */
  .company-lead h2 {
    font-size: 2rem;
  }
  .company-lead h2 span {
    font-size: 2.4rem;
  }
  .company-lead .flex:first-of-type p:first-of-type {
    width: 100%;
    margin-bottom: 20px;
  }
  .company-lead .flex:first-of-type p:last-of-type {
    width: 100%;
  }
  .company-lead .flex:first-of-type {
    margin-bottom: 20px;
  }
  .company-detail table {
    width: 100%;
    margin-bottom: 30px;
    padding: 20px;
  }
  .company-detail table th {
    padding: 20px 0 20px 20px;
    width: 110px;
  }
  .company-area h2 span {
    font-size: 2.4rem;
  }
  .company-area .flex {
    display: block;
  }
  .company-area .box {
    width: 100%;
    margin-bottom: 20px;
  }
  .company-area .flex>p {
    width: 100%;
  }
  .company-area .map{
    padding-bottom: 100%;
  }


  /* news archive
  ----------------------------------------------- */
  .news-archive {
    padding-top: 0;
  }
  .news-archive .post-archive {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 60px;
  }
  .news-archive .post-archive article a .archive-contents::after {
    right: 10px;
  }
  .news-archive .post-archive article a p {
    width: 95%;
  }
  .news-archive .post-archive article a img {
    width: 0;
    display: none;
  }
  .news-archive .post-archive article a .archive-contents {
    margin-left: 0;
  }
  .news-archive .post-archive article a h1 {
    font-size: 1.6rem;
    margin-bottom: 3px;
  }
  .news-archive .post-archive article a .post-excerpt {
    font-size: 1.2rem;
  }
  .news-archive .post-archive article a .post-date {
    margin-right: 0.25em;
    font-size: 1.4rem;
  }
  .news-archive .archive-post {
    margin-bottom: 20px;
  }
  .news-archive .archive-post:last-of-type {
    margin-bottom: 40px;
  }

  /* news widget
  ----------------------------------------------- */
  .post-widget {
    float: none;
    width: 100%;
  }


  /* news detail
  ----------------------------------------------- */
  .news-detail {
    padding-top: 0;
  }
  .news-detail .post-detail {
    float: none;
    width: 100%;
    padding: 20px;
    margin-bottom: 40px;
  }
  .news-detail .post-navigation {
    margin-bottom: 80px;
    margin-top: 80px;
    display: block;
  }
  .news-detail .post-navigation .prev,
  .news-detail .post-navigation .next,
  .news-detail .post-navigation .back {
    width: 100%;
    margin-bottom: 10px;
  }
  .news-detail .post-navigation .prev a::after,
  .news-detail .post-navigation .next a::after {
    top: 38%;
  }
  .news-detail .post-navigation a {
    padding: 15px;
  }
  .news-detail .post-detail h2 {
    padding-right: 10px;
    font-size: 1.6em;
  }
  .news-detail .post-detail h2 span {
    position: static;
    top: 0;
    left: 0;
    display: block;
    text-align: right;
    font-size: 1.1rem;
    padding-top: 5px;
  }

  /* case archive
  ----------------------------------------------- */
  .case-top h2 {
    font-size: 2.6rem;
  }
  .case-top .lead {
    width: 100%;
    margin-bottom: 20px;
  }
  .case-top .container>.flex:first-of-type {
    margin-bottom: 30px;
  }
  .case-top .container>.flex:first-of-type p:last-of-type {
    width: 100%;
  }
  .case-top .btn {
    width: 100%;
    margin-bottom: 20px;
  }
  .case-top .container>.flex:last-of-type {
    margin-bottom: 0;
  }
  .case-top .container:first-of-type {
    margin-bottom: 20px;
  }
  .case-cate p {
    width: 100%;
    font-size: 1.6rem;
  }
  .case-cate .btn {
    width: 48%;
  }
  .case-cate .btn:first-of-type,
  .case-cate .btn:nth-of-type(3) {
    margin-bottom: 20px;
  }
  .case-cate .flex {
    margin-bottom: 40px;
  }
  .case-maker .case-sort--maker>p {
    margin-bottom: 30px;
    width: 100%;
    font-size: 1.6rem;
  }
  .case-maker h3 {
    margin-bottom: 30px;
    font-size: 2.2rem;
  }
  .case-archive {
    padding: 0;
  }
  .case-archive h3 {
    font-size: 2.4rem;
  }
  .case-archive .container {
    padding-left: 0;
    padding-right: 0;
  }
  .case-archive-list li {
    margin: 0 auto 20px;
    max-width: 478px;
    width: 47%;
  }
  .case-archive-list li:nth-child(4n) {
    margin-right: auto;
  }
  .case-archive-list li table td {
    width: 100%;
  }
  .case-archive .default-btn a {
    width: 100%;
  }

  .case-block h2 {
    line-height: 1.25;
  }
  .case-block {
    padding: 0;
  }
  .case-block .btn {
    margin-top: 0;
    width: 90%;
    margin-bottom: 40px;
  }


  /* case detail
  ----------------------------------------------- */
  .case-detail .container {
    padding-left: 0;
    padding-right: 0;
  }
  .case-detail .case-detail__photo {
    float: none;
    margin-bottom: 20px;
    width: 100%;
  }
  .case-detail .case-detail__meta {
    float: left;
    width: 100%;
  }
  .case-detail .case-detail__meta table th {
    width: 30%;
  }
  .case-detail .case-detail__meta table td {
    padding: 10px;
  }
  .case-detail .case-detail__contents {
    margin-top: 20px;
    padding: 15px;
  }
  .case-flow>.container {
    padding: 30px 0;
  }
  .case-flow ul li {
    padding: 20px;
    margin-bottom: 20px;
  }
  .case-flow ul li .thumb, .case-flow ul li .case-flow__comment {
    float: none;
    width: 100%;
  }
  .case-flow ul li .thumb {
    margin-bottom: 15px;
  }
  .case-flow ul li h4 {
    font-size: 1.8rem;
  }
  .case-flow ul li h4 img {
    vertical-align: bottom;
  }

  /* ============================================================================================
   プライバシーポリシー
  ============================================================================================= */
  .privacy h2 {
    line-height: 1.25;
    font-size: 1.8rem;
  }


  /* ============================================================================================
   フォーム
  ============================================================================================= */
  .form {
    padding: 20px 0;
    margin-bottom: 50px;
  }
  .form h2 {
    font-size: 2.2rem;
    line-height: 1.25;
    margin-bottom: 20px;
  }
  .form .box {
    width: 100%;
  }
  .form .tel a {
    font-size: 3.6rem;
  }
  .form .detail {
    display: block;
    margin: 0 auto 20px;
  }
  .form .detail a {
    margin: 0 auto 10px;
  }
  .form .detail .info-tel {
    width: 100%;
    margin-bottom: 20px;
  }
  .form .detail .note {
    width: 100%;
    margin-bottom: 20px;
  }
  .form .info-tel a {
    width: 100%;
    font-size: 2.4rem;
    margin: 0 auto 10px;
  }
  .form .info-tel p {
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .form table {
    border-top: none;
    margin-bottom: 40px;
  }
  .form table tr {
    margin-bottom: 10px;
  }
  .form table th {
    display: block;
    border-bottom: none;
    padding: 10px;
    width: 100%;
  }
  .form table td {
    display: block;
    border-bottom: none;
    padding: 5px 0 5px;
    width: 100%;
    margin-bottom: 15px;
  }
  .form input[name="submitConfirm"], .form input[name="submit"] {
    width: 100%;
    padding: 25px;
  }
  .form .mw_wp_form_preview input[name="submitBack"] {
    margin-bottom: 40px;
    background: url("images/common/common-icon-arrow-left.png") no-repeat left 20px top 50% / 7px;
    font-weight: bold;
  }
  .form .complete .box {
    width: 100%;
  }
  .form .complete .btn {
    width: 100%;
  }

  /* ============================================================================================
   Footer
  ============================================================================================= */
  .footer-service h2 {
    font-size: 2.6rem;
  }
  .footer-service .bg-green .flex .box {
    width: 49%;
    margin-bottom: 20px;
  }
  .footer-service .container>p {
    margin-bottom: 30px;
    font-size: 1.5rem;
  }
  .footer-service>.container .box {
    width: 100%;
    margin-bottom: 40px;
  }
  .footer-service .box h3 {
    font-size: 2rem;
  }
  .footer-service>.container .box p:last-of-type {
    height: auto;
    font-size: 1.5rem;
  }

  /*
   Footer 問い合わせ（footer-contact.php）
  ----------------------------------------------- */
  .footer-contact {
    padding: 10px;
  }
  .footer-contact h2 {
    text-align: center;
    font-size: 2.2rem;
  }
  .footer-contact .box {
    flex-basis: 100%;
  }
  .footer-contact .flex>p {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
  }
  .footer-contact .tel {
    margin-bottom: 20px;
  }
  .footer-contact .tel a {
    font-size: 3.2rem;
  }

  /*
   .footer-news_map
  ----------------------------------------------- */
  .footer-news_map .box {
    margin-bottom: 60px;
    width: 100%;
}
  .footer-news_map h2 {
    margin-bottom: 40px;
  }
  .footer-news_map .map {
    padding-bottom: 100%;
  }

  /*
   Footer 最下部（footer.php）
  ----------------------------------------------- */
  .footer-maker {
    padding: 0;
  }
  .footer-maker .flex ul {
    width: 50%;
  }
  .footer-maker .container h2 {
    line-height: 1.25;
  }
  .footer-maker p {
    text-align: center;
  }
  footer .copyright {
    font-size: 1.2rem;
  }
  .footer-info {
    padding-bottom: 0;
  }
  .footer-info .container {
    display: block;
    padding: 0 20px;
  }
  .footer-info .box {
    width: 100%;
    margin-bottom: 50px;
  }
  .footer-info .container .inner:first-of-type {
    width: 100%;
  }
  .footer-info .container .inner:first-of-type a {
    display: inline;
    width: 70%;
    margin: 0 auto 40px;
  }
  .footer-info .inner ul {
    margin-bottom: 40px;
  }
  .footer-info .inner:last-of-type {
    width: 100%;
  }
  .footer-info .link ul:first-of-type {
    margin-right: 0;
  }
  .footer-info .link ul {
    margin-bottom: 0;
  }

  /* ============================================================================================
   ページトップボタン
  ============================================================================================= */
  .pagetop {
    bottom: 20px;
    right: 20px;
  }

  /* iOS電話番号対策 */
  footer .tel-number a {
    color: #0b4e49;
    text-decoration: none;
  }

}


/* ------------------------------------------------------------------------------------
　414px以下
------------------------------------------------------------------------------------- */
@media screen and (max-width: 414px) {
  #header .header-top .container {
    padding-left: 0;
    padding-right: 0;
  }

  #header .header-menu .container {
    padding: 0 5px;
  }

  #header .header-menu .item {
    width: 90%;
    padding: 0 5px 5px;
  }

  .common-contact h2 {
    font-size: 1.6rem;
  }

  .top-reason .flex {
    width: 80%;
  }
  .top-service .h2-gradation {
    top: -5%;
  }
  .top-maintenance p {
    font-size: 2rem;
  }
  .top-maintenance_detail .box .tel {
    padding: 10px 30px;
  }

  .top-maintenance_detail .box .mail a::before {
    left: 10%;
  }

  .case-detail .case-detail__meta table th,
  .case-detail .case-detail__meta table td {
    padding: 5px;
  }

  .case-detail .case-detail__meta table th {
    width: 25%;
  }

  .case-detail .case-detail__contents {
    padding: 15px 10px;
  }

  .footer-carlife .inner {
    padding: 30px 10px;
    grid-gap: 1em;
  }

  .news-detail .post-detail h2 {
    font-size: 1.4em;
  }

  .maintenance-flow .info-tel p {
    margin-bottom: 0;
  }
  .maintenance-other .box {
    width: 100%;
  }
  .maintenance-other .box:last-of-type h3 {
    margin-bottom: 50px;
  }

  .footer-contact h2 {
    font-size: 2rem;
  }

}

/* ------------------------------------------------------------------------------------
　375px以下
------------------------------------------------------------------------------------- */
@media screen and (max-width: 375px) {
  #header .sp-submenu .flex .box:last-of-type p {
    font-size: 1rem;
  }
  #sp-nav #nav-content a {
    padding: 5px;
  }
  #sp-nav #nav-content .box .tel a {
    font-size: 1.8rem;
  }
  #sp-nav #nav-content .box p {
    font-size: 1rem;
  }
  #sp-nav #nav-content .box .mail a {
    font-size: 1.4rem;
    text-align: center;
    padding: 10px 15px 10px 35px;
  }

  .top-contact {
    padding: 30px 0;
  }
  .top-contact h2 {
    font-size: 2.8rem;
  }
  .top-contact .tel {
    padding: 20px;
  }
  .top-contact .tel a {
    font-size: 2.8rem;
  }
  .top-contact .mail a {
    font-size: 2rem;
    padding: 30px 40px;
  }
  .top-maintenance .tel {
    padding: 10px 15px;
  }
  .top-maintenance .tel a {
    font-size: 3rem;
  }
  .top-partner h2 {
    font-size: 2rem;
  }
  .top-service h2:first-of-type {
    font-size: 2.2rem;
  }


  .btn a {
    font-size: 1.6rem;
  }

  .common-contact h2 {
    font-size: 1.6rem;
  }
  .common-contact .tel a {
    font-size: 3.2rem;
  }
  .common-contact .mail a {
    font-size: 2.1rem;
  }
  .common-contact .mail span {
    font-size: 1.8rem;
  }

  .customer-head h2 {
    font-size: 2.2rem;
  }
  .customer-head .face::before {
    width: 52%;
  }
  .customer-head .flex:nth-of-type(3)::after {
    width: 17%;
  }
  .customer-flow h2 {
    font-size: 2.2rem;
  }
  .customer-flow h2 span {
    font-size: 3rem;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .tel a {
    font-size: 2.8rem;
  }
  .customer-flow .container:nth-of-type(2) h3::before,
  .customer-flow .container:nth-of-type(3) h3::before,
  .customer-flow .container:nth-of-type(4) h3::before,
  .customer-flow .container:nth-of-type(5) h3::before,
  .customer-flow .container:nth-of-type(6) h3::before,
  .customer-flow .container:nth-of-type(7) h3::before,
  .customer-flow .container:nth-of-type(8) h3::before,
  .customer-flow .container:nth-of-type(9) h3::before {
    width: 80px;
    height: 26px;
    vertical-align: bottom;
  }
  .customer-flow .container>.flex {
    padding: 20px 10px;
  }
  .customer-flow p.message {
    font-size: 2.2rem;
  }
  .customer-flow .btn a {
    font-size: 1.4rem;
  }

  .bodyworks-head .container>h2 {
    font-size: 2.4rem;
  }
  .bodyworks-head h3 {
    font-size: 1.8rem;
  }
  .bodyworks-head .h2-gradation h2 {
    font-size: 1.8rem;
  }
  .bodyworks-point .h2-gradation h2 {
    font-size: 2rem;
  }
  .bodyworks-point .container>p {
    font-size: 2rem;
  }
  .bodyworks-point h3 {
    font-size: 2rem;
  }
  .bodyworks-repair h2 span {
    font-size: 2rem;
  }
  .bodyworks-repair .h2-gradation {
    top: -19%;
  }
  .bodyworks-inspection h3 {
    width: 100%;
  }
  .bodyworks-area .box {
    padding: 20px;
  }
  .bodyworks-factory .container>p {
    font-size: 1.6rem;
    padding: 20px 10px;
  }
  .bodyworks-case .outer {
    padding: 20px;
  }
  .bodyworks-case .outer:last-of-type h2 {
    margin-bottom: 20px;
  }


  .maintenance-head .container>h2 {
    font-size: 2rem;
  }
  .maintenance-head h3 {
    font-size: 1.6rem;
  }
  .maintenance-point h3 {
    font-size: 1.8rem;
  }

  .post-detail .btn a::after {
    top: 25%;
  }
  .case-archive .btn a::after {
    top: 30%;
  }
  .case-flow .btn a::after {
    top: 32%;
  }

  .footer-service {
    padding: 40px 0;
  }
  .footer-service .container>h3 {
    margin-bottom: 30px;
  }
  .footer-service .box h3 {
    font-size: 1.8rem;
  }
  .footer-contact .tel a {
    font-size: 2.8rem;
  }
  .footer-contact .mail a {
    font-size: 2rem;
  }

  .form .tel {
    padding: 20px;
  }
  .form .tel a {
    font-size: 3.2rem;
  }
}

/* ------------------------------------------------------------------------------------
　360px以下
------------------------------------------------------------------------------------- */
@media screen and (max-width: 360px) {
  #sp-nav {
    width: 22%;
  }
  #header .sp-submenu .flex .box .tel a {
    font-size: 2.6rem;
  }
}

/* ------------------------------------------------------------------------------------
　320px以下
------------------------------------------------------------------------------------- */
@media screen and (max-width: 320px) {
  #header .sp-submenu .flex .box .tel a {
    font-size: 2.4rem;
  }
  #header .sp-submenu .flex .box:last-of-type p {
    font-size: 0.6rem;
  }
  #header .sp-submenu .flex .box:first-of-type p {
    font-size: 1rem;
  }
  #header .sp-submenu .flex .box .mail span {
    font-size: 3.4rem;
  }
  #header .header-top h1 {
    font-size: 1rem;
  }
  #header .sp-submenu .flex .box .mail a {
    padding: 25% 23%;
  }
  #sp-nav {
    line-height: 3;
    width: 28%;
  }
  #sp-nav #nav-content {
    padding: 20px;
  }
  #sp-nav #nav-content .box .tel a {
    font-size: 1.8rem;
  }
  #sp-nav #nav-content .box .mail a {
    padding: 10px 5px 10px 25px;
  }
  #sp-nav #nav-content .box .mail a::before {
    top: 20%;
    left: 8%;
  }

  .h2-border h2 {
    font-size: 2.6rem;
  }
  .btn {
    width: 100%;
  }
  .btn a::after {
    top: 32%;
  }

  .top-feature h2 {
    font-size: 2rem;
  }
  .top-feature dl {
    padding: 0 20px 20px;
  }
  .top-feature dt {
    font-size: 2rem;
  }
  .top-feature .container>p {
    font-size: 1.2rem;
  }
  .top-feature .btn {
    width: 100%;
  }
  .top-dealer .h2-gradation h2 {
    font-size: 1.6rem;
  }
  .top-head h2 {
    font-size: 2rem;
  }
  .top-head span.sizeup {
    font-size: 2.4rem;
  }
  .top-service .balloon p {
    font-size: 1.4rem;
  }
  .top-contact h2 {
    font-size: 2.4rem;
  }
  .top-reason h2 {
    font-size: 2rem;
  }
  .top-reason .point p {
    font-size: 1.8rem;
  }
  .top-reason .flex {
    width: 90%;
  }
  .top-service h2:first-of-type {
    font-size: 1.8rem;
  }
  .top-maintenance p {
    font-size: 1.8rem;
  }
  .top-maintenance_detail .box .tel {
    padding: 10px;
  }
  .top-maintenance_detail .tel a {
    font-size: 3rem;
  }
  .top-maintenance_detail .box .mail a {
    font-size: 2rem;
  }
  .top-maintenance_detail .box .mail a::before {
    left: 9%;
  }
  .top-maintenance_detail .box .mail span {
    font-size: 1.6rem;
  }
  .top-maintenance_detail .container>p::before {
    content: "";
    margin-right: 0;
  }
  .top-maintenance_detail .container>p::after {
    content: "";
    margin-left: 0;
  }

  .common-contact h2 {
    font-size: 1.4rem;
  }
  .common-contact .tel a  {
    font-size: 2.6rem;
  }
  .common-contact .mail a {
    padding: 0px 15px 0 40px;
    font-size: 2rem;
  }
  .common-contact .mail a::before {
    top: 3%;
    left: 5%;
  }

  .footer-service .container>h3 {
    font-size: 1.4rem;
  }
  .footer-service .box h3 {
    font-size: 1.8rem;
  }
  .footer-contact h2 {
    font-size: 2rem;
  }
  .footer-contact .tel {
    padding: 10px 20px;
  }
  .footer-contact .tel a {
    font-size: 2.4rem;
  }
  .footer-contact .mail a {
    font-size: 1.8rem;
  }
  .footer-contact .mail a::before {
    top: 20%;
    left: 9%;
  }
  .footer-contact .mail span {
    font-size: 1.6rem;
  }

  .footer-contact .box p {
    font-size: 1.2rem;
  }
  .footer-info .container {
    padding: 0 10px;
  }

  .customer-head .flex {
    display: block;
  }
  .customer-head .face::before {
    width: 20%;
  }
  .customer-head .face {
    padding: 10px;
  }
  .customer-head .flex:nth-of-type(3)::after {
    width: 100%;
  }
  .customer-flow .balloon {
    width: 70%;
  }
  .customer-flow h2 {
    font-size: 2rem;
  }
  .customer-head h2 {
    font-size: 1.8rem;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .tel a {
    font-size: 2.6rem;
  }
  .customer-flow .container:nth-of-type(2) .flex:nth-of-type(2) .tel p {
    font-size: 1rem;
  }
  .customer-flow p.message {
    font-size: 1.8rem;
  }
  .customer-flow .tel {
    padding: 10px;
  }
  .customer-flow .flex .box>a {
    font-size: 1.4rem;
  }
  .customer-flow .container:first-of-type .flex .box .tel p {
    font-size: 1.2rem;
  }
  .customer-flow .flex:nth-of-type(6) .box>a {
    font-size: 1rem;
  }
  .customer-flow .flex .box>a span {
    font-size: 1.4rem;
  }
  .customer-flow .flex:nth-of-type(2) h3::before, .customer-flow .flex:nth-of-type(3) h3::before, .customer-flow .flex:nth-of-type(4) h3::before, .customer-flow .flex:nth-of-type(5) h3::before, .customer-flow .flex:nth-of-type(6) h3::before, .customer-flow .flex:nth-of-type(7) h3::before, .customer-flow .flex:nth-of-type(8) h3::before, .customer-flow .flex:nth-of-type(9) h3::before {
    width: 60px;
    height: 35px;
    margin-right: 0.5em;
  }
  .customer-flow h3 {
    font-size: 1.8rem;
  }
  .customer-flow .tel a {
    font-size: 2.6rem;
  }
  .customer-flow .mail a {
    font-size: 1.8rem;
  }
  .customer-flow .mail a::before {
    top: 20%;
  }
  .customer-flow .btn a {
    font-size: 1.6rem;
  }

  .bodyworks-head .h2-gradation h2 {
    font-size: 1.6rem;
  }
  .bodyworks-case h2 {
    font-size: 2rem;
  }
  .bodyworks-head .h2-green h2 {
    font-size: 1.6rem;
  }
  .bodyworks-head .container>p:nth-of-type(2) {
    font-size: 1.6rem;
  }
  .bodyworks-point .h2-gradation h2 {
    font-size: 1.6rem;
  }
  .bodyworks-point h3 {
    font-size: 1.8rem;
  }
  .bodyworks-repair .h2-gradation h2 {
    font-size: 1.6rem;
  }
  .bodyworks-repair h2 span {
    font-size: 1.8rem;
  }
  .bodyworks-repair .h2-gradation {
    top: -15%;
  }
  .bodyworks-repair h3 {
    font-size: 1.6rem;
  }
  .bodyworks-area .h2-green h2 {
    font-size: 1.6rem;
  }
  .bodyworks-maker h3 {
    font-size: 1.8rem;
  }

  .maintenance-head .container>h2 {
    font-size: 1.8rem;
  }
  .maintenance-pro h2 {
    font-size: 2rem;
  }
  .maintenance-pro h2 + p {
    font-size: 1.4rem;
  }
  .maintenance-case .h2-green h2 {
    font-size: 1.8rem;
  }
  .maintenance-case .container>p {
    font-size: 1.8rem;
  }
  .maintenance-point .h2-gradation h2 {
    font-size: 1.8rem;
  }
  .maintenance-point .container>p {
    font-size: 2rem;
  }
  .maintenance-inspection .h2-gradation h2 {
    font-size: 1.6rem;
  }
  .maintenance-inspection .h2-gradation h2 span {
    font-size: 2rem;
  }
  .maintenance-inspection>.container p {
    font-size: 1.6rem;
  }
  .maintenance-head h2 {
    font-size: 2rem;
  }
  .maintenance-head h3 {
    font-size: 1.6rem;
  }

  .company-lead h2 span {
    font-size: 2rem;
  }
  .company-lead h2 {
    font-size: 1.8rem;
  }
  .company-detail table {
    padding: 10px;
  }
  .company-detail table th {
    padding: 20px 0 20px 10px;
    width: 90px;
  }
  .company-area .h2-gradation h2 {
    font-size: 1.6rem;
  }
  .company-area h2 span {
    font-size: 2rem;
  }

  .case-top h2 {
    font-size: 2.2rem;
  }

  .form .tel a {
    font-size: 2.8rem;
  }
  .form .complete .box .tel a {
    font-size: 3rem;
  }
}