@charset "utf-8";
/*
Theme Name: ダイキンストアー.COM new
*/
@charset "utf-8";
/*
Theme Name: ダイキンストアー.COM new
*/
@charset "UTF-8";
/* =======================================================
   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;
  }
  #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;
  }

  #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;
  }
  #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;
  }
  #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;
    }
}