@charset "utf-8";

/* フォント
----------------------------------------------------------------------------------------------------*/
@font-face {
	font-family: "Noto Serif CJK JP";
	font-style: normal;
	font-weight: 400;
	src: url("../../font/NotoSerifCJKjp-Regular.woff") format("woff"),
	     url("../../font/NotoSerifCJKjp-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Noto Serif CJK JP";
	font-style: normal;
	font-weight: 500;
	src: url("../../font/NotoSerifCJKjp-Medium.woff") format("woff"),
	     url("../../font/NotoSerifCJKjp-Medium.otf") format("opentype");
}

@font-face {
	font-family: "Noto Serif CJK JP";
	font-style: normal;
	font-weight: 700;
	src: url("../../font/NotoSerifCJKjp-Bold.woff") format("woff"),
	     url("../../font/NotoSerifCJKjp-Bold.otf") format("opentype");
}

/* 共通
----------------------------------------------------------------------------------------------------*/
html {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	background-color: #FFF0F5;
}

/* レイアウト設定 */
.grid-container {
	max-width: 75rem;
}

article,
article section {
	margin-bottom:2rem;
}

/* 画像設定 */
a:hover img {
	opacity: 0.5;
}

/* カラー設定 */
a {
	color: #009900;
}

a:hover, a:focus {
    color: #FF6600;
}

.red {
	color: #E50012;
}
.gray {
	color: #666666;
}

.blue {
	color: #38a1db;
}

.green {
	color:#00CC00;
}

.orange {
	color:#FF6600;
}

.yellow {
	color:#FFFF00;
}

/* サイズ設定 */
.big {
	font-size: 1.4rem;
}

.big2 {
	font-size: 1.2rem;
}

.big3 {
	font-size: 2rem;
}

.big4 {
	font-size: 4rem;
}

.normal {
	font-size: 1rem;
}

.mini {
	font-size:0.85rem;
	font-weight:normal;
}

.mini2 {
	font-size:0.75rem;
}

/* キャッチコピー */
.copy {
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-weight: bold;
	font-size:1.5rem;
}

.copy2 {
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-weight: bold;
	font-size:1.25rem;
}

.copy3 {
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-weight: 500;
	font-size:1rem;
}

.copy4 {
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-weight: bold;
	font-size:2rem;
}

/* 引用設定 */
article blockquote {
	background-color:#FFFAE8;
	border-left:none;
	padding:1rem 1rem 0.5rem;
}

article blockquote p {
	color:#333;
}

/* マーカー設定 */
.marker {
	background: linear-gradient(transparent 60%, #ffff66 60%);
}

/* パネル設定 */
.panel {
	border-radius:10px;
}

.panel .button {
	margin-bottom:0;
}

/* ボタンカラー設定
----------------------------------------------------------------------------------------------------*/
.button {
  background-color: #00CC00;
  color: #fefefe; }
  .button:hover, .button:focus {
    background-color: #82ae46;
    color: #fefefe; }
  .button.primary {
    background-color: #38a1db;
    color: #fefefe; }
    .button.primary:hover, .button.primary:focus {
      background-color: #172A88;
      color: #fefefe; }
  .button.secondary {
    background-color: #777;
    color: #fefefe; }
    .button.secondary:hover, .button.secondary:focus {
      background-color: #474a4d;
      color: #fefefe; }
  .button.alert {
    background-color: #FF0000;
    color: #fefefe; }
    .button.alert:hover, .button.alert:focus {
      background-color: #9e0c0f;
      color: #fefefe; }
  .button.success {
    background-color: #4a831c;
    color: #fefefe; }
    .button.success:hover, .button.success:focus {
      background-color: #82ae46;
      color: #fefefe; }
  .button.warning {
    background-color: #f08300;
    color: #fefefe; }
    .button.warning:hover, .button.warning:focus {
      background-color: #ea5506;
      color: #fefefe; }

/* ボタン設定 */
button.small, .button.small {
    padding-top: 0.625rem;
    padding-right: 2rem;
    padding-bottom: 0.625rem;
    padding-left: 2rem;
    font-size: 0.875rem;
}

button.small b, .button.small b {
	font-size:1.2rem;
	font-weight:normal;
}

/* ラベルカラー設定
----------------------------------------------------------------------------------------------------*/
.label {
  display: inline-block;
  padding: 0.33333rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  border-radius: 0;
  background: #00CC00;
  color: #fefefe; }
	
  .label.info {
    background: #38a1db;
    color: #fefefe; }

/* Callout設定
----------------------------------------------------------------------------------------------------*/
  .callout.primary {
    background-color:rgba(23,28,97,.05);
    color: #0a0a0a; }
  .callout.secondary {
    background-color: #DDFBFF;
    color: #0a0a0a; }
  .callout.alert {
    background-color: #fcd6d6;
    color: #0a0a0a; }
  .callout.success {
    background-color: #e6f7d9;
    color: #0a0a0a; }
  .callout.warning {
    background-color: #fff3d9;
    color: #0a0a0a; }


/* ヘッダー
----------------------------------------------------------------------------------------------------*/
#mainb {
	padding-top:2rem;
	padding-bottom:2rem;
}

#mainb h1,
#mainb h4,
#mainb h5 {
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-weight: bold;
}

#mainb h4 {
	color: #333;
	font-size: 1.1rem;
	margin-bottom: 2rem;
}

#mainb h5 {
	color: #FF0000;
	font-size: 1.3rem;
	margin-top:2rem;
}

@media print, screen and (max-width: 64em) {
#mainb h4 {
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

#mainb h5 {
	font-size: 0.8rem;
	margin-top:1rem;
}
	
#mainb h5 .big,
#mainb h5 .big3 {
	font-size: 1rem;
}
}

body {
	border-top: 10px solid #00CC00;
}

#head1 {
	background-color: #FFF;
	border-top: 1px solid #00CC00;
	margin-top:1px;
}

#hcontact {
	margin-top:1rem;
}

.top-bar .top-bar-left,
.top-bar .top-bar-right {
-ms-flex: 0 0 auto;
	flex: 0 0 auto;
max-width: 100%; 
}

.top-bar {
	background: #FFFFFF;
}

.top-bar-title {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  margin: 0; }


.offcanvas-full-screen {
  position: fixed;
  z-index: 250;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #009900;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  overflow-y: auto;
}

[data-whatinput='mouse'] .offcanvas-full-screen {
  outline: 0;
}

.offcanvas-full-screen.is-transition-overlap {
  z-index: 260;
}

.offcanvas-full-screen.is-transition-overlap.is-open {
  box-shadow: 0 0 10px rgba(10, 10, 10, 0.7);
}

.offcanvas-full-screen.is-open {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

.offcanvas-full-screen.is-open ~ .off-canvas-content {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

.offcanvas-full-screen.is-transition-push::after {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  box-shadow: 0 0 10px rgba(10, 10, 10, 0.7);
  content: " ";
}

.offcanvas-full-screen.is-transition-overlap.is-open ~ .off-canvas-content {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.offcanvas-full-screen-inner {
  padding: 1rem;
  text-align: center;
}

.offcanvas-full-screen-menu {
  margin: 0;
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.offcanvas-full-screen-menu > li {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

[data-whatinput='mouse'] .offcanvas-full-screen-menu > li {
  outline: 0;
}

.offcanvas-full-screen-menu > li > a {
  display: block;
	font-size: 1rem;
  padding: 1rem 0;
  line-height: 1;
}

.offcanvas-full-screen-menu input,
.offcanvas-full-screen-menu select,
.offcanvas-full-screen-menu a,
.offcanvas-full-screen-menu button {
  margin-bottom: 0;
}

.offcanvas-full-screen-menu > li {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

.offcanvas-full-screen-menu > li > a {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.offcanvas-full-screen-menu a {
  color: #FFF;
}

.offcanvas-full-screen-menu a:hover {
  color: #FFFF00;
}

.offcanvas-full-screen-close {
  color: #FFF;
  font-size: 5rem;
}

.offcanvas-full-screen-close:hover {
  color: #FFFF00;
}


/* フッター
----------------------------------------------------------------------------------------------------*/
#footer {
	background-color:#FFF;
	border-top: 1px solid #CCC;
	margin-bottom: 0;
	padding: 2rem 0 0;
}

/* コピーライト表記 */
.copyright {
	color: #FFF;
	background-color: #009900;
	margin-top:2rem;
	padding:0.5rem;
	font-size: 0.875rem ;
}

.copyright .text-right {
	padding-top:0.5rem;
}

@media screen and (max-width: 39.9375em) {
.copyright .text-right {
	text-align: center;
}
}

/* ナビゲーション */
ul#foot-comp {
	margin-left:0;
}

#foot-comp li a {
  color: #FFF;
	font-size: 0.875rem ;
}

#foot-comp li a:before {
  font-family: "Font Awesome 5 Free";
	font-weight: 900;
  color: #FFF;
  content: '\f101';
  margin-right:0.5rem;
}

#foot-comp .menu > li > a {
	color: #FFF;
    display: block;
	font-size: 0.7rem ;
    padding: 0.1rem 1rem 0.1rem 0;
    line-height: 1;
}

/* ページ先頭 */
#ptop {
	width:40px;
	height:40px;
	background:#00CC00;
	opacity:0.8;
	position:fixed;
	right:1rem;
	bottom:2rem;
	cursor:pointer;
	z-index:200;
}

#ptop:hover {
	opacity:1;
}

#ptop a {
	padding:20px 10px 5px;
	color:#fff;
	font-size:8pt;
	text-decoration:none;
	position:relative;
	top:16px;
	left:0;
	z-index:10;
}

#ptop:after {
    content: ' ';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#fff;
    position:absolute;
    top:5px;
    left:15px;
}

@media only screen and (max-width: 47.938em) {
#ptop {
	position: fixed;
	bottom: 20px;
	right: 10px;
	cursor: pointer;
	opacity: 1;
}
}


/* ページ：見出し
----------------------------------------------------------------------------------------------------*/
article header h1 {
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-size: 2rem;
	font-weight: bold;
	margin-top: 3rem;
	margin-bottom:3rem;
	text-align: center;
}

@media only screen and (max-width: 47.938em) {
article header h1 {
	font-size: 1.3rem;
	margin-top: 2rem;
	margin-bottom:0;
	text-align: left;
}

article header h1 img {
	width:45px;
}
}

article header h2 {
	background-color: #009900;
	border-radius:5px;
	color: #FFF;
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-size: 1.25rem;
	font-weight:bold;
	margin-top: 1rem;
	margin-bottom: 2rem;
	padding: 1.1rem 1rem 1.1rem 2rem;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, .3);
    position: relative ;
    z-index: 100 ;
}

article header h2::after {
         position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:25px;
     background-color:white;
}

article header h3 {
	background-color: #f9f9ec;
	border-top:1px solid #ebebd6;
	border-left:1px solid #ebebd6;
	border-right:1px solid #ebebd6;
	border-bottom:5px solid #ebebd6;
	color: #333;
	font-size: 1.125rem;
	font-weight:bold;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 0.6rem 1rem 0.5rem;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, .3);
}

article header h4 {
	font-size: 1rem;
	font-weight:bold;
	position: relative;
	padding: .15em 0 .15em .75em;
	border-left:5px solid #009900;
	border-bottom:3px solid #CCC;
	color:#333;
}

article h5 {
	font-size: 1rem;
	font-weight:bold;
	border-left:4px solid #009900;
	padding-left:0.5rem;
}

h6 {
	background-color:#FF0000;
	color:#FFF;
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-size: 1rem;
	margin-bottom:1rem;
	padding:0 0.5rem;
}

#footer h6 {
	background-color: #FFF;
}

/* ページ：テーブル
----------------------------------------------------------------------------------------------------*/
article table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	background: none;
	margin: 0 0 1rem;
	padding: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

article table thead tr th {
	background-color: #e6f7d9;
	text-align: center;
}

article table tr th {
	background-color: #F0F0F0;
	text-align: left;
}

article td {
	background-color: #FFF;
	text-align: left;
}

article table tr th, article table tr td {
	border: 1px solid #CCCCCC;
	padding: 0.5rem;
	margin: 0;
	font-size:0.9375rem;
}

/* メニュー
----------------------------------------------------------------------------------------------------*/
#nav {
	background-color: #FFF;
	border-bottom:10px solid #00CC00;
	margin-bottom:3rem;
	padding-top:1rem;
	padding-bottom:1rem;
}

#nav div.cell {
	margin-bottom:1rem;
}


#nav .badge.success {
    background: #009900;
    color: #FFFF00;
}

/* ポイント
----------------------------------------------------------------------------------------------------*/
article .callout header h3 {
	margin-top:0;
}

#point .callout {
	margin-bottom:2rem;
}

#point ul {
	margin-left:0;
}

#point li {
	border-bottom:1px dotted #CCC;
	list-style-type: none;
	font-weight: 900;
}

#point li:before {
  font-family: "Font Awesome 5 Free";
	font-size: 1.5rem;
	font-weight: 900;
  color: #009900;
  content: '\f14a';
  margin-right:0.5rem;
}

