/*
Theme Name: TOCHAN2025
Description: Bootstrap4ベースの超軽量テーマ
Version: 1.0
Author: You

    :root { --navH: 56px; } /* モバイルのナビ高さ *

*/
 /* 共通  */   
.text-white{color:white;}


/* モバイルのナビ高さ  */   
  :root { --navH: 80px; }

	.bg-whitenoise{
	background:
	url('images/paper-fibers.png'),
	#fff;
	background-repeat: repeat;
	}
		
	.bg-deepbluenoise{
	background:
	url('images/contentback-deepblue.jpg'),
	#00369e;
	background-repeat: repeat;
	}
		
	.bg-bluenoise{
	background: url("images/contentback-lightblue.jpg"), #ffffff00;
	background-repeat: repeat;
	}	
	  
	.nav-box{padding: 5px 30px 5px 30px !important;}
	.ml-15pst{margin-left:15%;}
	.mt-10pst{margin-top: 10%}
	.mt-15pst{margin-top: 15%}
	.mt-20pst{margin-top: 20%}

    /* ====== モバイル用ナビを固定表示 ====== */
    .navbar-mobile {
      position: fixed;  /* = fixed-top 相当 */
      top: 0; left: 0; right: 0;
      z-index: 1030;    /* Bootstrap既定のナビz-index */
    }
    /* ====== モバイル用ナビを固定表示 ====== */
    .navbar-pc {
      position: fixed;  /* = fixed-top 相当 */
      top: 0; left: 0; right: 0;
      z-index: 1030;    /* Bootstrap既定のナビz-index */
    }
    /* 本文がナビに隠れないよう余白を追加（モバイルのみ） */
    body { padding-top: var(--navH); }
    @media (min-width: 992px) {
      :root { --navH: 0px; }
      body { padding-top: 105px; }
    }

    /* ====== Offcanvas（右スライド） ====== */
    .sidebar {
      position: fixed;
      top: var(--navH);                /* ナビの下から */
      right: -100%;                   /* 初期は画面外 */
      width: 100%;
      height: 100%;/* ナビ分を除く */
      transition: right .3s ease;
      padding-top: 16px;               /* 内側の上余白（お好みで） */
      z-index: 1050;                   /* ナビより上、オーバーレイより上 */
    }
    .sidebar.active { right: 0; top:0;}

    .sidebar a {
      display: block;
      color: #333;                     /* 既存指定を尊重（白文字） */
      text-decoration: none;
      padding: 8px 18px;
    }
    .sidebar a:hover { background: #b8dbff; }

    /* 閉じるボタン */
    .sidebar .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      color: #333;
      cursor: pointer;
    }

    /* オーバーレイ：ナビの下から、ナビより下のz-indexに */
    .overlay {
      position: fixed;
      top: var(--navH); left: 0; right: 0;
      height: calc(100% - var(--navH));
      background: rgba(0,0,0,.5);
      display: none;
      z-index: 1020; /* ナビ(1030)より下 */
    }
    .overlay.active { display: block; }

    body.no-scroll { overflow: hidden; }

    /* PC(≥lg)では offcanvas を無効化して常設ナビへ */
    @media (min-width: 992px) {
      .sidebar, .overlay { display: none !important; }
    }

	  
  /* 見出しの下線 */
    .section-title {
      border-bottom: 3px solid #1f4f94;
      padding-bottom: .4rem;
      font-weight: 700;
    }
    /* パック枠（カード風） */
    .pack-card {
      border: 2px solid cadetblue;
      border-radius: .5rem;
      overflow: hidden;
    }
    .pack-header {
      background:cadetblue;
      color:#fff;
      font-weight:700;
      padding:.75rem 1rem;
    }
    /* 価格帯（黄色帯） */
    .price-ribbon {
		width: 300px;
		text-align: center;
		background:royalblue;
		color: white;
		display:inline-block;
		padding:.25rem .75rem;
		border-radius:.25rem;
		font-weight:700;
		font-size:2rem;      /* 21,000 を強調 */
		line-height:1.1;
    }
    .price-ribbon small {
      font-size:.9rem;
      font-weight:400;
    }
    /* 左の小イラスト */
    .truck-mini {
      max-width:300px;
    }
    /* 右側の実写画像の角丸 */
    .photo {
      border:1px solid #ddd;
      border-radius:.5rem;
    }
    /* 小さめ注釈 */
    .note {
      font-size:.9rem;
      color:#555;
    }
	  

