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

/************************************************
 ページタイトル
************************************************ */

/* =================================================
   メインページ / itabashiページ
================================================= */

.round_ti{
  font-weight: bold;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, #00897b, #0d47a1 );
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  margin: calc(3.5em / 2) 0 calc(3.5em / 2) calc(3.5em / 2);
  line-height: 1.3;
}
.round_ti::before {
  position: absolute;
  bottom: calc(-3.5em / 4);
  left: calc(-3.5em / 2);
  z-index: -1;
  transform: translateZ(-1px);
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: #c6d6d6;
  content: '';
}

/* --- 黒背景の場合の色調整 --- */
.bbk .round_ti{
  background-image: linear-gradient(135deg, #24ff72 , #2196f3 );
}
.bbk .round_ti::before {
  background: #122;
}

/* --- レスポンシブ対応 --- */
@media screen and ( max-width: 480px ) {
.round_ti {
	font-size: 190%; 
}
}
@media screen and (min-width: 481px) and (max-width: 800px) {
.round_ti {
	font-size: 215%; 
}
}
@media all and ( min-width: 801px ) , print {
.round_ti {
	font-size: 240%; 
}
}

/* =================================================
   ブランドページ
================================================= */

/* --- ディーラー名　h1タイトル --- */
.brand-title{
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-family: Arial, sans-serif;
}

/* --- プロファイルページのh2タイトル --- */
.profile-title {
	font-weight: bold;
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-size: 160%;
	border-bottom: 5px solid #A3A3A3;
	padding: 0.2em 0.5em;
	margin: 20px 0;
	border-left: solid 10px #900;
}

/* =================================================
   一般ページ
================================================= */

/* 各ページのh1タイトル
----------------------------------------------- */

.page-title{
	font-size: clamp(1.3rem, 3vw, 3.0rem);
	text-align: center;
	border-bottom: 1px solid #999;
	padding: 10px 0;
	margin: 10px 0 20px;
}

/* 左と下にオレンジの帯（主にh2タグ）
----------------------------------------------- */

.page-subtitle{
	border-left: 20px solid orange;
	border-bottom: 2px solid orange;
	padding-left: 10px;
	display: inline-block;
	margin: 20px 0 20px 2.5%;
	font-size: clamp(1.3rem, 2.5vw, 2.2rem);
	width: 95%;
}
/* --- イタリック体のサブタイトル--- */
.page-subtitle span{
	padding-left: 10px;
	font-size: 0.8em;
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
}
/* --- stock-carのsoldout欄での色調整 --- */
.soldout-wrap .page-subtitle{
	border-left: 20px solid #999;
	border-bottom: 2px solid #999;
}

/* 三角矢印と色文字（主にh3タグ）
----------------------------------------------- */

.page-caption{
	padding-left: 5px;
	margin: 20px 0 10px;
	font-size: clamp(1.1rem, 1.8vw, 2rem);
	color: #c00;
}
.page-caption::before{
	content: "\25b6";
	margin-right: 10px;
	font-size:90%;
	color: #000;
}
/* --- 黒背景の場合の色調整 --- */
.bbk .page-caption{
	color: orange;
}
.bbk .page-caption::before{
	color: #fff;
}

/* リクルートページのh1タイトル
----------------------------------------------- */

/* --- タイトル--- */
.mci-h1{
	text-align: center;
	font-size: 180%;
	font-weight: bold;
	color: #599;
}
/* --- タイトルの上下に線を表示--- */
.mci-title {
	position: relative;
	padding: 2rem 1rem;
}
.mci-title:before,
.mci-title:after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	content: '';
	background-image: -webkit-gradient(linear, right top, left top, from(#30cfd0), to(#1E4D3B));
	background-image: -webkit-linear-gradient(right, #30cfd0 0%, #1E4D3B 100%);
	background-image: linear-gradient(to left, #30cfd0 0%, #1E4D3B 100%);
}
.mci-title:before {
	top: 0;
}
.mci-title:after {
	bottom: 0;
}

/* イタリック体のキャッチフレーズ
----------------------------------------------- */

.signature-text {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	color: var(--primary-color);
	margin: 30px 0;
}

/* =================================================
   汎用タイトルタグ / サイズは別タグで指定
================================================= */


/* c-titleタグ
----------------------------------------------- */

/* .mci-h2(orange) .pg_ti2(f160 bordeaux line-grey) .pg_sti2(f120 blue line-grey) */
.c-title-01,
.c-title-s01 {
	width: 100%;
	display: inline-block;
	padding-left: 10px;
	margin: 10px 0;
}
.c-title-01 {
	border-left: 15px solid var(--accent-color);
}
.c-title-s01 {
	border-left: 5px solid var(--accent-color);
}

/* .pg_sti(f110 grey) .pg_sti4(f120 bordeaux)  .info_ti(f120 teal)*/
.c-title-02{
	 text-align: center;
	 background-color: var(--accent-color);
	 color: #fff; 
	 padding: 10px 0;
	 margin: 20px 0;
	 border-radius: 8px;
}

/* .pg_sti3(f120 pink) */
.c-title-03 {
	font-weight: bold;
	display: inline;
	background-image: linear-gradient(transparent 70%, var(--accent-color) 0);
}

/* borderカラータグ */
.c-line{
	border: 2px solid var(--accent-color);
}

/* 色のバリエーション（変数だけを上書き） */
.is-orange   { --accent-color: orange; }
.is-blue     { --accent-color: #09f; }
.is-red      { --accent-color: #f00; }
.is-yellow   { --accent-color: #fc0; } .bbk .is-yellow { --accent-color: #ff0; }
.is-green    { --accent-color: #0c6; } .bbk .is-green  { --accent-color: #0f9; }
.is-grey     { --accent-color: #444; }
.is-black    { --accent-color: #000; }
.is-white    { --accent-color: #fff; }
.is-gold     { --accent-color: #b8860b; }
.is-pink     { --accent-color: #fc5185; }
.is-bordeaux { --accent-color: #640125; }
.is-teal     { --accent-color: #066; }
.is-vermilion{ --accent-color: #f04030; }
.is-midnight{ --accent-color: #1a2a3a; }

/* オプション：下線を追加するクラス */
.has-line {
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 4px;
}
.has-line-grey {
  border-bottom: 2px solid #999;
  padding-bottom: 4px;
}



.rms_ti{
	font-family: "Times New Roman", Times, serif;
	font-size: 160%;
	font-weight: bold;
	font-style: italic;
	margin: 30px 0 10px;
}
.rms_ti span{
	font-style: normal;
	color: #FC3;
	font-size: 70%;
}
.italic{
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
}


.mci-h2 {
	border-left: 15px solid orange;
	padding-left: 10px;
	display: inline-block;
	margin: 20px 0;
}
.pg_ti2 {
	font-weight: bold;
	font-size: 160%;
	border-bottom: 5px solid #A3A3A3;
	padding: 0.2em 0.5em;
	margin: 20px 0;
	border-left: solid 10px #900;
}
.pg_sti{
	 font-size: 110%;
	 text-align: center;
	 background-color: #666;
	 color: #fff; 
	 padding: 5px 0;
	 margin: 5px 0;
}
.pg_sti2 {
	font-weight: bold;
	font-size: 120%;
	border-bottom: 1px solid #A3A3A3;
	padding: 0.2em 0.5em;
	margin: 20px 0;
	border-left: solid 5px #27acd9;
}
.pg_sti3 {
	font-weight: bold;
	display: inline;
	font-size: 120%;
	background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%);
}
.pg_sti4{
	 font-size: 120%;
	 text-align: center;
	 background-color: #640125;
	 color: #fff; 
	 padding: 10px 0;
	 margin: 20px 0;
}
.info_ti{
	padding: 5px 0;
	margin: 10px auto;
	text-align: center;
	font-size: calc(80% + 0.6vw);
	color: #fff;
	background-color: #066;
	border-radius: 50px;
}