@charset "utf-8";
/*
Theme Name: 日立エアコン修理・販売専門サイト『日立ストア―.COM』
*/
/* =======================================================
 PC表示時（1001px以上）のみスマホ用メニューを隠す
======================================================= */
@media screen and (min-width: 1001px) {
 .sp-menu-btn,
 .sp-nav-wrap {
  display: none !important;
 }
}

/* =======================================================
 スマホ・レスポンシブ対応（1000px以下）
======================================================= */
@media screen and (max-width: 1000px) {
 /* --- 【強制リセット】すべてのはみ出しを絶対に防ぐ --- */
 html,
 body,
 #wrapper,
 #contentsWrapper,
 #main,
 #side,
 .inner {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
 }
 .inner {
  padding: 0 15px !important;
 }
 * {
  max-width: 100% !important;
  box-sizing: border-box !important;
 }
 img,
 iframe,
 video,
 table {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
 }
 .fL,
 .fR,
 .alignleft,
 .alignright {
  float: none !important;
 }

 /* --- ヘッダー・ナビ：PC版を隠してスマホ版を出す --- */
 #gHeader .headerRight,
 #gNav {
  display: none !important;
 }
 #gHeader .headerLeft {
  width: 100% !important;
  margin-top: 10px !important;
 }
 #gHeader .seoTxt {
  text-align: left;
 }
 #gHeader .logo img {
  max-width: 240px !important;
 }

 /* --- ハンバーガーボタンと全画面メニュー（最強仕様） --- */
 .sp-menu-btn {
  display: block !important;
  position: fixed !important;
  top: 20px !important;
  right: 15px !important;
  width: 35px !important;
  height: 25px !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
 }
 .sp-menu-btn span {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: #0e4a66; /* テーマのベースカラー（紺） */
  border-radius: 2px;
  transition: 0.3s;
 }
 .sp-menu-btn.open span {
  background: #ffffff !important;
 }
 .sp-menu-btn span:nth-child(1) {
  top: 0;
 }
 .sp-menu-btn span:nth-child(2) {
  top: 11px;
 }
 .sp-menu-btn span:nth-child(3) {
  top: 22px;
 }
 .sp-menu-btn.open span:nth-child(1) {
  transform: translateY(11px) rotate(-45deg);
 }
 .sp-menu-btn.open span:nth-child(2) {
  opacity: 0;
 }
 .sp-menu-btn.open span:nth-child(3) {
  transform: translateY(-11px) rotate(45deg);
 }

 .sp-nav-wrap {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(14, 74, 102, 0.95) !important;
  z-index: 99998 !important;
  padding: 80px 0 20px !important;
  overflow-y: auto !important;
 }
 .sp-gNav ul {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
 }
 .sp-gNav ul li {
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  margin: 0 !important;
  padding: 0 !important;
 }
 .sp-gNav ul li::before,
 .sp-gNav ul li::after {
  display: none !important;
 }
 .sp-nav-wrap a,
 .sp-gNav ul li a {
  display: block !important;
  padding: 20px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 18px !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 100% !important;
  text-shadow: none !important;
 }

 /* --- メインコンテンツ・サイドバー（スマホではメインが上、サイドが下） --- */
 #contentsWrapper {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
 }
 #main {
  width: 100% !important;
  padding-bottom: 30px !important;
  order: 1 !important;
  float: none !important;
 }
 #side {
  width: 100% !important;
  position: static !important;
  order: 2 !important;
  padding-bottom: 30px !important;
  float: none !important;
  margin: 0 auto !important;
 }
 .sideBnr {
  text-align: center;
 }
 #side .sideBnrLeft,
 #side .sideBnrRight {
  display: none !important;
 } /* はみ出るサイドバナーはスマホでは非表示 */
 #side .sideSale {
  width: 100% !important;
 }

 /* --- 各コンテンツのレスポンシブ化 --- */
 #mainImg {
  padding: 0 !important;
 }
 #mainImg img {
  margin: 0 auto !important;
  display: block;
  max-width: 100%;
 }

 #main .cvArea {
  padding: 15px !important;
  background-size: cover;
 }
 #main .cvArea .list .item {
  float: none !important;
  width: 100% !important;
  text-align: center;
  margin-bottom: 10px;
 }
 #main .cvArea .list .item:last-child {
  margin-bottom: 0;
 }
 #main .cvArea .list .tel,
 #main .cvArea .list .sp {
  margin-right: 0 !important;
 }
 #main .cvArea .list .item img {
  max-width: 100%;
  height: auto;
 }

 #seoArea {
  width: 100% !important;
  padding: 15px !important;
  border-width: 5px !important;
 }

 #secReadIn {
  padding: 15px !important;
 }
 #secReadIn .type01 .list {
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 #secReadIn .type01 .list li {
  text-align: center;
 }
 #secReadIn .type01 .list img {
  max-width: 100%;
  height: auto;
 }
	#secReadIn .type01 .list .item {
		margin: 0 auto;
	}
	
	.p-message-sec__contents {
		padding: 20px;
	}

 #secFeature .list {
  padding: 15px !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
 }
 #secFeature .list .item {
  width: 100% !important;
  margin: 0 !important;
  padding: 15px !important;
  float: none !important;
	     display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
 }
 #secFeature .list .item .img img {
  max-width: 100%;
  height: auto;
 }

 #secConsult .img {
  float: none !important;
  width: 100% !important;
  margin: 0 0 15px 0 !important;
  text-align: center;
 }

 .secFlow .list {
  padding: 15px !important;
 }
 .secFlow .list li {
  padding: 40px 15px 15px 15px !important;
  text-align: center;
 }
 .secFlow .list .listTit {
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%);
 }
 .secFlow .list .img {
  float: none !important;
  margin-top: 15px;
 }

 #secService .secList .list {
  display: flex;
  flex-direction: column;
  gap: 15px;
 }
 #secService .secList .list .item {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
 }

 .secRepairing .repairingContent {
  padding: 15px !important;
 }

 #secTrouble .secResolution .list {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 #secTrouble .secResolution .list .item {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
 }
	#secReadIn .type01 .list .item:last-child {
		margin: 0 auto!important;
	}
 #secTrouble .secResolution .list .item img {
  max-width: 100%;
  height: auto;
 }

 #secVoice .list {
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 #secVoice .list .item {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
 }
 #secVoice .list .item a {
  width: 100% !important;
 }

 #secOthers .list {
  width: 100% !important;
  flex-direction: column;
  gap: 15px;
 }
 #secOthers .list li {
  width: 100% !important;
  margin: 0 !important;
 }
 #secOthers .list li img {
  max-width: 100%;
  height: auto;
 }

 /* unique.css (Sale/Repair) */
 #sale #main,
 #repair #main {
  width: 100% !important;
  float: none !important;
 }
 #sale #side,
 #repair #side {
  padding-bottom: 30px !important;
 }
 #sale #main .item .areaTxt,
 #repair #main .item .areaTxt {
  float: none !important;
  width: 100% !important;
 }
 #sale #main .item .areaTxt .btns li,
 #repair #main .item .areaTxt .btns li {
  float: none !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
 }
 #sale #main .item .areaTxt .btns li a,
 #repair #main .item .areaTxt .btns li a {
  width: 100% !important;
 }

 /* ▼ 都道府県エリアのレスポンシブ化（3列グリッド） ▼ */
 #secArea {
  padding: 15px !important;
 }
 #secArea .listBlock > .item li {
  display: block;
  margin-bottom: 5px;
 }
 #secArea .listBlock > .item li + li::before {
  display: none;
 }
 #secArea .listPref {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
 }
 #secArea .listPref > .item {
  float: none !important;
  margin: 0 !important;
  width: 45%;
 }

 #secArea .listBlock {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
 }
 #secArea .listBlock > li {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 13px !important;
  text-align: center;
 }

 /* --- フッター --- */
 #fNav .list li {
  display: block !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #ccc;
 }
 #fNav .list li:before {
  display: none !important;
 }
 .fContents .footerLeft,
 .fContents .footerRight {
  float: none !important;
  width: 100% !important;
  text-align: center;
 }
 .fContents .footerRight .cf {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .fContents .tel {
  float: none !important;
  margin: 20px 0 !important;
 }
 .fContents .btn {
  float: none !important;
  margin: 0 !important;
 }
 .subNav {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
 }
 .subNav li {
  display: inline-block;
 }
 /* =======================================================
   お悩みトラブルボタンをGridでレスポンシブ化（2列タイル状）
  ======================================================= */
 #secTrouble .secResolution .list {
  display: grid !important;
  grid-template-columns: repeat(
   2,
   1fr
  ) !important; /* スマホでは均等な2列に並べる */
  gap: 10px !important; /* ボタン同士の隙間を10pxに設定 */
  width: 100% !important;
  padding: 0 15px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
 }

 #secTrouble .secResolution .list .item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: center !important; /* インラインで入っていた中央揃えもここで強制カバー */
 }

 #secTrouble .secResolution .list .item a {
  display: block !important;
  width: 100% !important;
 }

 #secTrouble .secResolution .list .item img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
 }
}