.notice-section{
    background:cadetblue;
    border-radius:10px;      /* 外側の角丸 */
    position:relative;
    padding:1.5rem;            /* 内容の余白 */
    overflow:hidden;         /* 角丸に合わせて内側の点線もクリップ */
  }
  /* 内側に入った点線（ここがポイント） */
  .notice-section::before{
    content:"";
    position:absolute;
    top:12px;                /* ← この値を変えると「内側へ入る量」を調整できます */
    right:12px;
    bottom:12px;
    left:12px;
    border:2px dashed #fff;  /* 点線 */
    border-radius:10px;      /* 内側用の角丸（外側より少し小さめ） */
    pointer-events:none;     /* クリック邪魔しない */
    z-index:0;               /* 背面に配置 */
  }
  /* 内容は前面に */
  .notice-section > *{
    position:relative;
    z-index:1;
  }
    .notice-title {
      font-weight: 700;
      font-size: 1.3rem;
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .item-box {
      background: #fff;
      border-radius: .5rem;
      border: 1px solid #ccc;
      padding: 0.25rem;
      text-align: center;
      margin-bottom: 1rem;
    }
    .item-box img {
      max-height: 48px;
      margin-bottom: .5rem;
    }
    .note {
      font-size: .9rem;
      color: #333;
    }	  
.btn-service {
  flex-direction: column; /* 見出しと説明を縦並び */
  justify-content: center;
  align-items: flex-start;
  background: royalblue; /*  */
  color: #fff;
  border-radius: 8px;
  text-align: left;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.btn-service:hover {
  background: cadetblue;
  color: #fff;
  text-decoration: none;
}

/* 見出し部分 */
.btn-service .title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}


/* 矢印アイコン（右端の白丸） */
.btn-service .arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color:royalblue;
/*  color:darkorange;royalblue*/
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  transition: transform 0.3s;
}
.btn-service:hover .arrow {
  transform: translateY(-50%) translateX(3px);
}	 
	  
	  
/* ====== Tokuken Footer Block ====== */
.tk-footer {
  color: #fff;
  padding: 2rem 2rem 1.5rem;
}
.tk-footer a { color: #fff; }
.tk-footer .brand h1 {
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}
.tk-footer .tel {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1.1;
  margin: .25rem 0 1rem;
}
.tk-footer .tel .circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff; color: #2257a6;
  margin-right: .4rem; font-size: 1.1rem;
}
.tk-footer .addr, .tk-footer .zip { opacity: .95; }

/* 右カラムの上部ナビ（区切り | ） */
.tk-topnav {
  font-size: .95rem;
  margin-bottom: .75rem;
  opacity: .95;
}
.tk-topnav a { text-decoration: none; }
.tk-topnav .sep { opacity: .6; margin: 0 .35rem; }

/* 地図枠（ダミー or GoogleMap iframeに差し替え可） */
.tk-map {
  background: #fff;
  color: #333;
  border-radius: 4px;
  min-height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .5rem 0 1rem;
}

/* 右下のボタン群 */
.tk-actions { text-align: right; }
.btn-line {
  background: #fff; color: #222;
  border: 2px solid #2b2b2b;
  border-radius: 8px; padding: .25rem .6rem;
  font-weight: 700;
}


/* コピーライト */
.tk-copy { opacity: .9; font-weight: 700; }