h6.safety {
	background-color: #E50012;
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-weight: bold;
	font-size:1.25rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}

@media screen and (max-width: 47.938em) {
.safety {
	font-size:1rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}
}

/* 部品
----------------------------------------------------------------------------------------------------*/
#box01 dd:before {
  font-family: "Font Awesome 5 Free";
	font-size: 0.625rem;
	font-weight: 900;
  color: #00CC00;
  content: '\f192';
  margin-right:0.5rem;
}

/* 車種一覧
----------------------------------------------------------------------------------------------------*/

.sec-carmodel p{
 font-family: "Noto Serif JP", serif;
 font-weight: 700;
 color: #FF0000;
}

#box02 ul {
	margin-left:0;
}

@media screen and (max-width: 47.938em) {
#box02 ul {
	margin-bottom:0;
}
}

#box02 li {
	list-style-type: none;
}

#box02 li:before {
  font-family: "Font Awesome 5 Free";
	font-size: 0.625rem;
	font-weight: 900;
  color: #FF0000;
  content: '\f192';
  margin-right:0.5rem;
}

/* やりとり
----------------------------------------------------------------------------------------------------*/
.kaiwa {
  margin-bottom: 25px;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 80px;
  height: 80px;
  margin-right: -90px;
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 80px;
  height: 80px;
  margin-left: -90px;
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 10px 0 0;
  font-size: 11px;
  text-align: center;
  position: relative;
  bottom: 15px;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 100px;
  padding: 20px;
  border-radius: 10px;
  background: #FFF;
  margin-right: 12%;
  float: left;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 100px;
  padding: 20px;
  border-radius: 10px;
  background-color:#FFFCE1;
  margin-left: 12%;
  float: right;
}
p.kaiwa-text {
	font-weight: bold;
	font-size: 1.125rem;
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 47.938em) {
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  padding: 10px;
  margin-right: 5%;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  padding: 10px;
  margin-left: 5%;
}
p.kaiwa-text {
	font-size: 0.875rem;
}
}

