@charset "UTF-8";
/* CSS Document */

/*------ プリント pcサイズ ------*/
@media print {

@page {
  size: landscape;/* 横向きlandscapeまたは縦向きportrait */
  margin: 0mm;/* ページ上下の文字を消す */
}
header, nav, footer {
  display: none;
}
/* 共通要素 -----------------------------------------------------------------------------*/
* {
  position: static;
  float: none;
}
body {
  margin: 0px;
  font-style: normal;
  font-family: "M PLUS 2", sans-serif;/* 文字詰め対応していない */
		font-size: 11pt;/* 印刷解像度が異なっても同じ大きさ */
  letter-spacing: 0.02em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
body {
  font-size: 1em;/* bodyで文字サイズ指定しないと大きくならないレスポンシブル単位注意 */
  -webkit-text-size-adjust: 100%;/* iPhone Safari文字サイズ調整 */
}
/* 画像 */
img {/* 小さく */
  width: 70%;
  vertical-align: top;/* 必要　画像下の余白をなくす */
}
article {
  font-size: 0.8em;
}
.article-wrap {
  display: inline-block;
  position: relative;
		width: 100%;
  max-width: 800px;/* 文章の横幅に合わせる */
		text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.article-wrap {
  max-width: 1220px;/* 下のLINE枠に合わせる */
}
/* PDFファイル */
a[href*=".pdf"]:before {
  display: none;/* 必要 画像の縦幅が残る */
}
/* 内枠横幅 */
.flame {
  width: auto;/* ブラウザ初期設定を消して左右に空き */
  margin: 10px;/* 空き指定しない場合はブラウザ初期設定 */
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
/* 中央揃え */
.center {
  text-align: center;
  margin-top: 10px;
}
/* フレックス親要素 */
.flex {
  display: flex;/* 横並び */
}
/* ツールチップテーマ car */
/* ※ */
.asterisk {
  font-size: 0.8em;
		vertical-align: top;
}
/* カラー */
/*------ ローディング ------*/
/*------ タイトル ------*/
/*------ スライダー ------*/
/*------ インフォメーション ------*/
.infomation-bg img {/* 必要 画像が大きくなる */
  width: 30%;
		margin-bottom: 5px;
}
/* ボード全体 */
.flex {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;/* フレックス左右中央揃え */
}
/* インフォメーション日時 */
.time {
  padding: 5px;
  font-size: 1.2em;
  color: #000;
}
/* ニューボタン */
.time-new {
  display: inline-block;
		position: relative;
  padding: 5px;
  font-size: 1.2em;
  color: #000;
}
.time-new::before {
	 background: linear-gradient(90deg,#FF4F50 0%,#FF8A00 20%,#FFCA33 40%,#97CA66  60%,#00BDFF 80%,#0097FF 100%);
	 color: #fff;
	 font-weight: bold;
	 font-size: 0.8em;
	 margin-right: 7px;
	 padding: 0 4px 2px 5px;
	 border-radius: 5px;
	 content: "ニュー";
	 text-shadow: 0px 0px 1px #808080;
	 -webkit-animation:blink 1.6s ease-in-out infinite alternate;
  -moz-animation:blink 1.6s ease-in-out infinite alternate;
  animation:blink 1s ease-in-out infinite alternate;
}
/* インフォメーション本文 */
.text-info {
  padding: 5px 0 15px 5px;
  color: #000;
  font-size: 1em;
  line-height: 1.4em;
  text-align: left;
}
/* フェードイン 右から左 */
/*------ ページトップボタン ------*/
/* リンクを右下に固定 */
#page-top {
  display: none;/* 必要 四角の影が表示される */
}
/*------ フッター safari設定あり ------*/
/*ブロック 正方形 */
.komi-block {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  border-radius: 6px; 
  box-sizing: border-box;
  color: #fff;
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.4em;
  text-align: center;
  vertical-align: middle;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.komi-block {
  width: 69px;
  height: 69px;
  margin: 0 1px 10px;
}
/* ブロック 長方形 */
.ok-block {
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.5em;
  text-decoration: none;
  vertical-align: middle;
}
/* 列設定 ok */
.ok-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;/* 画像が縦長になるのを防ぐ */
}
/* 行設定 コミコミkomi */
.text-komi-1line-big {
  font-size: 56px;
		line-height: 1.32em;
}
.text-ok-1line-small {
  padding-top: 25px;
  font-size: 17px;
}
.text-ok-2line {
  padding-top: 14px;
  font-size: 17px;
}
/* 行設定 ok枠 */
.text-under-1line-short {
  padding: 4px 18px 7px;  
  font-size: 2.18em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-under-1line-short {
  margin: 2px;
  padding: 3px 19px 7px;
  font-size: 2.17em;/* ここ調整済み */
}
.text-under-1line-long {
  padding: 10px 14px 11px 15px;
  color: #000;
  font-size: 1.33em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-under-1line-long {
  margin: 12px 0;
  padding: 8px 11px 9px;/* ここ調整済み */
}
.text-right-2line-big {
  display: flex;
  flex-direction: column;
  font-size: 2.26em;
  line-height: 1em;
  margin-left: 10px;
  padding: 6px 21px 0px;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-right-2line-big {
  font-size: 2.27em;
}
/* フッターキャプション */
.caption-oldcar {
  font-weight: 400;
  font-size: 0.4em;
  line-height: 0.9em;
}
.caption-oldcar a:hover {
  color: #fff;
}
.caption-oldcar a:visited {
  color: #fff;
}
.caption-privacy {
  display: inline-block;/* 親要素に中央揃え */ 
  color: #000;
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.4em;
  text-align: left;
}
/* お問い合せ先 */
.footer-wraper {
  display: inline-block;  
  position: relative;
  z-index: 3;
  width: 100%;
}
.company-logo {
  display: inline-block;  
  position: relative;
  float: center;
  margin: 0 50px 0 0;
}
/* コピーライト */
#copy {
  margin: 10px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

/*------ 各ページ共通項目 ------*/
/* 小見出し 左 */
.title-sub-left {
  position: relative;
  z-index: 3;
  margin: 20px 8% 0;/* キャプションと左右幅合わせる */
  font-weight: bold;
  font-size: 1.3em;
  margin-top: 30px;
  text-align: left;
}
/* 大見出し */
.title-main {
  position: relative;
  z-index: 3;
  font-weight: bold;
  font-size: 3.8em;
  line-height: 1.4em;
  text-align: center;
}
.text-main-center {
  display: block;
  position: relative;
  z-index: 3;
  margin: 1% 11% 0% 11%;
  font-weight: 300;
  font-size: 1.4em;
  text-align: center;
}

/*------ ここから特長のページ ------*/
/* 背景透過 */
.feature-bg {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(images/feature-bg.png);
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;  
  background-color: #FFFFCC;
  text-align: center;
}
.feature-bg::after {
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
  content: "";/* 疑似要素のために必要 */
}
/* 特長ボタン */
.feature-btn {
  display: inline-block;
  position: relative;
  z-index: 3;
  width: 32%;
  margin: 30px 25px;
  padding: 15px 40px;
  overflow: hidden;
  border: 3px solid #FF4F50;
  border-radius: 10px;
  background: #fff;
  color: #FF4F50 !important;
  font-weight: bold;
  font-size: 1.4em;
  text-decoration: none;
  text-align: center;
  outline: none;
  transition-duration: 0.4s;
}
.feature-btn::after {
  display: block;
  opacity: 0;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  width: 100%;
  height: 0;
  margin: auto;
  padding-top: 100%;
  background: #FF4F50;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transition: opacity 0.5s, transform 0s;
  transition-delay: 0s, 0.4s;
}
.feature-btn:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.feature-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition: opacity 0.8s, transform 0.6s ease-in-out;
  transition-delay: 0s;
}
.feature-title {
  position: relative;
  z-index: 3;
  margin: 20px 4% 0;
  font-weight: bold;
  font-size: 2.1em;
  text-align: center;
}
/* 特長アニメーション */
.video-wraper-feature {
  display: none;  
}
.video-wraper-feature video {
  display: none;
}
/* リース費用テーブル */
.feature-tbl-wrap {
  display: inline-block;
		position: relative;
  margin: 20px 0;
		z-index: 3;
}
.feature-tbl {
  width: 100%;
  color: #000;
  font-size: 1em;
  text-align: left;
}
.feature-tbl th {
  padding: 4px;
  background: #FFFAFA;
  font-weight: 400;/* ボールド消す */
  font-size: 1.1em;
}
.feature-tbl td {
  padding: 4px;
  background: #FFFAFA;
  font-size: 1.1em;
}
/* リース費用テーブル 角丸 */
.table-red {
  overflow: hidden;
  border: 2px solid #FF4F50;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  text-align: center;
}
.table-red th,
.table-red td {
  border-bottom: 2px solid #FF4F50;/* 一括指定せずborder-bottomのみ */
}
.table-red th {
  color: #000;
}
.table-red td {
  border-left: 2px solid #FF4F50;
}
.table-red tr:last-child th,
.table-red tr:last-child td {
  border-bottom: none;
}
/* リース費用のグラフ */
/* 全体を囲むブロック */
.lease-and-loan-wrap {
  display: flex;
		flex-wrap: nowrap;
  justify-content: center;
}
/* グラフを囲むブロック */
.image-lease-graph {  
  padding: 20px;
  border-radius: 10px;
  background-color: #FFFFCC;
}
/* リースとローンの図を囲むブロック */
.image-lease-and-loan-wrap {
  display: none;
}
.image-car-fade {
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-car {
  position: absolute;
  z-index: 3;
}
.fadeOut2 {
  opacity: 1;
  z-index: 4;
  animation-name: fadeOut2Anime;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeOut2Anime {
from {
  opacity: 1;
}
to {
  opacity: 0;
}
}
/* 棒グラフ 青色 購入 */
.bar-1 {
		bottom: 0;
		left: 5%;
  background: #0280bd;
  height: 40%;
}
.bar-2 {
  background: #0280bd;
		bottom: 0;
		left: 24%;
  height: 60%;
}
.bar-3 {
  background: #0280bd;
		bottom: 0;
		right: 0;
		left: 0;
  height: 90%;
}
.bar-4 {
  background: #0280bd;
		bottom: 0;
		right: 24%;
  height: 80%;
}
.bar-5 {
  background: #0280bd;
		bottom: 0;
		right: 5%;
  height: 70%;
}
/* 棒グラフ 赤色 リース */
.bar-1-lease {
		bottom: 0;
		left: 5%;
  background: #FF4F50;
  height: 40%;
}
.bar-2-lease {
  background: #FF4F50;
		bottom: 0;
		left: 24%;
  height: 40%;
}
.bar-3-lease {
  background: #FF4F50;
		bottom: 0;
		right: 0;
		left: 0;
  height: 40%;
}
.bar-4-lease {
  background: #FF4F50;
		bottom: 0;
		right: 24%;
  height: 40%;
}
.bar-5-lease {
  background: #FF4F50;
		bottom: 0;
		right: 5%;
  height: 40%;
}
/* 棒グラフアニメーション 共通 */
@keyframes graphAnime {
  0% {transform: translateY(100%);}
  100% {transform: translateY(0);}
}
@keyframes arrowAnim {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}
/* 3つの選択パネル */
.feature-panel-wrap {
  display: flex;
		position: relative;/* 必要 Z-index */
		justify-content: center;
  z-index: 3;
  margin: 20px 0;
  filter: drop-shadow(2px 2px 3px #C0C0C0);
}
.feature-panel {
  flex-grow: 1;
  opacity: 0;/* スタート時は要素自体を透過0 */
  list-style: none;
  width: 30%;
  margin: 15px;
  padding: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fff;
  color: #fff;
  filter: drop-shadow(2px 2px 3px #C0C0C0);
}
/* 見出し背景色 */
.sentaku {
  padding: 3px;
  border-radius: 5px;
  background-color: #FF4F50;
  font-weight: 600;
  font-size: 1.8em;
}

/*------ ここから特選車＆即納車のページ ------*/
/* 背景透過 */
.selection-bg {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(images/selection-bg.png);
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;  
  background-color: #99FFFF;
  text-align: center;
}
.selection-bg::after {
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
  content: "";/* 疑似要素のために必要 */
}
/* 特選車＆即納車キャンペーン */
.campaign-bg {
  position: relative;/* z-indexとセット */
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 98%;
  margin: 10px auto 0;
}
/* キャンペーンボタン */
.campaign-btn {
  display: inline-block;
  position: relative;
  z-index: 3;/* ないと白円はみ出る */
  max-width: 300px;
  margin-bottom: 10px;
  padding: 15px 20px;
  overflow: hidden;
  border: 3px solid #FF6666;
  border-radius: 10px;  
  background: #fff;
  color: #FF6666 !important;
  font-weight: bold;
  font-size: 1.4em;
  text-decoration: none;
  outline: none;
  transition-duration: 0.4s;
}
.campaign-btn::after {
  display: block;
  opacity: 0;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  width: 100%;
  height: 0;
  margin: auto;
  padding-top: 100%;
  border-radius: 50%;  
  background: #FF6666;
  content: "";
  pointer-events: none;
  transition: opacity 0.5s, transform 0s;
  transition-delay: 0s, 0.4s;
}
.campaign-btn:hover {
  color: #fff !important;
  text-decoration: none !important; 
}
.campaign-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition: opacity 0.8s, transform 0.6s ease-in-out;
  transition-delay: 0s;
}
/* キャンペーンキャプション */
.caption-campaigne {
  display: inline-block;
  position: relative;
  z-index: 3;
  margin-bottom: 15px;
  font-size: 0.9em;
  text-align: center;
}

/*------ ギャラリー ------*/
.sort-wrapper {
  width: 100%;
}
/* 並び替えボタン */
.sort-btn-wrapper {
  display: none;
}
.sort-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sort-btn li {
  list-style: none;
  z-index: 3;
  margin:3px;
  padding: 5px 10px 7px;
  border-radius: 10px;
  background-color: #fff;
  color: #000000;
  font-size: 1.2em;
  cursor: pointer;
}
.sort-btn li.active {/* ボタンに現在地＝activeというクラス名がついたら背景色を変更 */
  color: #fff;
  background: #FF8C00;  
}
.sort-btn-return {
  display: inline-block;/* 親要素に中央揃え */
  position: relative;
  z-index: 3;
  list-style: none;
  margin:3px;
  padding: 5px 10px 7px;
  border-radius: 10px;
  background-color: #fff;
  color: #000 !important;/* リンクの初期設定色変えるために必要 */
  font-size: 1.2em;
  cursor: pointer;
}
.sort-btn-return:hover {
  background-color: #FF8C00;
  color: #fff !important;/* リンクの黒色変えるために必要 */
  text-decoration: none !important; 
}
/* Muuriキャラリー */
.grid {
  position: relative;/* 並び替えの基準点を指定 */
  z-index: 3;
  margin: 10px 0;
}
/* 各画像の横幅など */
.item {
  display: block;
  position: absolute;
  width: 33%;/* 横並びで3つ表示 */
}
/* 内側のボックスの高さが崩れないように維持 */
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 今月のイチオシボード */
.car-button-special {
  display: inline-block;
  position: relative;/* 基点がないとはみ出る */
  margin-bottom: 5px;
  padding: 0 15px 3px;
  border-radius: 10px;
  background-color: #FF8C00;
  overflow: hidden;
}
.car-button-special::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shine 3.5s ease-in infinite normal;
}
@keyframes shine {
  0% {transform: scale(0) rotate(30deg); opacity: 0;}
  80% {transform: scale(0) rotate(30deg); opacity: 0.5;}
  81% {transform: scale(4) rotate(30deg); opacity: 1;}
  100% {transform: scale(50) rotate(30deg); opacity: 0;}
}
.car-button-text-new-special {
  color: #fff;
  font-weight: 400;
  font-size: 3.2em;
}
.maker-name-special {
  color: #000;
  font-weight: bold;
  font-size: 1.2em;
  vertical-align: center;
}
/* 特別装備 */
.text-equipment-special {
  position: relative;
  margin: 5px 0;
		color: #FF4F50;
  font-weight: bold;
  font-size: 0.9em;
}
/* 数量限定パネル */
.car-button-special-limited {
  padding: 0 15px 2px;
  border-radius: 10px;
  background: #FF4F50;
		color: #fff;
  font-weight: bold;
		font-size: 2.2em;
}
/* 文字 月々黒色 */
.vertical-special {
  font-weight: 900;
  font-size: 1.1em;
  text-align: center;/* 縦書き中央揃えright下へ */
  writing-mode: vertical-rl;/* 縦書き */
}
/* 文字 料金黒色 */
.payment-special {
  text-align: center;
  font-weight: 700;
  font-size: 2.6em;
  font-optical-sizing: auto;
  font-family: "Noto Sans JP", sans-serif;
}
.payment-special span {
  font-size: 0.5em;   
}
.caption-month-special {
  display: inline-block;/* 親要素に中央揃え */
  position: relative;
  z-index: 3;
  width: 87%;
  border-radius: 5px;
  background: #FF4F50;
  color: #fff;
  font-size: 0.9em;
  font-weight: 400;
  text-align: center;
}
.car-button-text-new {
  color: #fff;
  font-weight: 600;
  font-size: 1.55em;
}
.maker-name {
  margin: 0 0 0 10px;
  color: #000;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 2.4em;
  vertical-align: center;
}
.car-name {
  color: #000;
  font-weight: 600;
  font-size: 1.5em;
}
.car-name-grade {
  margin: 0 0 7px 0;
  font-weight: 600;
  font-size: 0.6em;
  line-height: 14px;
}
.lease-car-photo {
  width: 100%;/* 画像左右280天地180px */
}
/* リース表テーブル */
.selection-tbl {
  display: inline-block;
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 0 0 5px;
  color: #FF8C00;/* サファリでボーダー黒になるため */
  font-size: 0.9em;
  text-align: left;
}
.selection-tbl th {
  width: 50%;
  padding: 7px;
  background: #FFEFD5;
  font-weight: 400;/* ボールド消す */
  font-size: 1.1em;
  text-align: left;
}
.selection-tbl td {
  width: 45%;  
  padding: 7px;
  background: #FFFAF0;
  color: #000;/* サファリで文字色をオレンジから黒に */
  font-size: 1.1em;
  text-align: right;
}
/* リース表テーブル 角丸 */
.table-orenge {
  width: 97%;
  overflow: hidden;
  border: 1px solid #FF8C00;
  border-radius: 10px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
}
.table-orenge th,
.table-orenge td {
  border-bottom: 1px solid #FF8C00;/* 一括指定せずborder-bottomのみ */
}
.table-orenge th {
  color: #000;
}
.table-orenge td {
  border-left: 1px solid #FF8C00;
}
.table-orenge tr:last-child th,
.table-orenge tr:last-child td {
  border-bottom: none;
}
/* お支払い例と方法 */
.text-payment-example {
  position: relative;
		margin-bottom: 3px;
  padding: 0.1em;
  color: #000;/* サファリで文字色をオレンジから黒に */
  font-size: 0.9em;
}
/* ボディカラー */
.car-color {
  margin-top: 5px;
  color: #000;
  font-weight: 700;
  font-size: 1em;
		text-align: center;
}
/* 文字 月々 */
.vertical {
  color: #FF4F50;
  font-weight: 900;
  font-size: 1.2em;
  text-align: center;/* 縦書き中央揃えright下になる */
  writing-mode: vertical-rl;/* 縦書き */
}
/* 文字 料金 */
.payment {
  color: #FF4F50;
  text-align: center;
  font-weight: 700;
  font-size: 3.2em;
  font-optical-sizing: auto;
  font-family: "Noto Sans JP", sans-serif;
		line-height: 1em;/* 高さ上げる */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.payment {
  font-size: 3.1em;
}
.payment span {
  font-size: 0.5em;   
}
.caption-lease {
  display: inline-block;/* 親要素に中央揃え */
  position: relative;
  z-index: 3;
  width: 96%;
		margin-top: 5px;
  color: #000;
  font-weight: 400;
  font-size: 0.9em;
  text-align: left;
}
.caption-lease-red {/* マツダ愛媛県限定納車 */
  color: #FF4F50;
  font-weight: bold;
}
.caption-month {
  display: inline-block;/* 親要素に中央揃え */
  position: relative;
  z-index: 3;
  width: 97%;
  border-radius: 5px;
  background: #FFEFD5;
  color: #000;
  font-size: 0.9em;
  font-weight: 400;
  text-align: center;
}

/*------ ここからQ&Aのページ ------*/
/* 背景透過 */
.answer-bg {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(images/answer-bg.png);
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;  
  background-color: #FFFFCC;
  text-align: center;
}
.answer-bg::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: white;
  content: "";/* 疑似要素のために必要 */
  opacity: 0.8;
}
/* タブ */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
  margin: 2% 5%;
  padding: 0 0 20px;
  overflow: hidden;  
}
/* 左からボタン1 アクティブなタブより前 */
.tab-label {
  flex: 1;
  order: -1;
  position: relative;
  margin: 10px;
  padding: 15px 0;
  border: 3px solid #99CC66;
  border-radius: 10px;
  background-color: #fff;
  color: #99CC66;
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  transition: cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  cursor: pointer;
  user-select: none;
}
.tab-label:hover {
  background: #99CC66;
  color: #fff;  
}
/* すべて開くボタン */
.tab-label-all-open {
  position: relative;
  margin: 10px 22% 0;
  padding: 0 0 2px;
  border-radius: 7px;
  color: #99CC66;
  background-color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  transition: cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  cursor: pointer;
  user-select: none;
}
.tab-label-all-open:hover {
  background: #99CC66;
  color: #fff;
}
/* 左からボタン3 アクティブなタブ */
.tab-switch:checked + .tab-label {
  background: #99CC66;
  color: #fff;    
}
.tab-label::after {
  display: block;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateX(100%);
  width: 100%;
  background: #fff;
  color: #000;  
  content: '';
  pointer-events: none;
  transition: cubic-bezier(0.4, 0, 0.2, 1) 0.2s 80ms;
}
/* 左からボタン2 アクティブなタブより後アクティブなタブ含む */
.tab-switch:checked ~ .tab-label::after {
  transform: translateX(-100%);
}
.tab-switch:checked + .tab-label::after {
  opacity: 1;
  transform: translateX(0);
}
/* コンテンツ1 アクティブなタブより前 */
.tab-content {
  opacity: 0;
  transform: translateX(-30%);
  width: 100%;
  height: 0;
  padding: 0 20px;
  pointer-events: none;
  transition: transform 0.3s 80ms, opacity 0.3s 80ms;
}
/* コンテンツ2 アクティブなタブより後アクティブなタブ含む */
.tab-switch:checked ~ .tab-content {
  transform: translateX(30%);
}
/* コンテンツ3 アクティブなタブ */
.tab-switch:checked + .tab-label + .tab-content {
  order: 1;
  opacity: 1;
  transform: translateX(0);
  height: auto;
  pointer-events:auto;
}
.tab-wrap::after {
  order: -1;
  width: 100%;
  height: 25px;
  content: '';
}
.tab-switch {
  display: none;
}
/* アコーディオン全体 */
.accordion_container {
		display: inline-block;  
  position: relative;
		z-index: 3;
		width: 100%;
}
.accordion_title {
  position: relative;
  z-index: +1;
  margin: 10px 0;
  padding: 15px 30px;
  border: 3px solid #99CC66;
  border-radius: 10px;
  background-color: #fff;
  color: #99CC66;
  font-weight: bold;
  font-size: 1.4em;
  text-align: left;
  cursor: pointer;
  transition-duration: 0.2s;
}
.accordion_title:hover,.open  {
  border: 3px solid #99CC66;
  background: #99CC66;
  color: #fff;  
}
.icon_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  box-sizing: border-box;
  transition-duration: 0.2s;
}
.icon {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.accordion_title.open 
.icon_wrap {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.icon:before, .icon:after {
  display: flex;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
  width: 18px;
  height: 4px;
  border-radius: 10px;
  background-color: #fff;
  content: '';
}
.icon:before {
  top: 0;
  left: 7px;
  width: 4px;
  height: 18px;
}
.accordion_title.open 
.icon_wrap .icon:before {
  content: none;
}
.accordion_title.open 
.icon_wrap .icon:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.accordion_inner {
  display: none;
  width: 100%;
  padding: 15px 0 25px;
  box-sizing: border-box; /* paddingとborderを含める */
}
.ac_inner_wraper {
  height: 100%;
}
/* すべて開くボタン タブなし */
.accordion-all-open {
		display: inline-block;  
  position: relative;
		z-index: 3;
  margin: 10px 22%;
  padding: 5px 10px;
		border: 3px solid #99CC66;
  border-radius: 7px;
  color: #99CC66;
  background-color: #fff;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  transition: cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  cursor: pointer;
  user-select: none;
}
.accordion-all-open:hover {
  background: #99CC66;
  color: #fff;
}
/* Q&Aリース表テーブル お支払い例 */
.answer-tbl {
  position: relative;/* z-indexで必要 */
		z-index: 3;
  width: 100%;
  color: #000;
  font-size: 1.05em;
}
.answer-tbl th {
  position: relative;
  padding: 7px;
  background: #F0FFF0;
  color: #000;
  font-weight: 400;/* ボールド消す */
  text-align: center;
}
.answer-tbl td {
  padding: 7px;
  background: #F5FFFA;
  font-size: 1.05em;
  text-align: right;
}
.text-answer-tbl {
  display: inline-block; 
  width: 85%;
  margin: 15px 0;
  color: #000;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-answer-tbl {
  width: 900px;
}
/* Q&Aリース表テーブル 角丸 */
/* 料金表 */
.table-green {
  display: inline-block;/* 親要素に中央揃え */
		width: 90%;
  overflow: hidden;
  border: 2px solid #99CC66;
  border-radius: 10px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
}
.table-green th,
.table-green td {
  border-bottom: 2px solid #99CC66; /* 一括指定せずborder-bottomのみ */
}
.table-green th {
  width: 10%;
  color: #000;
}
.table-green td {
  width: 10%;
  border-left: 2px solid #99CC66;
}
.table-green tr:last-child th,
.table-green tr:last-child td {
  border-bottom: none;
}
/* プラン表 */
.table-green-plan {
  display: inline-block;/* 親要素に中央揃え */
		width: 88%;
		margin: 15px 0;
  overflow: hidden;
  border: 2px solid #99CC66;
  border-radius: 10px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
}
.table-green-plan th,
.table-green-plan td {
  border-bottom: 2px solid #99CC66;/* 一括指定せずborder-bottomのみ */
}
.table-green-plan th {
  width: 15%;
  color: #000;
		text-align: center;
}
.table-green-plan td {
  width: 15%;
		text-align: center;
  border-left: 2px solid #99CC66;
}
.table-green-plan tr:last-child th,
.table-green-plan tr:last-child td {
  border-bottom: none;
}
.table-green-plan tr:nth-child(1) td {
  background: #F0FFF0;/* 1行目だけ背景色を変える */
}
/* 点検表 */
.table-green-inspection {
  display: inline-block;/* 親要素に中央揃え */
		width: 90%;
		margin: 15px 0;
  overflow: hidden;
  border: 2px solid #99CC66;
  border-radius: 10px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
}
.table-green-inspection th,
.table-green-inspection td {
  border-bottom: 2px solid #99CC66;/* 一括指定せずborder-bottomのみ */
}
.table-green-inspection th {
  width: 35%;
  color: #000;
		text-align: center;
}
.table-green-inspection td {
  width: 15%;
		text-align: center;
  border-left: 2px solid #99CC66;
}
.table-green-inspection tr:last-child th,
.table-green-inspection tr:last-child td {
  border-bottom: none;
}
.table-green-inspection tr:nth-child(1) td {
  background: #F0FFF0;/* 1行目だけ背景色を変える */
}

/*------ ここからお客さまの声のページ ------*/
.voice-bg {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1; 
  background-color: #AFEEEE;
  text-align: center;
}
/* 背景動画 4月桜 */
#particles-js {
  position: absolute;/* 描画固定 */
  z-index:-1;/* 描画を一番下に */
  width: 94.5%;/* 右マージン入れてもはみ出る */
  background-color:#AFEEEE;/* 背景色 */
}
.particles-wrapper-top {/* IDにするとパーティクル重なる */
  position: relative;/* 描画を#particles-jsよりも上にする */
  z-index: 2;/* 数字を大きくすることで描画を#particles-jsよりも上に */
  width: auto;/* ブラウザ初期設定を消して左右に空き */
  max-width: 1400px;
	 margin: 10px ;/* 空き指定しない場合はブラウザ初期設定 */
  padding: 20px;
  border-radius: 10px;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='80' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M0 10h20z'   stroke-width='0.5' stroke='%23ff8c00ff' fill='none'/><path d='M0 30h20z'   stroke-width='0.5' stroke='%23ff4f50ff' fill='none'/><path d='M0 50h20z'   stroke-width='0.5' stroke='%2300bfffff' fill='none'/><path d='M0 70h20z'   stroke-width='0.5' stroke='%2399cc66ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")/* PATTERN MONSTER 直線 */
}
.particles-wrapper {/* IDにするとパーティクル重なる 背景設定中 ------------*/
  position: relative;/* 描画を#particles-jsよりも上にする */
  z-index: 1;/* 数字を大きくすることで描画を#particles-jsよりも上に */
  max-width: 1400px;
  /* margin: 10px; 空き指定しない場合はブラウザ初期設定 */
  /* padding: 20px; 他のページと上の空きが変わる */
  border-radius: 10px;
  background: #AFEEEE;
}
.particles-wrapper-spring {/* IDにするとパーティクル重なる */
  position: relative;/* 描画を#particles-jsよりも上にする */
  z-index: 2;/* 数字を大きくすることで描画を#particles-jsよりも上に */
  width: auto;/* ブラウザ初期設定を消して左右に空き */
  max-width: 1400px;
	 margin: 10px ;/* 空き指定しない場合はブラウザ初期設定 */
  padding: 20px;
  border-radius: 10px;
  background-image: radial-gradient(#00BFFF 2px, transparent 2px), radial-gradient(#00BFFF 2px, #ffffff 2px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;/* サイズの半分で等間隔 */
}
.particles-wrapper-summer {/* IDにするとパーティクル重なる 花火設定中 ------------*/
  position: relative;/* 描画を#particles-jsよりも上にする */
  z-index: 1;/* 数字を大きくすることで描画を#particles-jsよりも上に */
  width: auto;/* ブラウザ初期設定を消して左右に空き */
  max-width: 1400px;
  margin: 10px ;/* 空き指定しない場合はブラウザ初期設定 */
  padding: 20px;
  border-radius: 10px;
  background-image: radial-gradient(#0099FF 2px, transparent 2px), radial-gradient(#0099FF 2px, #ffffff 2px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;/* サイズの半分で等間隔 */
}
/* 背景動画 11月紅葉 */
#effectimg {
  position: fixed;/* 描画固定 absolute画像縦長になる */
		top: 0;
  z-index:-2;/* 描画を一番下に */
  width: 96.5%;/* 右マージン入れてもはみ出る */
  height: 100%;/* 下もはみ出る */
  overflow: hidden;
}
.particles-wrapper-autumn {/* IDにするとパーティクル重なる 背景設定中 ------------*/
  position: relative;/* 描画を#particles-jsよりも上にする */
  z-index: -1;/* 数字を大きくすることで描画を#particles-jsよりも上に */
  width: auto;/* ブラウザ初期設定を消して左右に空き */
  max-width: 1400px;
  margin: 10px;/* 空き指定しない場合はブラウザ初期設定 */
  padding: 20px;
  border-radius: 10px;
  background-image: radial-gradient(#ffc107 2px, transparent 2px), radial-gradient(#ffc107 2px, #ffffff 2px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;/* サイズの半分で等間隔 */
}
/* まいかちゃん */
.maika-chan-wrapper {
  display: inline-block;
  z-index: 1;
  width: 100%;
}
.image-maika-chan {
  position: relative;
  width: 100%;
  margin: 80px 0 0 80px;/* レスポンシブ縮小されても上空かない */
}
.text-maika-chan-greeting {
  font-size: 2.2em;
  line-height: 0px;
}
/* 会話 */
/* 左右共通 */
.balloon-wrap {
  display: inline-block;
		width: 95%;
}
.balloon {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;/* 外枠を文章量に合わせる */
  margin: 10px 0;
  text-align: left;
}
.balloon-text {
  flex-grow: 1;
  position: relative;
  width: 90%;
  padding: 15px 30px;
  border-radius: 20px;
  color: #000;
  font-size: 1.4em;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.balloon-text {
  width: 50%;/* 必要 画像が小さくなる */
}
.balloon-text::before {
  display: block;
  position: absolute;
  top: 70px;
  width: 0;
  height: 0;
  border-top: solid 10px transparent;
  border-bottom: solid 10px transparent;
  content: '';
}
/* タイトルありのページ */
.balloon-text::after {
  display: block;
  position: absolute;
  top: 70px;
  width: 0;
  height: 0;
  border-top: solid 10px transparent;
  border-bottom: solid 10px transparent;
  content: '';
}
/* アイコン右 */
.balloon-right {
  flex-direction: row-reverse;
  margin-top: 5px;
}
.balloon-right-image {
  width: 180px;
  padding: 15px;
}
.balloon-right .balloon-text {
  background: #FFFAFA;
}
/* アイコン右 マイッカ */
.balloon-right-maikka {
  flex-direction: row-reverse;
  margin-top: 5px;
}
.balloon-right-image-maikka {
  z-index: 2;
  width: 180px;
  padding: 35px 15px 0 30px;
}
.balloon-right-maikka .balloon-text {
  background: #FFFFF0;
}
/* 吹き出し丸 左大 */
.balloon-right-maikka .balloon-text::after {
  position: absolute;
  right: -5px;/* 正数左 */
  bottom: 10px;/* 下からの高さ */
  width: 30px;/* 丸の横長さ */
  height: 10px;/* 丸の縦長さ */
  border-radius: 50%;
  background: #FFFFF0;
  content: "";/* 疑似要素に必要 */
}
/* 吹き出し丸 右小 */
.balloon-right-maikka .balloon-text::before {
  position: absolute;
  right: -28px;/* 正数左 */
  top: 80px;/* 上からの高さレスポンシブ */
  width: 20px;/* 丸の大きさ */
  height: 0px;/* 丸の大きさ */
  border-radius: 50%;
  background: #FFFFF0;
  content: "";/* 疑似要素に必要 */
}
/* アイコン左 */
.balloon-left {
  margin-right: 20px;
}
/* アイコン左 */
.balloon-left-image {
  width: 180px;
  padding: 15px;
}
.balloon-left .balloon-text {
  background: #fff;
}
/* セリフ1文字づつ出てくる */
.eachTextAnime span{
  opacity: 0;
}
.eachTextAnime.appeartext span{
  animation:text_anime_on 0.4s ease-out forwards;
}
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*------ 無料お見積のご相談ありがとうページ フォームはmailformに記述 ------*/
.thank-you-title {
  position: relative;
  margin: 30px 4% 0;
  color: #003366;
  font-weight: bold;
  font-size: 2.1em;
  text-align: center;
}
.customers-img {
  position: relative;
  margin: 20px 0;
}

/*------ インフォメーション追加リンクページ ------*/
/* チラシ画像を囲むブロック */
.image-wrap {
  width: 100%;
  margin-right: 15px;
}
/* 文字グラデーション */
.text-gradation {
  background: linear-gradient(90deg,#FF4F50 0%,#FF8A00 20%,#FFCA33 40%,#97CA66  60%,#00BDFF 80%,#0097FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* ボード背景色 */
.panel {/* pc */
  display: flex;
  opacity: 0;/* スタート時は要素自体を透過0 */
  list-style: none;
  width: 30%;/* 3列表示 */
  margin: 10px 1%;
  padding: 2px;
  border-radius: 16px;
		box-sizing:border-box;
		background: linear-gradient(90deg,#FF4F50 0%,#FF8A00 20%,#FFCA33 40%,#97CA66  60%,#00BDFF 80%,#0097FF 100%);	
  filter: drop-shadow(2px 2px 3px #C0C0C0);
		page-break-inside: avoid;/* 必要 枠が途中で切れる */
}
.panel:hover {/* pc */
		background: #fff;
}
.panel-back {/* pc */
  display: flex;/* 必要 内側の白背景を外枠まで広げる */
}
.panel-inner {/* pc */
		padding: 12px;/* ボーダー2px */
  border-radius: 14px;
		background: #fff;/* 角丸グラデーション背景に白地重ねる */
}
.panel-inner:hover {/* pc */
	 opacity:0.3;
	 transition:0.5s;
	 transform:scale(0.95);
}
/* コミコミ枠 */
.flame-under {/* pc */
  padding: 3px 0 20px;/* トップ空き狭い */
  border-radius: 10px;
  background: #fff;
}
.text-dial {/* pc */
  display: inline-block;
		margin-top: 10px;/* 必要 2行になったとき上の空き */
  color: #000;
  font-size: 0.9em;
  vertical-align: top;
}
/* フッターフリーダイヤル画像 */
.free-dial::before {/* pc */
  content: '';
  display: inline-block;
  width: 80px;
  height: 45px;
  background-image: url(images/free-dial-logo.png);/* 疑似要素の画像サイズ変えるため */
  background-size: contain;
  vertical-align: middle;
}
.free-dial {/* pc */
  display: inline-block;
  color: #000;
  font-weight: 500;
  font-size: 2.6em;
  line-height: 1.1em;
}
/* ページタイトル画像 */
.title-logo-wraper {/* pc */
  display: inline-block;  
  position: relative;
  z-index: 3;
  margin: 20px 0;
}
/* 一番上の小見出し 中央 */
.title-sub {/* pc */
  position: relative;
  z-index: 3;
  font-weight: bold;
  font-size: 1.3em;
  margin-top: 30px;
}
/* 本文横幅 */
.text-main-left {/* pc */
  display: block;
  position: relative;
  z-index: 3;
  margin: 10px 0 0;/* キャプションと左右幅合わせる */
  color: #000;
  font-weight: 300;
  font-size: 1.4em;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */  
.text-main-left {/* pc */
  margin: 10px 0 10px !important;/* 必要 */
}
/* 本文横幅 お客さまの声 */
.text-main-left-voice {/* pc */
  display: block;
  position: relative;
  z-index: 3;
		max-width: 1200px;/* 下のLINE枠に合わせる */
  margin: 25px 0 0;/* キャプションと左右幅合わせる */
  color: #000;
  font-weight: 300;
  font-size: 1.4em;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */  
.text-main-left-voice {/* pc */
  margin: 25px 8% 0!important;/* 必要 */
}
.text-main-left-answer {/* pc */
  display: block;
  position: relative;
  z-index: 3;
  margin: 20px 5% 10px ;/* キャプションと左右幅合わせる */
  color: #000;
  font-weight: 300;
  font-size: 1.4em;
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */  
.text-main-left-answer {/* pc */
  margin: 20px 8% 10px!important;/* 必要 */
}
.feature-title {/* pc */
  position: relative;
  z-index: 3;
  margin: 20px 4% 0;
  font-weight: bold;
  font-size: 2.1em;
  text-align: center;
}
.caption-answer {/* pc */
  display: inline-block;/* 親要素に中央揃え設定する */
  position: relative;
  z-index: 3;
		width: 100%;
		margin-left: 1em;
  color: #000;
  font-weight: 400;
  font-size: 1em;
  text-align: left;
		text-indent: -1em;
}
/* 残価設定の表 */
.chart-photo {/* pc */
  position: relative;/* 必要 z-index */
		z-index: 3;
  max-width: 100%;
		margin-top: 10px;
}
/* プラン表 赤枠 */
.table-red-plan {/* pc */
  position: relative;
  z-index: 3;
  width: 100%;
		margin: 15px 0;
  overflow: hidden;
  border: 2px solid #FF4F50;
  border-radius: 10px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
}
.table-red-plan th,
.table-red-plan td {/* pc */
  border-bottom: 2px solid #FF4F50;/* 一括指定せずborder-bottomのみ */
}
.table-red-plan th {/* pc */
  width: 15%;
  color: #000;
		text-align: center;
}
.table-red-plan td {/* pc */
  width: 15%;/* 左列の幅 */
		text-align: center;
  border-left: 2px solid #FF4F50;
}
.table-red-plan tr:last-child th,
.table-red-plan tr:last-child td {/* pc */
  border-bottom: none;
}
.table-red-plan tr:nth-child(1) td {/* pc */
  background: #FFE4E1;/* 1行目だけ背景色を変える */
}
.table-red-plan img {/* pc */
  width: 30%;
}
/* 文字 表の上 */
.text-feature-tbl {/* pc */
  position: relative;
  z-index: 3;
  text-align: left;
		margin: 0 0 5px;
  font-size: 1.1em;
}
/* 文字 図の上 */
.text-feature-image {/* pc */
  display: inline-block;
  position: relative;
  z-index: 3;
  color: #000;
  font-size: 1.1em;
  text-align: center;
		vertical-align: top;/* サファリで必要 */
}
/* メンテ費用のグラフ 特長 */
.bar-graph-wrap {/* pc */
  display: none;
}
/* index スライド画像 */
.sp{/* pc */
  display: none;
}
/* index スライド画像切替 */
.pc {/* sp */
  display: none;/* 必要 スライダーが白画像で表示される */
}
/* 特選アンド即納車 パネルサイズ */
.flame-in-big {/* pc */
  display: inline-block;
  position: relative;
  width: 360px;
  z-index: 3;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  filter: drop-shadow(3px 3px 10px #B0C4DE);
  backface-visibility: hidden;
}
/* 新車パネル */
.car-button {/* pc */
  position: relative;
  width: 70px;
  padding: 3px 9px 0;
  border-radius: 10px;
  background-color: #FF8C00;
}
/* 特別限定車パネル */
.flame-in-big-special {/* pc */
  display: inline-block;
  position: relative;
  z-index: 3;
  background: #fff;
  width: 75%;
  margin: 15px;
  padding: 20px;
  border-radius: 10px;
  filter: drop-shadow(3px 3px 10px #B0C4DE);
  backface-visibility: hidden;  
}
.selection-tbl-wrapper {/* pc */
  display: inline-block;
  position: relative;
  z-index: 3;
  width: 35%;
}
.selection-payment-wrapper {/* pc */
  display: inline-block;
  position: relative;
  z-index: 3;
  width: 35%;
  margin: 20px;
  vertical-align: top; 
}
/* ボードY軸横回転 spなし */
.rotateY {/* pc */
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
from {
  transform: rotateY(0);
}
to {
  transform: rotateY(-360deg);
}
}
/* お客さまの声 トップ画像 */
.top-maika-chan {/* pc */
  display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 15px 0 25px ;
}
/* お客さまの声 まいかちゃんの吹き出し横幅変える */
/* 吹き出し びぃなすちゃん 左 大 */
.text-biinasu-chan {/* pc */
  position: relative;
  float: left;/* 画像が右に並ぶ */
  width: 90%;
  max-width: 520px;
  margin: 25px;
  padding: 30px;
  border-radius: 30px;
  background: #FFFFF0;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #FFCC66);
}
/* 吹き出し かりすちゃん 左 大 */
.text-karisu-chan {/* pc */
  position: relative;
  float: left;/* 画像が右に並ぶ */
  width: 90%;
  max-width: 520px;
  margin: 25px;
  padding: 30px;
  border-radius: 30px;
  background: #F8F8FF;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #CCCCFF);
}
/* 吹き出し まいかちゃん 左 大 */
.text-maika-chan {/* pc */
  position: relative;
  float: left;/* 画像が右に並ぶ */
  width: 90%;
  max-width: 520px;
  margin: 25px;
  padding: 30px;
  border-radius: 30px;
  background: #FFFAFA;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #FFB6C1);
}
/* 吹き出し まいかちゃん 左 大 最初一番下 */
.text-maika-chan-first {/* pc */
  position: relative;
  float: left;/* 画像が右に並ぶ */
  width: 100%;
  max-width: 690px;
  margin: 25px;
  padding: 30px;
  border-radius: 30px;
  background: #FFFAFA;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #FFB6C1);
}
/* 吹き出し まいかちゃん 右 大 */
.text-maika-chan-right {/* pc */
  position: relative;
  float: right;/* 画像が右に並ぶ */
  width: 90%;
  max-width: 520px;
  margin: 25px;
  padding: 30px;
  border-radius: 30px;
  background: #FFFAFA;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #FFB6C1);
}
/* 吹き出し かりすちち 左 小 */
.text-karisu-titi-sub-left-small {/* pc */
  position: relative;
  float: left;/* 画像が右に並ぶ */
  width: 90%;
  max-width: 580px;
  margin: 25px 25px 0 50px;
  padding: 0 30px;
  border-radius: 30px;
  background: #FFFAF0;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #FFCC99);
}
/* 吹き出し だれじゃ 右 小 */
.text-darejya-sub-left-small {/* pc */
  position: relative;
  float: right;/* 画像が左に並ぶ */
  width: 90%;
  max-width: 770px;
  margin:  25px 50px 25px 25px;
  padding: 0 30px;
  border-radius: 30px;
  background: #F0F8FF;
  font-size: 1.4em;
  text-align: left;/* 必要 画像を左に寄せる */
		filter: drop-shadow(0px 0px 4px #99CCFF);
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-darejya-sub-left-small {/* pc */
  margin: 25px;
  text-align: right;/* 必要 画像を右に寄せる */
}
/* 吹き出し まいかちゃん 右 大 */
.text-maika-chan-sub-right-big {/* pc */
  position: relative;
  float: right;/* 画像が左に並ぶ */
  width: 40%;
  max-width: 580px;
  margin: 25px 50px 25px 25px;
  padding: 0 60px;
  border-radius: 30px;
  background: #FFFAFA;
  font-size: 4.8em;
  text-align: left;
		filter: drop-shadow(0px 0px 4px #FFB6C1);
}
/* 吹き出し かりすちゃん 左 大 */
.text-karisu-chan-sub-left-big {/* pc */
  position: relative;
  float: left;/* 画像が左に並ぶ */
  width: 40%;
  max-width: 580px;
  margin: 25px 25px 25px 50px;
  padding: 0 60px;
  border-radius: 30px;
  background: #F8F8FF;
  font-size: 4.8em;
  text-align: left;
		filter: drop-shadow(0px 0px 4px #CCCCFF);
}
/* お客さまの声 まいかちゃんの吹き出し矢印消える */
.text-biinasu-chan:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 140px; 
  right: -30px;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: #FFFFF0 transparent;
  content: "";
}
.text-karisu-chan:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 140px; 
  right: -30px;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: #F8F8FF transparent;
  content: "";
}
.text-maika-chan:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 140px; 
  right: -30px;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: #FFFAFA transparent;
  content: "";
}
.text-maika-chan-first:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 140px; 
  right: -30px;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: #FFFAFA transparent;
  content: "";
}
.text-maika-chan-right:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 140px; 
  left: -30px;
  border-width: 0 0 40px 40px;
  border-style: solid;
  border-color: #FFFAFA transparent;
  content: "";
}
.text-karisu-titi-sub-left-small:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 30px;/* 少し下に */ 
  right: -30px;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: #FFFAF0 transparent;
  content: "";
}
.text-darejya-sub-left-small:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 30px;/* 少し下に */ 
  left: -30px;
  border-width: 0 0 40px 40px;
  border-style: solid;
  border-color: #F0F8FF	 transparent;
  content: "";
}
.text-maika-chan-sub-right-big:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 70px;/* 少し下に */ 
  left: -30px;
  border-width: 0 0 40px 40px;
  border-style: solid;
  border-color: #FFFAFA transparent;
  content: "";
}
.text-maika-chan-sub-right-big:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 70px;/* 少し下に */ 
  left: -30px;
  border-width: 0 0 40px 40px;
  border-style: solid;
  border-color: #FFFAFA transparent;
  content: "";
}
.text-karisu-chan-sub-left-big:after {/* pc */
  display: inline-block;
  position: absolute;
  top: 70px;/* 少し下に */ 
  right: -30px;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: #F8F8FF transparent;
  content: "";
}
/* お客さまの声 まいかちゃんの吹き出し矢印右向きから下に切り替わる */  
.text-biinasu-chan:before {/* pc */
  display: none; 
}
.text-karisu-chan:before {/* pc */
  display: none; 
}
.text-maika-chan:before {/* pc */
  display: none; 
}
.text-maika-chan-first:before {/* pc */
  display: none; 
}
.text-maika-chan-right:before {/* pc */
  display: none; 
}
.text-karisu-titi-sub-left-small:before {/* pc */
  display: none; 
}
.text-maika-chan-sub-right-big:before {/* pc */
  display: none;
}
.text-karisu-chan-sub-left-big:before {/* pc */
  display: none;
}
/* お客さまの声 大きい画像位置変える */
.image-maika-chan-right {/* pc */
  width: 100%;
  margin: 80px 0 0;/* レスポンシブ縮小されても上空かない */
		text-align: left;/* 画像左詰め */
}
.image-maika-chan-left {/* pc */
  position: relative;
  width: 100%;
  margin: 80px 0 0;/* レスポンシブ縮小されても上空かない */
		text-align: right;/* 画像右詰め */
}
/* お客さまの声 小さい画像位置変える */
.image-maika-chan-sub-right {/* pc */
  position: relative;
  width: 100%;
  margin: 30px 0 0 50px;/* レスポンシブ縮小されても上空かない */
		text-align: left;/* 画像左詰め */
}
.image-maika-chan-sub-left {/* pc */
  position: relative;
  width: 100%;
  margin: 30px 50px 0 0;/* レスポンシブ縮小されても上空かない */
		text-align: right;/* 画像右詰め */
}
/* お客さまの声 左右の吹き出し矢印上向きから下に切り替わる */  
.balloon-right .balloon-text::after {/* pc */
  right: -12px;
  border-left: solid 20px #FFFAFA;
  transform: rotate(30deg);
}
.balloon-left .balloon-text::after {/* pc */
  left: -12px;
  transform: rotate(-30deg);
  border-right: solid 20px #fff;
}
}

@media only screen and (max-width: 1024px) {
/* 特選アンド即納車 ギャラリー */
.item {/* sp */
  width: 50% !important;/* 横並びで2つ表示 */
}
}