@charset "utf-8";
/* ==========================================================================
   草加ダイヤモンド交通  レスポンシブ用スタイル（responsive.css）

   ・961px 以上 … PC 表示（common.css / index.css / extra.css のまま）
   ・960px 以下 … タブレット・スマートフォン表示（固定幅を解除して可変レイアウト）
   ・600px 以下 … スマートフォン表示（2カラムの要素を1カラムに）

   配色は既存画像から抽出
     ブルー（フッター・メニュー） #0039ae / #054eac / #267fd0 / #4595df
     ライトブルー（枠線）         #d1dbf0 / #809cd7
     グリーン（電話）             #5db34f
     ピンク（強調）               #ed145b
   ========================================================================== */


/* ==========================================================================
   960px 以下
   ========================================================================== */
@media screen and (max-width: 960px) {

	body {
		font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	.sp_only { display: block; }


	/* ----------------------------------------------------------------------
	   レイアウト枠
	   ---------------------------------------------------------------------- */

	.global_area,
	.header,
	.main,
	.main2,
	.footer,
	.footer_menu,
	.head_menu,
	.main_area,
	.main_left,
	.main_right {
		width: auto;
	}

	.header,
	.main,
	.main2 {
		background: none;
	}

	.main::before,
	.main2::before,
	.main::after,
	.main2::after {
		display: none;
	}

	.main_area {
		padding: 16px 12px 24px;
	}

	.main_left,
	.main_right {
		float: none;
	}

	.main_left { display: flow-root; }


	/* ----------------------------------------------------------------------
	   ヘッダー
	   ---------------------------------------------------------------------- */

	.header {
		position: sticky;
		top: 0;
		z-index: 100;
		padding: 0;
		background: #ffffff;
		box-shadow: 0 2px 6px rgba(0, 57, 174, 0.18);
	}

	.header::after {
		height: 3px;
		background: linear-gradient(to right, #0039ae, #267fd0);
	}

	.head_tel {
		display: none;
	}

	.title_area {
		display: flex;
		align-items: center;
		width: auto;
		margin: 0;
		padding: 8px 12px;
	}

	.title {
		float: none;
		width: auto;
		max-width: 190px;
		flex: 1 1 auto;
	}

	.title img {
		width: 100%;
		max-width: 190px;
	}

	.sp_header_btns {
		display: flex;
		flex: none;
		gap: 6px;
		margin-left: auto;
	}

	.sp_tel_btn,
	.sp_menu_btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 50px;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 6px;
		color: #ffffff;
		font-family: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.sp_tel_btn:link,
	.sp_tel_btn:visited {
		color: #ffffff;
		text-decoration: none;
	}

	.sp_tel_btn { background: #5db34f; }
	.sp_menu_btn { background: linear-gradient(#267fd0, #054eac); }

	.sp_btn_txt {
		display: block;
		font-size: 10px;
		line-height: 1;
		font-weight: bold;
		letter-spacing: 0.05em;
	}

	/* 電話アイコン */
	.sp_btn_icon {
		display: block;
		width: 20px;
		height: 20px;
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* ハンバーガー */
	.sp_menu_bar,
	.sp_menu_bar::before,
	.sp_menu_bar::after {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
		background: #ffffff;
		transition: transform 0.25s, background-color 0.25s;
	}

	.sp_menu_bar {
		position: relative;
		margin: 6px 0 5px;
	}

	.sp_menu_bar::before,
	.sp_menu_bar::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.sp_menu_bar::before { top: -7px; }
	.sp_menu_bar::after  { top: 7px; }

	.sp_menu_btn.is-open .sp_menu_bar { background: transparent; }
	.sp_menu_btn.is-open .sp_menu_bar::before { transform: translateY(7px) rotate(45deg); }
	.sp_menu_btn.is-open .sp_menu_bar::after  { transform: translateY(-7px) rotate(-45deg); }


	/* グローバルナビ（ドロワー） ------------------------------------------ */

	.head_menu {
		display: none;
		max-height: calc(100vh - 65px);
		max-height: calc(100dvh - 65px);
		overflow-y: auto;
		background: #0039ae;
	}

	.head_menu.is-open { display: block; }

	.head_menu ul {
		display: block;
	}

	.head_menu ul::before,
	.head_menu ul::after {
		display: none;
	}

	.head_menu li,
	.head_menu li + li,
	.head_menu .gnav_home + li {
		height: auto;
		padding: 0;
		background: none;
	}

	.head_menu li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.head_menu a,
	.gnav01 a, .gnav02 a, .gnav03 a,
	.gnav04 a, .gnav05 a, .gnav06 a {
		position: relative;
		padding: 15px 40px 15px 18px;
		background: #0039ae;
		color: #ffffff;
		text-decoration: none;
	}

	.head_menu a:hover,
	.head_menu a:focus-visible {
		background: #054eac;
	}

	.head_menu a[aria-current="page"] {
		background: #4595df;
	}

	/* 右向き矢印 */
	.head_menu a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform: rotate(45deg);
	}

	.head_menu img { display: none; }

	.head_menu .sp_label {
		display: block;
		font-size: 15px;
		line-height: 1.4;
		font-weight: bold;
		letter-spacing: 0.05em;
	}


	/* ----------------------------------------------------------------------
	   ページ上部の見出し画像
	   ---------------------------------------------------------------------- */

	.page_visual {
		margin: 0;
	}

	.page_visual img {
		width: 100%;
		height: auto;
		min-height: 84px;
		object-fit: cover;
		object-position: left center;
	}


	/* ----------------------------------------------------------------------
	   トップページ
	   ---------------------------------------------------------------------- */

	.index_top_img { margin: 0; }

	.index_top_img img,
	.index_info img {
		width: 100%;
		height: auto;
	}

	.index_info { padding-bottom: 16px; }

	/* 動画リンク */
	.movie_link2 { display: flow-root; }

	.movie_btn_a,
	.movie_btn_b { width: 80.77%; }
	.movie_btn_c { width: 19.23%; }

	.movie_link2 img {
		width: 100%;
		height: auto;
	}

	/* 聴覚ＱＱタクシー（3枚の画像を横幅に合わせて縮小） */
	.index_hearing { width: auto; }

	.index_hearing img {
		flex: 0 1 auto;
		min-width: 0;
		height: auto;
	}

	.index_hearing .index_he01 { width: 20.15%; }
	.index_hearing .index_he02 { width: 38.16%; }
	.index_hearing .index_he03 { width: 41.69%; }

	/* ボックス（旧 背景画像の枠を CSS で再現） */
	.index_left,
	.index_right,
	.index_right2,
	.index_sbl,
	.index_sbr {
		width: calc(50% - 8px);
		margin-bottom: 12px;
	}

	.index_left,
	.index_right {
		background: linear-gradient(to right,
			#7ba6ff 0 1px, #bcd2ff 1px 4px, #ffffff 4px calc(100% - 4px),
			#bcd2ff calc(100% - 4px) calc(100% - 1px), #7ba6ff calc(100% - 1px));
	}

	.index_right2 {
		background: linear-gradient(to right,
			#f7aaaf 0 1px, #ffd8da 1px 4px, #ffffff 4px calc(100% - 4px),
			#ffd8da calc(100% - 4px) calc(100% - 1px), #f7aaaf calc(100% - 1px));
	}

	.index_sbl,
	.index_sbr {
		background: linear-gradient(to right,
			#cccccc 0 1px, #eeeeee 1px 4px, #ffffff 4px calc(100% - 4px),
			#eeeeee calc(100% - 4px) calc(100% - 1px), #cccccc calc(100% - 1px));
	}

	.index_left > .img img,
	.index_right > .img img,
	.index_right2 > .img img,
	.index_sbl > .img img,
	.index_sbr > .img img {
		display: block;
		width: 100%;
	}

	/* 枠の下端（旧 index_waku02.gif など）は高さを保って横だけ伸縮 */
	.index_left > .img:last-child img,
	.index_right2 > .img:last-child img,
	.index_sbl > .img:last-child img,
	.index_sbr > .img:last-child img {
		height: 10px;
	}

	.index_waku {
		width: auto;
		padding: 0 12px;
	}

	.index_waku > .img img {
		display: block;
		width: 100%;
	}

	.index_text { width: auto; }

	/* 乗務員募集・配車エリア：写真とテキスト */
	.index_mini {
		display: flex;
		gap: 12px;
		padding: 0 14px 0 4px;
	}

	.index_minil,
	.index_minir {
		float: none;
		padding: 0;
	}

	.index_minil { flex: none; width: 94px; }
	.index_minir { flex: 1 1 auto; width: auto; min-width: 0; }
	.index_text2 { width: auto; }
	.index_minir .index_button { margin-bottom: 8px; }

	/* GO アプリ */
	.go_div {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 4%;
		width: auto;
		height: auto;
		margin: 8px 0 24px;
		padding: 16px 0 0;
		border-top: 1px solid #d1dbf0;
	}

	.go_span {
		float: none;
		width: 48%;
	}

	.go_plink1 { width: auto; }
	.go_plink2,
	.go_plink3 { width: 48.3%; }

	.go_div img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 右カラム */
	.main_right {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 10px;
		justify-items: center;
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid #d1dbf0;
	}

	.main_right > .gap { display: none; }
	.main_right > * { margin: 0 !important; }

	/* 携帯版サイトのQRコードはスマートフォンでは不要なので非表示 */
	.qr_img { display: none; }

	.right_cp { padding-bottom: 6px; border-bottom: 1px solid #e9e9e9; }

	/* スマホ用 電話バナー */
	.sp_index_banners {
		padding: 0 12px 20px;
	}

	.sp_index_banners img {
		display: block;
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}


	/* ----------------------------------------------------------------------
	   下層ページ共通
	   ---------------------------------------------------------------------- */

	.page_link {
		padding: 8px 10px;
		line-height: 1.5;
	}

	.title_bar {
		width: auto;
		height: auto;
		padding: 15px 0 12px 6px;
		background-position: 0 100%;
		line-height: 1.4;
	}

	/* 見出しバー（背景画像を要素の大きさに合わせて伸縮） */
	.car_bar,
	.safety_bar,
	.qq_bar,
	.voice_bar,
	.voice_bar2,
	.fuku_bar {
		width: auto;
		height: auto;
		min-height: 17px;
		padding: 4px 4px 12px 10px;
		background-size: 100% calc(100% - 8px);
		line-height: 1.4;
	}

	.faq01 {
		position: relative;
		width: auto;
		height: auto;
		padding: 8px 8px 8px 40px;
		line-height: 1.4;
		background: linear-gradient(to right, #6c84b7 0 30px, #e0e7f7 30px);
	}

	.faq01::before {
		content: "Q";
		position: absolute;
		top: 50%;
		left: 0;
		width: 30px;
		margin-top: -0.5em;
		color: #ffffff;
		font-size: 17px;
		line-height: 1;
		text-align: center;
	}

	.faq02 { width: auto; }

	.pagetop { width: auto; }

	/* 固定幅の解除 */
	.reed_text, .reed_text2, .reed_text3,
	.re_box,
	.hearing_box,
	.kankou,
	.fare_box, .fare_box2,
	.list01, .list02,
	.fuku_area, .car_area, .car_area2, .car_area3,
	.company_l3, .company_list, .safety_list,
	.start,
	.se_maiku, .se_maiku2,
	.qq_area,
	.recruit_map {
		width: auto;
	}

	/* 採用情報のリード（旧 背景写真の上に文字）→ 写真は文章の下・右寄せに */
	.re_box {
		padding-bottom: 124px;
		background-position: right bottom;
	}

	.list01 dd,
	.list02 dd {
		float: none;
		width: auto;
		margin-left: 40px;
	}

	.list01 dt,
	.list02 dt {
		width: 30px;
	}

	.company_list ul { margin-left: 24px; }

	/* 2カラム要素（960px 以下は比率で可変） */
	.car_l, .car_r            { width: calc(50% - 8px); }
	.kankou_l                 { width: 49.4%; }
	.kankou_r                 { width: 47.5%; }
	.hearing_lead1            { width: 33%; }
	.hearing_lead2            { width: 64%; }
	.fuku_l                   { width: 42.8%; }
	.fuku_r                   { width: 53.8%; }
	.car_left                 { width: 37%; }
	.car_right                { width: 61%; }
	.service_l                { width: 33%; }
	.service_r                { width: 64%; }
	.se_voice, .se_voice2     { width: 49%; }
	.voice_l1, .voice_r2      { width: 72.9%; }
	.voice_r1, .voice_l2      { width: 24.3%; }
	.start_l, .start_m, .start_r { width: 32.5%; }
	.start_m                  { margin-left: 1.25%; padding-left: 0; }
	.start_r                  { float: left; margin-left: 1.25%; }

	.se_maiku { width: auto; }

	.start_text { width: auto; padding: 0 4px; }

	/* 表 */
	.company_table,
	.recruit_table,
	.fare_box2 table {
		width: 100%;
	}

	.company_cell01, .company_cell03 { width: 28%; }
	.recruit_cell01, .recruit_cell03 { width: 28%; }

	.fare_box2 table thead tr th,
	.fare_box2 table tbody tr td { width: auto; font-size: 13px; }
	.fare_box2 table thead tr th + th + th,
	.fare_box2 table tbody tr td + td + td { width: auto; }
	.fare_box2 table tbody tr td { padding: 5px 6px; }
	.fare_box2 table tbody tr td:first-child { width: 22%; }
	.fare_box2 table tbody tr td + td:not(:last-child),
	.fare_box2 table thead tr th + th:not(:last-child) { white-space: nowrap; }

	/* 地図 */
	.recruit_map {
		height: auto;
		aspect-ratio: 550 / 400;
	}

	.recruit_map iframe {
		width: 100%;
		height: 100%;
	}

	/* 聴覚・出産QQタクシーのサービス説明 */
	.qq_row { width: auto; }
	.qq_row .qq_cell1 { flex: 1 1 auto; width: auto; }

	/* 1日の乗務の流れ */
	.flow_list {
		width: auto;
	}

	.flow_list li {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.flow_list li + li::before {
		height: 100%;
		max-height: 126px;
		background-size: contain;
		background-position: center top;
	}

	.flow_list .img img { width: 100%; }


	/* ----------------------------------------------------------------------
	   フッター（スマートフォン用テキストメニューに置き換え）
	   ---------------------------------------------------------------------- */

	.footer::before,
	.footer::after,
	.footer_menu {
		display: none;
	}

	.sp_footer {
		display: block;
		background: #0039ae;
		border-top: 4px solid #809cd7;
	}

	.sp_footer_nav ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0;
		padding: 0;
		list-style: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.sp_footer_nav li {
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.sp_footer_nav li:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.18);
	}

	/* 奇数個の最後の項目は横いっぱいに */
	.sp_footer_nav li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		border-right: 0;
	}

	.sp_footer_nav a {
		position: relative;
		display: block;
		padding: 14px 26px 14px 14px;
		font-size: 13px;
		line-height: 1.4;
		letter-spacing: 0.03em;
		-webkit-tap-highlight-color: transparent;
	}

	.sp_footer_nav a:link,
	.sp_footer_nav a:visited {
		color: #ffffff;
		text-decoration: none;
	}

	.sp_footer_nav a:hover,
	.sp_footer_nav a:active {
		color: #ffffff;
		background: #054eac;
		text-decoration: none;
	}

	.sp_footer_nav a[aria-current="page"] {
		background: rgba(255, 255, 255, 0.12);
	}

	.sp_footer_nav a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 14px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		border-top: 2px solid #c0ceeb;
		border-right: 2px solid #c0ceeb;
		transform: rotate(45deg);
	}

	.sp_copyright {
		margin: 0;
		padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
		background: #00297d;
		color: #d1dbf0;
		font-size: 11px;
		line-height: 1.5;
		text-align: center;
		letter-spacing: 0.03em;
	}

	.sp_copyright small {
		font-size: inherit;
	}
}


/* ==========================================================================
   600px 以下（スマートフォン）
   ========================================================================== */
@media screen and (max-width: 600px) {

	/* 2カラム → 1カラム */
	.index_left,
	.index_right,
	.index_right2,
	.index_sbl,
	.index_sbr,
	.car_l, .car_r,
	.kankou_l, .kankou_r,
	.hearing_lead1, .hearing_lead2,
	.fuku_l, .fuku_r,
	.car_left, .car_right,
	.service_l, .service_r,
	.voice_l1, .voice_r1, .voice_l2, .voice_r2,
	.start_l, .start_m, .start_r,
	.se_voice, .se_voice2 {
		float: none;
		width: auto;
		margin-left: 0;
		padding-left: 0;
	}

	.index_left,
	.index_right,
	.index_right2,
	.index_sbl,
	.index_sbr {
		margin-bottom: 16px;
	}

	.car_r,
	.kankou_r,
	.hearing_lead2,
	.fuku_r,
	.car_right,
	.start_m,
	.start_r {
		margin-top: 16px;
	}

	.car_left,
	.hearing_lead1,
	.fuku_l,
	.voice_l2,
	.voice_r1 {
		text-align: center;
	}

	.voice_l2 img,
	.voice_r1 img {
		max-width: 158px;
	}

	.start_l, .start_m, .start_r { text-align: center; }
	.start_text { text-align: left; }

	.kankou_l .img,
	.hearing_lead1 .img,
	.fuku_l .img,
	.car_left .img {
		text-align: center;
	}

	/* 画像・文章に付けていた左余白を解除 */
	.pl45, .pl50 { padding-left: 0 !important; }
	.pad_note { padding-left: 0 !important; }

	.se_maiku,
	.se_maiku2 {
		padding-left: 52px;
	}

	.faq01 { font-size: 14px; }

	/* 表の文字サイズ */
	.company_table,
	.recruit_table {
		font-size: 12px;
	}

	.company_cell01, .company_cell03,
	.recruit_cell01, .recruit_cell03 {
		width: 30%;
		font-size: 12px;
	}

	.company_cell02, .company_cell04,
	.recruit_cell02, .recruit_cell04 {
		font-size: 12px;
	}

	.fare_box2 table thead tr th,
	.fare_box2 table tbody tr td {
		font-size: 12px;
		letter-spacing: 0;
	}

	/* 1日の流れ：2列で表示 */
	.flow_list {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	.flow_list li {
		flex: 0 0 calc(50% - 15px);
	}

	.flow_list li:nth-child(odd) { margin-left: 0; }
	.flow_list li:nth-child(odd)::before { display: none; }

	/* 聴覚ＱＱタクシー：狭い画面では見出し部分の2枚のみ表示（説明文の画像は alt に記載） */
	.index_hearing .index_he01 { width: 34.56%; }
	.index_hearing .index_he02 { width: 65.44%; }
	.index_hearing .index_he03 { display: none; }

	/* GO アプリ：1列 */
	.go_span { width: 100%; }

	/* 右カラムのバナー */
	.main_right {
		grid-template-columns: 1fr;
	}

	.kankou_txt3 { font-size: 20px; }
}