@charset "UTF-8";

@media only screen and (max-width : 768px) {
	/*-----------------------
スマホ・タブレット用レイアウト（768px以下スクリーン）
----------------------*/

	/*------------------
共通設定(スマホ)
-------------------*/

	/* はみ出した領域は非表示にする*/
	html {
		overflow-y: scroll;
		overflow-x: hidden;
	}

	html,
	body {
		width: 100%;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	/*画像サイズの調整*/
	img {
		height: auto;
		max-width: 100%;
	}

	/*H2タグ*/
	h2 {
		margin: 0.5em 0 0.5em;
		font-size: 1.5em;
		font-weight: bold;
		text-align: center;
	}

	/*H3タグ*/
	h3 {

		margin: 0em;
		padding: 0.5em 0em 0em;
		font-size: 1.3em;
		font-weight: bold;
	}

	/*--------------------------------------------------------
全体レイアウト/背景設定(スマホ・タブレット)
--------------------------------------------------------*/

	/*全体エリア(全体背景の設定はここ)*/
	.main {
		background-color: #fff;
	}

	/*記事(ボディ)エリア*/
	.article {
		background-color: #fff;
		/*スマホの場合はカラムの線を消す*/
		border-left: none;
		border-right: none;
	}

	/*記事(ボディ)エリアの行間*/
	.article p {
		line-height: 1.8em;
	}

	/*記事(ボディ)エリアのフォントサイズ*/
	.article {
		font-size: 1.6em;
	}

	/*カラム全体の幅はスマホの場合固定*/
	.header_inr,
	.article,
	.top_image_in,
	.atcl_inr {
		width: 100%;
		margin: 0 auto
	}

	/*PC画面とスマホ画面の切り替え*/

	.gamen_pc {
		display: none;
	}

	.gamen_rps {
		display: block;
	}

	/*--------------------------------------------------------
上部固定ヘッダー設定
--------------------------------------------------------*/

	/*上部固定ヘッダー全体*/
	.header {
		position: -webkit-sticky;
		top: 0;
		background-color: #fff;
		border-bottom: 1px;
		overflow: auto;
	}

	/*ヘッダーロゴ*/
	.header_logo {
		float: left;
		width: 50%;
		margin-top: 2px;
		margin-left: 0px;
	}

	/*ヘッダー 電話ボタン*/
	.header_tel {
		width: 45%;
		float: right;
		margin: 0.9em 0.5em 0em;
	}

	/*ヘッダー内の画像はエリア幅に合わせる*/
	.header_logo img,
	.header_tel img,
	.header_mail img {
		height: 100%;
	}

	.header_tel_text img {
		width: 20%;
	}

	/*-----------------------------
ファーストビュー設定
-----------------------------*/

	.top_image {
		background: url(../images/haikei_repair_FV.png) center no-repeat #fff;
		height: auto;
	}

	.top_image_in img {
		width: 100%;
	}

	/* --------------------------
セクション設定
----------------------------*/
	.repair_img_mds {
		text-align: center;
	}

	.repair_img_mds img {
		width: 40%;
	}

	/*----------
CVエリア
---------*/
	.repair_cv_area {
		background-color: #2f3f8d;
	}

	.repair_cv_area_inr {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		background-color: #fff;
		border-radius: 20px;
		/* 角を丸くする */
		padding: 0em 0.5em;
	}

	.repair_cv_area_inr img {
		width: 100%;
	}

	.btn_area {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.btn_area img {
		width: 100%;
	}

	/*----------
悩みエリア
---------*/
	.nayami_h2mds {
		position: relative;
		display: inline-block;
		padding: 0 55px;
	}

	.nayami_h2mds:before,
	.nayami_h2mds:after {
		content: '';
		position: absolute;
		top: 50%;
		display: inline-block;
		width: 45px;
		height: 2px;
		border-top: solid 3px #2E3F8D;
		border-bottom: solid 3px #2E3F8D;
	}

	.nayami_h2mds:before {
		left: 0;
	}

	.nayami_h2mds:after {
		right: 0;
	}

	.repair_higai_cntnr {
		background-color: #48453D;
		display: flex;
		justify-content: center;
		gap: 20px;

	}

	.repair_higai_cntnr img {
		width: 28%;
	}

	.repair_higai_cntnr {
		background-color: #48453D;
		display: flex;
		justify-content: center;
		gap: 20px;
		position: relative;
		/* これを追加して矢印を位置調整できるようにする */
	}

	.repair_higai_cntnr::after {
		content: "";
		position: absolute;
		bottom: -30px;
		/* セクションの間にちょっと余白を加える */
		left: 50%;
		transform: translateX(-50%);
		/* 水平方向の中央揃え */
		width: 0;
		height: 0;
		border-left: 150px solid transparent;
		border-right: 150px solid transparent;
		border-top: 30px solid #48453D;
		/* 背景色と同じ色を指定 */
	}


	/*----------
特徴エリア
---------*/

	.repair_tokutyou_cntnr,
	.repair_tokutyou_cntnr2 {
		max-width: 900px;
		background-color: #fffdef;
		border: 2px solid #ccc;
		margin: 0 auto;
		padding-bottom: 1em;
		margin-bottom: 2em;
	}

	.repair_tokutyou_cntnr {
		text-align: center;
		margin-left: 1.3em;
		margin-right: 1.3em;
	}

	.repair_tokutyou_cntnr img,
	.repair_tokutyou_cntnr2_mds img {
		width: 100%;
	}

	.repair_tokutyou_cntnr_img {
		padding: 0em 1.5em 1em;
	}

	.repair_tokutyou_cntnr_text {
		text-align: left;
		padding: 0em 1em;
	}

	/*----------
安心エリア
---------*/
	.repair_ansin_area_inr {
		border: 12px solid #A8D6F3;
	}

	.repair_ansin_cntnr {
		grid-template-columns: 1fr;
		/* 1列に変更 */
	}

	.repair_ansin_cntnr img {
		width: 100%;
		/* グリッド内で自動調整されるので100% */
		height: auto;
	}

	/*----------
料金エリア
---------*/
	.repair_price_area_inr {
		border: 9px solid #F6C701;

	}


	.repair_price_meyasu {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		gap: 0px;
		/* 画像の間隔 */
		max-width: 100%;
		/* はみ出し防止 */
		overflow: hidden;
	}

	.repair_price_meyasu img:first-child {
		max-width: 300px;
		/* 1つ目の画像のサイズ指定 */
	}

	.repair_price_meyasu img:last-child {
		max-width: 450px;
		/* 1つ目の画像のサイズ指定 */
	}

	.ripair_price_mds {
		text-align: center;
		margin: 1em 0em 0em;
		color: #fff;
		font-size: 1.3em;
	}


	.repair_price_cntnr {
		display: grid;
		grid-template-columns: 1fr;
		/* 1列に変更 */
		/* 2列にする */
		gap: 10px;
		/* 画像間の余白（必要なら調整） */
		padding: 1em;
	}

	.repair_price_cntnr img {
		width: 100%;
		/* グリッド内で自動調整されるので100% */
		height: auto;
	}

	.price_mds img {
		width: 80%;
	}

	.repair_price_img_area {
		display: flex;
		justify-content: center;
		flex-flow: row wrap;
	}

	.repair_price_img_area img {
		width: 48%;
	}


	/*----------
流れエリア
---------*/
	/* 親要素の横並び設定 */
	.repair_nagare_cntnr {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		max-width: 750px;
		margin: 0 auto;
		margin-bottom: 1em;
		border: 2px solid #2F3F8D;
		border-left: 6px solid #2F3F8D;
		border-right: 6px solid #2F3F8D;


	}

	.nagare_img,
	.nagare_text {
		width: 100%;
		/* 両方の要素を 50% に設定 */
	}

	/* nagare_text 内で「1」とh3が横並び */
	.nagare_text {
		display: flex;
		flex-direction: column;
		padding: 1.5em 1em 0.5em;
	}

	.nagare_text:before {
		left: 0.35em;
		/* 番号の位置調整 */
		top: 15px;
		box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
		border-bottom: solid 2px #4967b4;
		font-size: 24px;
		/* 文字サイズ */
	}

	/* 見出しのスタイル */
	.nagare_text h3 {
		position: relative;
		color: #2F3F8D;
		padding: 2px 5px 2px 20px;
		font-size: 20px;
		margin-left: 20px;
		/* 番号とh3の間隔 */
		display: flex;
		align-items: center;
	}





	.nagare_img {
		display: block;
		text-align: center;
		margin: 0 auto;
		max-width: 250px;
	}

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


	/* pタグのスタイル */
	.nagare_text p {
		padding-top: 1em;
	}




	.repair_nagare_kaisetu {
		margin: 0 auto;
		max-width: 700px;
	}

	.repair_nagare_textarea img {
		width: 40%;
		height: auto;
	}

	.repair_nagare_mms {
		text-align: center;
		padding: 0em;
	}

	.repair_nagare_mms img {
		width: 100%;
	}







	/*よくある質問(文章ver.)*/
	.box_qa {
		background-color: #efefef;
		padding: 1em;
	}

	.box_qa_q {
		background-color: #fff;
		padding: 0.2em 0.8em 0.5em 0.5em;
		border-bottom: 1px solid #ccc;
		font-size: 1em;
		font-weight: bold;
		color: #CD3B3E;
	}

	.box_qa_a {
		background-color: #fff;
		padding: 0.5em 1em;
		line-height: 1.8;
	}

	.box_qa_q p {
		text-indent: -2em;
		margin-left: 2.5em;
	}

	.box_qa_a p {
		text-indent: -2em;
		margin-left: 2.3em;
		line-height: 1.7em
	}

	/*よくある質問(アコーディオンver.)*/



	/*問い合わせエリア*/

	.box_entry {
		background-color: #125fa3;
		padding: 1em 1em;
	}

	.entry_inr {
		background-color: #fff;
		padding: 1em 1em;
	}

	.entry_tel {
		width: 100%;
		float: none;
		margin-top: 0.5em;
	}

	.entry_mail {
		width: 100%;
		float: none;
		margin-top: 0.5em;
	}

	/*フォームエリア*/

	/*全体*/
	.mailform {
		background-color: #fff;
		margin: 0em 0em 1em;
		padding: 1em 0em 1.5em;
		box-shadow: 0px 0px 1px #594a42;
	}

	.input {
		margin: 0em 0em 0em;
		padding: 0em 2em;
		font-color: #000;
	}

	.input_style {
		width: 100%;
		height: 60px;
		font-size: 100%;
		margin-bottom: 0.5em;
		text-align: center;
		color: #7b7b7b;
	}

	input[type="image"] {
		width: 100%;
		text-align: center;
		margin: 0em auto;
	}

	.caution {
		margin: 0em;
		padding: 0;
		font-size: 90%;
		color: #990000;
		text-align: center;
	}

	/*スライダー*/
	.loopSliderWrap {
		top: 0;
		left: 0;
		height: 200px;
		overflow: hidden;
		position: absolute;
	}

	.loopSlider {
		margin: 0 auto;
		width: 100%;
		height: 200px;
		text-align: left;
		position: relative;
		overflow: hidden;
	}

	.loopSlider ul {
		height: 200px;
		float: left;
		overflow: hidden;
	}

	.loopSlider ul li {
		width: 250px;
		height: 200px;
		float: left;
		display: inline;
		overflow: hidden;
	}

	.loopSlider ul li img {
		width: 100%;
	}

	/*-----------------------------------------------------------------------------------------------------
フッター部分
-----------------------------------------------------------------------------------------------------*/

	.footer {
		padding: 2em 0em 2em;
		font-size: 1em;
	}


}