/* レスポンシブ対応
   PC（1001px以上）のレイアウトは変更せず、1000px以下だけを上書きする。
   各ページのCSSより後に読み込むこと（inc-header.php）。
  ================================================*/

/* PCでは非表示・無効 */
#sp-menu-btn,
#sp-nav{
	display: none;
}
a.tel-link{
	pointer-events: none;
}

@media screen and (max-width: 1000px){

	/* 1:ベース
	  ================================================*/
	body{
		min-width: 0;
		-webkit-text-size-adjust: 100%;
		overflow-wrap: break-word;
	}
	img,
	iframe,
	table{
		max-width: 100%;
	}
	img{
		height: auto;
	}
	a.tel-link{
		pointer-events: auto;
	}

	/* 2:ヘッダー
	  ================================================*/
	header{
		position: relative;
	}
	header #header-inner{
		width: auto;
		padding: 0 10px 8px;
		overflow: visible;
	}
	header #header-inner:after{
		content: "";
		display: block;
		clear: both;
	}
	header #header-inner #logo{
		float: none;
		max-width: calc(100% - 56px);
	}
	header #header-inner #logo h1{
		margin: 8px 0 4px;
	}
	header #header-inner h1 a{
		height: auto;
	}
	header #header-inner #header-info{
		margin: 0;
		text-align: center;
	}
	header #header-inner #header-info p,
	header #header-inner #header-info ul,
	header #header-inner .gnav{
		display: none;
	}
	header #header-inner #header-info div{
		float: none;
		margin: 0;
	}

	#sp-menu-btn{
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 11;
		width: 44px;
		height: 44px;
		padding: 11px 9px;
		border: 0;
		border-radius: 6px;
		background: #7fb32a;
		cursor: pointer;
	}
	#sp-menu-btn span{
		display: block;
		height: 3px;
		margin-bottom: 6px;
		border-radius: 2px;
		background: #fff;
		transition: transform .2s, opacity .2s;
	}
	#sp-menu-btn span:last-child{
		margin-bottom: 0;
	}
	#sp-menu-btn.is-open span:nth-child(1){
		transform: translateY(9px) rotate(45deg);
	}
	#sp-menu-btn.is-open span:nth-child(2){
		opacity: 0;
	}
	#sp-menu-btn.is-open span:nth-child(3){
		transform: translateY(-9px) rotate(-45deg);
	}

	#sp-nav.is-open{
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background: #fff;
		box-shadow: 0 6px 12px rgba(0,0,0,.25);
	}
	#sp-nav ul{
		margin: 0;
	}
	#sp-nav li{
		border-top: 1px solid #e1e3d6;
	}
	#sp-nav a{
		display: block;
		padding: 14px 16px;
		color: #40210f;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
	}

	/* パンくず */
	#page-nav{
		height: auto;
		background-color: #7fb32a;
	}
	#page-nav ul{
		width: auto;
		margin: 0;
		padding: 0 10px;
	}

	/* 3:本文（スマホではコンテンツを先、サイドバーを後に）
	  ================================================*/
	#wrap{
		width: auto;
		margin: 20px 0;
		padding: 0 10px;
	}
	main{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#content-area{
		order: 1;
		float: none;
		width: 100%;
		max-width: 637px;
		margin: 0;
	}
	#side-area{
		order: 2;
		float: none;
		margin-top: 30px;
	}
	.fb-page,
	.fb-page span,
	.fb-page iframe{
		max-width: 100% !important;
	}

	/* 4:フッター
	  ================================================*/
	footer{
		background: none; /* PCの高さ前提の画像のため、縦積みでは帯状に見える */
		border-top: 5px solid #e1e3d6;
	}
	footer #footer-inner,
	footer #footer-menu{
		width: auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	footer #footer-inner #footer-left{
		float: none;
		width: auto;
		text-align: center;
	}
	footer #footer-inner #footer-right{
		margin: 1em 0 0;
		text-align: center;
	}
	footer #footer-inner #footer-right .right-top,
	footer #footer-inner #footer-right .right-bottom,
	footer #footer-inner #footer-right .right-bottom div{
		float: none;
		margin-left: 0;
	}
	footer #footer-inner #footer-right .right-bottom ul{
		display: inline-block;
		vertical-align: top;
	}
	footer #footer-menu .lb,
	footer #footer-menu .rb{
		float: none;
		width: auto;
		margin: 0;
	}
	footer #footer-menu ul{
		margin: 0 0 4px;
	}
	footer #footer-menu ul li span{
		display: block;
		margin: 2px 0 0 18px;
	}
	footer #copyright p small{
		font-size: 11px;
	}
	#gotoTop{
		right: 12px;
		bottom: 12px;
	}

	/* 5:下層ページ共通（固定幅・段組みの解除）
	  ================================================*/
	#content-area div,
	#content-area p,
	#content-area ul:not(.bxslider),
	#content-area ol,
	#content-area dl,
	#content-area h2,
	#content-area h3,
	#content-area h4,
	#content-area article,
	#content-area section,
	#content-area form,
	#content-area table{
		max-width: 100%;
		box-sizing: border-box;
	}
	#content-area .twoColumn .left,
	#content-area .twoColumn .right{
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	#content-area input[type="text"],
	#content-area input[type="email"],
	#content-area input[type="tel"],
	#content-area textarea,
	#content-area select{
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 画像ボタン（スプライトを幅に合わせて縮小） */
	#content-area .local-btn01 a,
	#content-area .local-btn01 a:hover{
		width: 100%;
		max-width: 438px;
		height: auto;
		aspect-ratio: 438 / 80;
		background-size: 100% 200%;
	}
	#content-area .local-btn01 a:hover{
		background-position: 0 100%;
	}

	/* 品質保証バッジ */
	.local-block01 .icon02{
		top: -24px;
		width: 84px;
		height: 72px;
		background-size: contain;
	}

	/* 6:トップページ
	  ================================================*/
	#main-visual .inner{
		width: auto;
		background-image: none;
	}

	/* ビフォーアフター（トップ・施工実績 共通）：左右に並べて縮小 */
	#content-area #example .list + img.family{
		display: none;
	}
	#content-area #example .content{
		float: none;
		clear: both;
		margin: 0;
		padding: 15px 8px;
	}
	#content-area #example .top,
	#content-area #example .bottom,
	#content-area #example .bfaf-block{
		float: none;
		display: block;
		margin: 0 0 12px;
		background-size: 100% 100%;
	}
	#content-area #example .top:after,
	#content-area #example .bottom:after,
	#content-area #example .bfaf-block:after{
		content: "";
		display: block;
		clear: both;
	}
	#content-area #example .lb,
	#content-area #example .rb{
		width: 50%;
		margin-top: 4%;
	}
	#content-area #example p{
		font-size: 12px;
	}
	#content-area #example p.thumb img{
		display: block;
		width: 100%;
	}
	#content-area #example .top > img,
	#content-area #example .bottom > img,
	#content-area #example .bfaf-block > img{
		width: 32px;
		margin: -12px 0 0 -16px;
		z-index: 1;
	}

	/* 完成までの流れ（絶対配置 → グリッド） */
	#content-area #flow{
		height: auto;
		padding-bottom: 12px;
		background-color: #ece9c8;
	}
	#content-area #flow dl{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px 6px;
		width: auto;
		padding: 12px 8px 0;
	}
	#content-area #flow dl dt,
	#content-area #flow dl dd{
		position: static;
		text-align: center;
	}
	#content-area #flow dl dt{
		justify-self: center;
		margin-bottom: -28px;
	}
	#content-area #flow dl dt:after{
		content: none;
	}
	#content-area #flow dl dd{
		margin-top: 32px;
	}
	#content-area #flow dl .step1{ grid-area: 1 / 1; }
	#content-area #flow dl .step2{ grid-area: 1 / 2; }
	#content-area #flow dl .step3{ grid-area: 1 / 3; }
	#content-area #flow dl .step4{ grid-area: 2 / 1; }
	#content-area #flow dl .step5{ grid-area: 2 / 2; }

	/* 安田塗装店って？（写真の下に本文） */
	#content-area #about{
		height: auto;
		padding: 41.1% 0 15px;
		background-size: 100% auto;
		background-color: #e7e2b6;
	}
	#content-area #about h4{
		position: absolute;
		top: 2%;
		left: 2%;
		width: 37%;
		margin: 0;
	}
	#content-area #about h4 + img{
		position: static;
		display: block;
		margin: 10px auto 0;
	}
	#content-area #about .content{
		position: static;
		padding: 0 15px;
	}
	#content-area #about .content a{
		margin: 0;
	}

	/* 7:ページ固有
	  ================================================*/

	/* お問い合わせ：ラベルと入力欄を縦積み */
	.table01.form01,
	.table01.form01 tbody,
	.table01.form01 tr,
	.table01.form01 th,
	.table01.form01 td{
		display: block;
		width: auto;
	}
	.table01.form01 th{
		padding: 12px 0 4px 28px;
		background-position: 0 12px;
	}
	.table01.form01 .hissu th{
		background-position: 0 12px;
	}
	.table01.form01 td{
		padding: 4px 0 14px;
	}
	.form01 label{
		margin: 0 12px 0 4px;
	}
	.form01 textarea,
	.form01 .input-anther input,
	.form01 .input-anther input.mail{
		width: 100%;
		padding: 8px;
		font-size: 16px; /* iOSの入力時ズーム防止 */
	}
	.form01 .input-anther input[name="form3"]{
		width: calc(100% - 2em);
	}
	.form01 .input-anther input[name="form5"],
	.form01 .input-anther input[name="form6"],
	.form01 .input-anther input[name="form7"]{
		width: 28%;
	}

	/* 施工価格 */
	.estimate-price,
	.estimate-icon,
	.estimate-detail,
	.estimate-detail .name,
	.estimate-detail .formbox{
		display: block;
		width: auto;
	}
	.estimate-detail .formbox{
		margin-top: 6px;
		text-align: left;
	}

	/* 簡単外壁チェック：2列グリッド */
	.local-sp01 > ul{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 6px;
		margin: 0;
	}
	#content-area .local-sp01 li,
	#content-area .local-sp01 li.col2,
	#content-area .local-sp01 li.col2.right{
		float: none;
		width: auto;
		height: auto;
		text-align: center;
	}
	#content-area .local-sp01 li img,
	#content-area .local-sp01 li.col2 img,
	#content-area .local-sp01 li.col2.right img{
		position: static;
		padding: 0;
	}
	#content-area .local-sp01 li span,
	#content-area .local-sp01 li.col2 span,
	#content-area .local-sp01 li.col2.right span{
		position: relative;
		box-sizing: border-box;
		width: 100%;
		max-width: 150px;
		height: 75px;
		margin: -30px auto 0;
		background-size: 100% 100%;
	}
	.local-sp01 h2{
		margin-bottom: 20px;
	}

	/* 塗装サービス：効果パネル */
	.paint-effects.local-sp01{
		height: auto;
		padding: 15px;
		border-radius: 10px;
		background: #81c357;
	}
	.paint-effects .list-block{
		display: flex;
		align-items: center;
		float: none;
		width: auto;
		margin: 0 0 12px;
	}
	#content-area .paint-effects .list-block .ph{
		flex: 0 0 45%;
		margin: 0 12px 0 0;
	}

	/* 完成までの流れ：背景のタイムラインは本文の高さに追従しないため外す */
	.flow-timeline{
		padding: 0;
		background: none;
	}
	#content-area .flow-timeline .left{
		margin-bottom: 8px;
		text-align: center;
	}
	#content-area{
		counter-reset: flow-step;
	}
	.flow-steps > h3{
		counter-increment: flow-step;
	}
	.flow-steps > h3:before{
		content: "STEP " counter(flow-step);
		display: block;
		width: fit-content;
		margin-bottom: 6px;
		padding: 2px 12px;
		border-radius: 12px;
		background: #d7261e;
		color: #fff;
		font-size: 12px;
		line-height: 1.5;
	}

	/* カラーシミュレーション：背景画像に合わせて比率で配置 */
	.simulation-bg{
		width: 100%;
		height: 0;
		padding-bottom: 70.6%;
		background-size: 100% auto;
		background-position: center top;
		font-size: 11px;
	}
	.simulation-bg p.text1{
		top: 1%;
		right: 0;
		width: 38%;
	}
	.simulation-bg p.text2{
		top: 55%;
		left: 6%;
		width: 40%;
	}
	.simulation-bg p.text3{
		top: 55%;
		right: 0;
		width: 40%;
	}
}