@charset "UTF-8";

/*
  style_sp.css
  オート石原 SP調整用

  既存のPC用CSSは触らず、768px以下のみ上書きします。
  functions.php 側で media="only screen and (max-width: 768px)" として読み込みます。
*/

/* ------------------------------------------
  SP base
------------------------------------------ */

html,
body {
	overflow-x: hidden;
}

img,
video,
iframe {
	max-width: 100%;
}

.pc {
	display: none !important;
}

.mb,
.sp {
	display: block !important;
}

body {
	font-size: 3.84vw;
	line-height: 1.8;
}

.commonText {
	font-size: 3.84vw;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

.align-c {
	text-align: center;
}

/* ------------------------------------------
  SP page common
------------------------------------------ */

.pv {
	height: 64vw;
	background-size: cover;
	background-position: center;
}

.pv__cp {
	padding: 12.5vw 0 0 0;
	width: 85%;
}

.pageBlock__container,
.purchaseBlock__container,
.contactBlock__container,
.aboutBlock__container,
.companyBlock__container,
.storeBlock__container,
.questionBlock__container,
.syakenBlock__container,
.ryoukinBlock__container,
.taxBlock__container,
.hokenBlock__container,
.repairBlock__container,
.stockBlock__container {
	width: 90vw;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}

/* ------------------------------------------
  SP buttons
------------------------------------------ */

.pageBtn {
	width: 46vw;
	height: 9.6vw;
}

.pageBtn__link {
	display: flex;
	align-items: center;
	/*justify-content: center;*/
	width: 100%;
	height: 100%;
	padding-left: 0;
	font-size: 3.6vw;
	line-height: 1;
}

.pageBtn__link::after {
    right: 3vw;
    top: 1.5rem;
}

/* ------------------------------------------
  SP Contact Form 7 common
------------------------------------------ */

.contactForm {
	width: 100%;
}

.contactForm .formItem {
	display: block;
	margin-bottom: 6vw;
}

.contactForm .formLabel {
	width: 100%;
	margin-bottom: 2.4vw;
	font-size: 4.1vw;
	line-height: 1.6;
	text-align: left;
}

.contactForm .formItem.required .formLabel::after {
	font-size: 3.6vw;
}

.contactForm .formInput {
	width: 100%;
}

.contactForm input[type="text"],
.contactForm input[type="tel"],
.contactForm input[type="email"],
.contactForm input[type="file"],
.contactForm select,
.contactForm textarea {
	width: 100%;
	padding: 2.4vw 3vw;
	font-size: 4vw;
	line-height: 1.6;
	border: solid 2px #000;
}

.contactForm input[type="file"] {
	padding: 2.4vw 0;
	border: none;
}

.contactForm textarea {
	height: 44vw;
}

.contactForm .formNote {
	margin-top: 1.6vw;
	font-size: 3.3vw;
	line-height: 1.6;
}

.contactErrorMessage {
	margin-bottom: 6vw;
	padding: 3vw 4vw;
	font-size: 3.84vw;
	line-height: 1.6;
	text-align: left;
}

.contactForm .wpcf7-not-valid-tip {
	margin-top: 1.5vw;
	font-size: 3.3vw;
	line-height: 1.5;
}

.contactForm .formBtn {
	margin-top: 10vw;
	text-align: center;
}

.contactForm .formBtn button,
.contactForm .formBtn input[type="submit"] {
	width: 46vw;
	height: 9.6vw;
	padding: 0;
	font-size: 4.1vw;
	line-height: 9.6vw;
}

/* ------------------------------------------
  SP confirm
------------------------------------------ */

.confirmMessage {
	margin-bottom: 8vw;
	text-align: left;
}

.confirmMessage h3 {
	margin-bottom: 3vw;
	font-size: 5vw;
	line-height: 1.5;
	text-align: center;
}

.confirmMessage p {
	margin: 0;
	font-size: 3.84vw;
	line-height: 1.8;
}

.cf7-step-confirm .formList {
	border-top: 1px solid #ccc;
	margin-bottom: 8vw;
}

.cf7-step-confirm .formItem {
	padding: 4vw 0;
	margin-bottom: 0;
	border-bottom: 1px solid #ccc;
}

.cf7-step-confirm .formInput {
	line-height: 1.8;
	word-break: break-word;
}

.formBtn.formBtn--confirm {
	display: block;
	margin-top: 8vw;
}

.formBtn.formBtn--confirm p {
	display: block;
	margin: 0;
}

.formBtn.formBtn--confirm p br {
	display: none;
}

.formBtn.formBtn--confirm button,
.formBtn.formBtn--confirm input[type="submit"] {
	display: block;
	width: 46vw;
	height: 9.6vw;
	margin: 0 auto 4vw;
	padding: 0;
	font-size: 4.1vw;
	line-height: 9.6vw;
}

.formBtn.formBtn--confirm .wpcf7-spinner {
	position: static;
	display: block;
	margin: 2vw auto 0;
}

.confirmSendNote {
	margin-top: 4vw;
	font-size: 3.3vw;
	line-height: 1.7;
	text-align: left;
	color: #666;
}

/* ------------------------------------------
  SP thanks common
------------------------------------------ */

.contactThanks,
.purchaseThanks {
	width: 92vw;
	max-width: none;
	margin: 0 auto;
	padding: 5vw 0 10vw;
	text-align: left;
}

.contactThanks__lead,
.purchaseThanks__lead {
	margin-bottom: 6vw;
	font-size: 5.4vw;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.contactThanks__text,
.contactThanks__contact,
.purchaseThanks__text,
.purchaseThanks__contact {
	margin-bottom: 6vw;
	font-size: 3.84vw;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

.contactThanks__contact,
.purchaseThanks__contact {
	font-weight: 700;
}

.contactThanks .pageBtn,
.purchaseThanks .pageBtn {
	margin-top: 8vw;
	margin-right: auto;
	margin-left: auto;
}

.contactThanks .pageBtn__link,
.purchaseThanks .pageBtn__link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	font-size: 3.6vw;
}

.contactThanks .pageBtn__link::after,
.purchaseThanks .pageBtn__link::after {
	right: 4vw;
}

/* ------------------------------------------
  SP purchase / contact intro
------------------------------------------ */

.purchaseHeading,
.contactHeading {
	margin-bottom: 7vw;
	font-size: 4.4vw;
	line-height: 1.5;
	text-align: center;
}

.purchaseHeading.second {
	margin-top: 12vw;
}

.purchaseBlock .commonText,
.contactBlock .commonText {
	margin-bottom: 8vw;
}

/* ------------------------------------------
  SP stock archive / detail
------------------------------------------ */

.stockList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.stockList__item {
	width: 43vw;
	margin-right: 0;
	margin-bottom: 7vw;
}

.stockList .stockList__item:nth-of-type(2n),
.stockList .stockList__item:nth-of-type(3n) {
	margin-right: 0;
}

.stockList__item__image {
	height: 28vw;
	margin-bottom: 2vw;
}

.stockList__item__title {
	font-size: 3.4vw;
	line-height: 1.5;
}

.stockList__item__meta {
	display: block;
	font-size: 3.2vw;
	line-height: 1.5;
	text-align: center;
}

.stockDetailBlock__container {
	width: 90vw;
	max-width: none;
}

.stockDetailGallery__mainImage {
	height: 58vw;
}

.stockDetailGallery__arrow {
	width: 8vw;
	height: 14vw;
}

.stockDetailGallery__arrow--prev {
	left: -2vw;
}

.stockDetailGallery__arrow--next {
	right: -2vw;
}

.stockDetailGallery__thumbs {
	flex-wrap: wrap;
	gap: 2vw;
	margin-top: 4vw;
}

.stockDetailGallery__thumb {
	width: 20vw;
	height: 13vw;
}

.stockDetailInfo__title,
.stockContent__carName {
	font-size: 5vw;
	line-height: 1.5;
}

.stockDetailInfo,
.stockContent__info {
	font-size: 3.84vw;
	line-height: 1.8;
}

/* ------------------------------------------
  SP news
------------------------------------------ */

.pageBlock .newsBlock__container {
	width: 90vw;
	max-width: none;
}

.newsBlock__content__detail {
	display: block;
}

.pageBlock .newsList,
.newsContent {
	width: 100%;
	max-width: none;
	margin-right: 0;
}

.pageBlock .newsList__item__date {
	font-size: 3.84vw;
}

.pageBlock .newsList__item__title {
	font-size: 5.2vw;
	line-height: 1.5;
}

.pageBlock .newsList__item__excerpt {
	font-size: 3.84vw;
	line-height: 1.8;
}

.pageBlock .sidebar {
	width: 100%;
	margin-top: 8vw;
}

.sidebar__list__item__heading {
	font-size: 5vw;
	line-height: 1.4;
}

.sidebar__list__item__posts li a {
	font-size: 3.84vw;
	line-height: 1.8;
}

/* ------------------------------------------
  SP tables
------------------------------------------ */

.companyBlock__content__table,
.ryoukinBlock__content__table {
	width: 100%;
}

.companyBlock__content__table tr th,
.companyBlock__content__table tr td,
.ryoukinBlock__content__table tr th,
.ryoukinBlock__content__table tr td,
.hokenBlock__content__table tr th,
.hokenBlock__content__table tr td {
	display: block;
	width: 100%;
	padding: 4vw 3vw 3.5vw 3vw;
	font-size: 3.84vw;
	line-height: 1.7;
	text-align: left;
}

.ryoukinBlock__content__table,
.hokenBlock__content__table tr th,
.hokenBlock__content__table tr td{
	border: none;
}

/* 自賠責保険 料金表だけはSPでも2×2の表組を維持 */
.hokenBlock__content__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border-top: solid 1px #0e0e0e;
}

.hokenBlock__content__table tr {
	display: table-row;
}

.hokenBlock__content__table tr th,
.hokenBlock__content__table tr td {
	display: table-cell;
	width: 50%;
	padding: 5vw 2vw;
	font-size: 3.84vw;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
	border: solid 1px #0e0e0e;
}

.hokenBlock__content__table tr th {
	background-color: #ca0404;
	color: #fff;
	font-weight: bold;
}

/* ------------------------------------------
  よくあるご質問
------------------------------------------ */
.questionBlock__content__list {
	margin-top: 3rem;
}
.questionBlock__content__list__item {
	margin-bottom: 3rem;
}

/* ------------------------------------------
  ハンバーガーメニュー
------------------------------------------ */
@media screen and (max-width: 768px) {
	.gNav__wrap {

		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		transition: .3s;
	}


}

/* ------------------------------------------
  ヘッダー　インスタアイコン
------------------------------------------ */
/* SP header Instagram */

.headerContact__btn {
	margin-right: 2vw;
}

.headerInsta__btn {
	width: 7vw;
	height: 7vw;
	margin-top: 0;
	margin-right: 17vw;
	flex-shrink: 0;
}

.headerInsta__btn a,
.headerInsta__btn img {
	display: block;
	width: 100%;
	height: 100%;
}

.headerInsta__btn img {
	object-fit: contain;
}

/* ------------------------------------------
  トップページスタッフ下の黒いボタン
------------------------------------------ */
@media screen and (max-width: 768px) {
	.homeAbout .pageBtn__link {
		justify-content: center;
		padding-left: 0;
		text-align: center;
	}

	.homeAbout .pageBtn__link::after {
		right: 4vw;
		top: 1.2rem;
	}
}

/* ------------------------------------------
  私たちについて　画像にリズムをつける
------------------------------------------ */
@media screen and (max-width: 768px) {
	.aboutBlock__content__images {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.aboutBlock__content__images__item {
		width: 55vw;
		height: auto;
		margin-bottom: 2vw;
		background-size: cover;
		background-position: center;
	}

	.aboutBlock__content__images__item:nth-child(1),
	.aboutBlock__content__images__item:nth-child(3) {
		transform: translateX(-15vw);
	}

	.aboutBlock__content__images__item:nth-child(2) {
		transform: translateX(15vw);
	}
}


@media screen and (max-width: 768px) {
	.companyBlock__content__table,.companyBlock__content__table tr th,.companyBlock__content__table tr td {
		border-top: none;
		border-right: none;
	}
}

/* ------------------------------------------
  SP news 
------------------------------------------ */
.newsCategoryArea {
	margin-top: 8vw;
	padding-top: 6vw;
}

.newsCategoryInner {
	display: block;
}

.newsCategoryTitle {
	display: block;
	margin-bottom: 4vw;
	font-size: 4vw;
	line-height: 1;
}

.newsCategoryTitle span {
	display: none;
}

.newsCategoryList {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0 0 0 -1rem;
}

.newsCategoryList li {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 3.6vw;
	line-height: 1.8;
}

.newsCategoryList li::before {
	content: "｜";
	margin: 0 0.8em;
	color: #999;
}

.newsCategoryList li::after {
	content: none !important;
}

.newsCategoryList li:last-child::after {
	content: "｜" !important;
	margin: 0 0.8em;
	color: #999;
}

.newsCategoryList a {
	color: #333;
	text-decoration: none;
}

.newsSingleContent p {
	font-size: 1.6rem;
}

/* ------------------------------------------
  SP 投稿ページ 前後ナビ
------------------------------------------ */
.newsSinglePager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2vw;
	margin-top: 8vw;
}

.newsSinglePager__prev,
.newsSinglePager__back,
.newsSinglePager__next {
	flex: 1;
	text-align: center;
}

.newsSinglePager a,
.newsSinglePager__back a {
	font-size: 3.6vw;
	line-height: 1.4;
}

.newsSinglePager__prev {
	text-align: left;
}

.newsSinglePager__next {
	text-align: right;
}

/* 企業理念・経営指針・行動指針 */
.philosophyBlock__container {
	width: 90vw;
	max-width: none;
	padding: 10vw 0 0;
}

.philosophyBlock .page__heading {
	margin-bottom: 7vw;
}

.philosophyBlock__content {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.philosophyBlock__item {
	margin-bottom: 9vw;
}

.philosophyBlock__heading {
	margin-bottom: 3vw;
	padding-left: 3vw;
	border-left: 5px solid #ca0404;
	color: #ca0404;
	font-size: 5vw;
	line-height: 1.4;
}

.philosophyBlock__item .introText {
	margin-bottom: 5vw;
	text-align: left;
}

.philosophyBlock__item strong {
	display: inline-block;
	margin-bottom: 1vw;
}

/* ------------------------------------------
  404 page
------------------------------------------ */
.error404Block {
	padding: 20vw 0 25vw;
}

.error404Block__container {
	width: 86vw;
}

.error404Block__number {
	margin-bottom: 4vw;
	font-size: 18vw;
	line-height: 1;
}

.error404Block__heading {
	margin-bottom: 6vw;
	font-size: 4.5vw;
	line-height: 1.6;
}

.error404Block__text {
	font-size: 3.6vw;
	line-height: 2;
	text-align: left;
}

.error404Block__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4vw;
	margin-top: 10vw;
}

.error404Block__links a {
	font-size: 3.6vw;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: .3em;
}