/* --- Responsive --- */
@media (max-width: 767.98px){
  .tk-footer { padding: 1.25rem; }
  .tk-footer .tel { font-size: 1.7rem; }
  .tk-topnav { white-space: normal; line-height: 1.6; }
  .tk-actions { text-align: left; }
}	  
	  
  .contact-bar{
    position: fixed;
    left:0; right:0; bottom:0;
    background:#f8f9fa;
    box-shadow:0 -2px 10px rgba(0,0,0,.12);
    z-index:1030;
  }
  .contact-title{
    text-align:center; font-weight:700; font-size:14px;
    padding:6px 0; background:#343a40; color:#fff;
  }
  .contact-items{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr; /* 電話を大きく */
    gap:2px; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }

  .contact-item{
    border-radius:6px;
    color:#fff; font-weight:600; text-decoration:none;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:6px;
    text-align:center;
  }
  .contact-item svg{ width:24px; height:24px; fill:currentColor; }
  .contact-item.tel{
    background:#0057b7;
    flex-direction:row;
    justify-content:flex-start;
  }
  .contact-item.tel .icon-wrap{
    margin-right:8px;
    display:flex; align-items:center; justify-content:center;
  }
  .contact-item.tel .text-wrap{
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .contact-item.tel .main-text{
    font-size:16px; font-weight:700; line-height:1.2;
  }
  .contact-item.tel .sub-text{
    font-size:12px; font-weight:400; line-height:1.2;
  }

  .contact-item.mail{ background:#f0c000; color:#000; }
  .contact-item.line{ background:#06C755; }

  .contact-item:hover{ opacity:.9; text-decoration:none; }

  body{ padding-bottom:120px; }
  @media(min-width:992px){
    .contact-bar{display:none;}
    body{padding-bottom:0;}
  }	 
	  
/* ===== CTA パネル ===== */
.cta-panel{
  /* 背景（お手元のノイズ画像URLに差し替えOK） */
  --bg:url('images/footer-comon-bg.png'); /* 仮 */
  background: var(--bg) center/cover no-repeat #5b6a95; /* 画像が無い時の色 */
  color:#fff;
  border-radius:16px;
  padding: 2.2rem 1.6rem;
  position: relative;
}
.cta-panel .lead-title{
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
  font-size:1.6rem;
}
.cta-panel .sub{
  text-align:center;
  opacity:.95;
  margin-top:.5rem;
}

/* ボタンカード */
.cta-card{
  display:flex; align-items:center;
  background:#eef2f5;
  border-radius:12px;
  padding:.9rem 1rem;
  color:#000;
  text-decoration:none !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-card:hover{ transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.18); }

/* アイコン丸 */
.cta-ico{
  width:44px; height:44px; min-width:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff;          /* 電話は黒円×白受話器 */
  margin-right:.75rem; font-size:1.1rem;
}
.cta-ico.mail{
  background:#fff; color:#2b66e5;       /* メールは白円×青封筒 */
  border:2px solid #2b66e5;
}

/* 電話の太字番号＆説明 */
.cta-txt strong{ font-size:1.9rem; font-weight:800; line-height:1; display:block; }
.cta-note{ font-size:.9rem; color:#333; }

/* レスポンシブ */
@media (max-width: 767.98px){
  .cta-panel{ padding: 1.6rem 1rem; }
  .cta-panel .lead-title{ font-size:1.25rem; }
  .cta-txt strong{ font-size:1.5rem; }
}
	  
    /* ===== 共通 ===== */
    .shadow-soft { box-shadow: 0 8px 20px rgba(0,0,0,.15); }
    .rounded-2xl { border-radius: 1rem; }
    .btn-pill { border-radius: 999px; }
    .fw-900 { font-weight: 900; }

    /* ===== ヒーロー ===== */
    .hero-card{
      position: relative;
      overflow: hidden;
      min-height: 400px;
      background: #fff;
    }
    .hero-media{
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      filter: saturate(1.05);
    }
    /* フチの内側に影 */
    .hero-card::after{
      content:""; position:absolute; inset:0;
      box-shadow: inset 0 0 0 0px rgba(0,0,0,.05);
      pointer-events:none; border-radius: 1rem;
    }
    /* タイトル帯 */
    .hero-title{
      position: absolute; left: 1rem; right: 9rem; top: 1rem;
      color:#0b5aa2; text-shadow: 0 2px 0 rgba(255,255,255,.7);
    }
    .hero-title h1{
      font-size: 2.2rem; line-height:1.15; font-weight: 900;
    }
    @media (min-width: 992px){
      .hero-title h1{ font-size: 2.7rem; }
    }

    /* CTA */
    .hero-cta{
      position:absolute; right: 1rem; bottom: 1rem;
    }


    /* ===== ミニカード ===== */
    .mini-card .card{
      border:0; border-radius: 1rem;
    }
    .mini-card .card-img-top{
      height: 150px; object-fit: cover;
      border-top-left-radius: 1rem; border-top-right-radius: 1rem;
    }
    .mini-card .caption{
      font-size: .85rem; color:#333; line-height:1.3;
    }

    /* ===== 右側の「得意なお仕事一覧」バナー ===== */
    .side-banner{
      background: royalblue; color:#fff;
      padding: 1.25rem; position: relative;
      min-height: 250px;width: 100%;
    }
    .side-banner .title{
      font-size: 2rem; font-weight: 900; line-height:1.15;
      text-shadow: 0 2px 0 rgba(0,0,0,.25);
    }
    .side-banner .sub{
      font-size: 1.75rem; font-weight: 900; line-height:1.15;
    }
    .side-banner .mascot{
      position: absolute; right: .5rem; bottom: .5rem;
      width: 120px; height: auto; object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
    }
    .side-banner .btn{
      position: absolute; left: 1.25rem; bottom: 1.25rem;
    }
	  
  .mr-6{margin-right:3.5rem} 
  .box-hover:hover{background-color:cadetblue}


	/*パンくずリスト消す*/
	.breadcrumb,
	.breadcrumbs,
	#breadcrumb,
	#breadcrumbs,
	#header{
	display: none !important;
	}

	
/*パンくずリスト消す*/
  .dropdown { position: relative; display: inline-block; }
  .dropdown-btn {
    padding: .6rem .9rem; border: none;
    background-color: #ffffff00; cursor:pointer;
    border-radius: .5rem; line-height:1; color: rgba(0, 0, 0, .5);
  }
  .dropdown-btn:focus { outline: 2px solid #4c9ffe; outline-offset:2px; }
  .dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px;
    background: #fff; border: 1px solid #ddd; border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: .4rem 0; list-style: none; margin: 0;
    display: none; z-index: 1000;
  }
  .dropdown-menu.show { display: block; }
  .dropdown-item {
    display: block; padding: .55rem .9rem; text-decoration: none; color: #222; font-size: 14px;
  }
  .dropdown-item:hover, .dropdown-item:focus { background: #f5f5f7; outline: none; }

.bg-primary {
    background-color: cadetblue!important;
}

.service-page-titleback{
	background-color:#1f219e; color:#fff; font-weight:bold; border-radius:3px;margin-left: -20px;z-index: 99
}

.service-price-box{
    background-color: cadetblue;
    border: 2px dotted cadetblue;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.service-price-arrow{
		background-color: #1c4594; width: 28px; height: 28px; line-height: 28px;
}

.permitbox{
	background-color:cadetblue; color:#fff; font-weight:bold; border-radius:3px;
}