/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #FFF;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #FFFCE1;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

/* 流れ
----------------------------------------------------------------------------------------------------*/
.box-flow {
	background-color:#FFF;
	border:5px solid #DDD;
	margin-bottom:1rem;
	padding:1rem 1rem 0;
}

.box-flow h5 {
	border-left:none;
	color:#222;
	font-size:1.4rem;
	font-weight:bold;
	text-align: center;
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	margin-bottom:1.5rem;
}

.box-flow h5 span {
	padding: 0 0.2rem;
	border-bottom:5px solid #00CC00;
}

.box-flow h5 i {
	font-style:normal;
	color:#009900;
}

.box-flow .button {
	margin-bottom:0;
}

@media screen and (min-width: 48em) {
.box-flow h5 {
	position: relative;
}

.box-flow h5 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 4em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
	border-bottom:5px solid #00CC00;
}

.box-flow h5::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #ccc;
	background: -webkit-linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
	background: linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
}
}

@media screen and (max-width: 47.938em) {
.box-flow h5 {
	font-size:1.1rem;
}
}

/* よくある質問
----------------------------------------------------------------------------------------------------*/
#box05 .callout dt {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.59, #FFF), color-stop(0.00, #F6F6F6));
	background: -webkit-linear-gradient(top, #F6F6F6 0%, #FFF 59%);
	background: -moz-linear-gradient(top, #F6F6F6 0%, #FFF 59%);
	background: -o-linear-gradient(top, #F6F6F6 0%, #FFF 59%);
	background: -ms-linear-gradient(top, #F6F6F6 0%, #FFF 59%);
	background: linear-gradient(to bottom, #F6F6F6 0%, #FFF 59%);
	color: #333333;
	font-family: "Noto Serif CJK JP","Sawarabi Mincho", serif;
	font-size: 1.125rem;
	font-weight:bold;
	margin-top: 1rem;
	margin-bottom: 0;
	padding: 0.7rem 1rem 0.5rem;
	border-top:1px solid #DDD;
	border-right:1px solid #DDD;
	border-left:1px solid #DDD;
	border-bottom:5px solid #009900;
}

#box05 .callout dd {
	padding: 1rem 1rem 0;

	margin-bottom: 2rem;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #DDD;
}

#box05 .callout .button.small {
	margin-bottom:0;
}

/* お問い合わせ
----------------------------------------------------------------------------------------------------*/
.bod {
    border-bottom: 1px solid #DDD;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.bod label {
    font-weight: normal;
    font-size: 1rem;
}

label {
	margin-bottom:0.3rem;
}


/* バナー
----------------------------------------------------------------------------------------------------*/
#ban {
	padding-top:3rem;
	padding-bottom:3rem;
}

/* iframe
----------------------------------------------------------------------------------------------------*/
.hol-box {
    position:relative;
    width:100%;
    height:0;
    padding-top:15%;
	margin-bottom:2rem;
	margin-top:2rem;
}

@media screen and (max-width: 39.9375em) {
.hol-box {
    padding-top:50%;
}
}

.hol-box iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}