/* ===== 共通 ===== */
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body, html { margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; color: #232323; }
a { text-decoration: none; color: #232323; }
a:hover { opacity: .7; }
img { max-width: 100%; }

/* セクションタイトル */
.section-title {
  justify-content: center;
  text-align: center;
  color: #0099FF;
  font-size: 40px;
  border-bottom: 10px solid #82da76;
  margin: 0 auto 70px;
  width: 320px;
}
@media (max-width: 768px) { .section-title { font-size: 33px; } }

/* アンカー位置ズレ防止 */
a.jump_point { height: 1px; display: block; padding-top: 40px; margin-top: -40px; }

/* ===== ヘッダーナビ ===== */
.nav { width: 97%; max-width: 100%; margin: 0 auto; text-align: center; display: flex; }
.nav-container {
  display: flex; position: fixed; z-index: 2; justify-content: space-between;
  background-color: #e8f5e9; border-radius: 10px; align-items: center;
  height: 70px; width: 97%; max-width: 100%; top: 10px; padding: 0 18px;
  box-shadow: 3px 3px rgba(0,0,0,.5);
}
.menu_logo { display: flex; align-items: center; }
.menu_logo div { width: 200px; }
.menu_logo img { width: 50px; height: auto; }
.menu_logo p { font-family: "Nico Moji"; margin-left: 10px; font-size: 33px; }

ul { list-style: none; padding: 0; display: flex; text-align: right; }
.hamburger-menu { display: flex; }
.hamburger-menu-list-group li { margin-left: 12px; font-size: 16px; }
.hamburger-menu a { position: relative; }

/* hover下線（PCのみ） */
@media (min-width: 769px) {
  .hamburger-menu-list-group a::after {
    position: absolute; left: 0; content: ''; width: 100%; height: 2px;
    background: #fff; bottom: -1px; visibility: hidden;
  }
  .nav a:hover::after { visibility: visible; }
}

/* ハンバーガー */
.hamburger-button { width: 4.75rem; height: 4rem; font-size: 3.125rem; display: flex; align-items: center; justify-content: center; }
.hamburger-button i { line-height: 0; }
@media (min-width: 769px) { .hamburger-button { display: none; } }
@media (max-width: 768px) {
  .hamburger-menu {
    position: fixed; top: 5rem; right: -100%; width: 100%; height: calc(100vh - 5rem);
    background-color: #fff; transition: transform .6s; transform: translateX(0);
  }
  .hamburger-menu-list-group { display: table; width: 100vw; font-size: 1.875rem; border-top: .0625rem solid #000; }
  .hamburger-menu-list-group a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.72rem 2rem; line-height: 1; border-bottom: .0625rem solid #000;
  }
  .hamburger-menu-list-group li:nth-child(4) a,
  .hamburger-menu-list-group li:nth-child(5) a { padding: 1.5rem 2rem 1.95rem; }
  .hamburger-menu-list-group li:nth-child(4) a::after,
  .hamburger-menu-list-group li:nth-child(5) a::after { padding-top: .25rem; }
  .hamburger-menu-active { transform: translateX(-100%); }
}

/* ===== メイン ===== */
.cover-container { display: flex; flex-direction: column; }
.cover-slick { position: relative; }
.cover-slick-item img { margin: 84px auto 0; max-width: 100%; height: auto; }

.cover_visual {
  background-color: rgba(255,255,255,.5); padding: 14px; font-size: 20px;
  top: 600px; z-index: 1; position: absolute;
}
.cover_servise { font-size: 20px; font-weight: bold; z-index: 1; }

@media (max-width: 768px) {
  .cover-slick-item img { height: 300px; margin: 85px auto 0; }
  .cover_visual { font-size: 12px; top: 180px; position: absolute; }
  .cover_servise { font-size: 13px; }
}

.cover-box {
  background: #f7f7f7;
  margin: 0;
  padding: 50px 20px;
  text-align: center;
}

.cover-title {
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: bold;
  line-height: 1.6;
  color: #333;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cover-box { padding: 30px 15px; }
  .cover-title { font-size: 16px; width: 100%; text-align: center; }
}

.sp-br { display: none; }
@media (max-width: 768px) {
  .sp-br { display: inline; }
  .cover-title { display: inline-block; text-align: center; margin: 0 auto; }
}

/* ===== サービスの紹介 ===== */
.about { padding: 50px 0; background-color: #f3f3b8; margin-bottom: 30px; }
.about-box { width: 720px; max-width: 100%; margin: 0 auto; text-align: center; }
.about-container { text-align: left; }
.about-img { width: 250px; height: 250px; position: relative; }
.about-img img { width: 230px; height: 200px; }

.about-cotent { width: 500px; max-width: 100%; padding-left: 20px; box-sizing: border-box; }
.about-title .cover-title { font-size: 20px; margin: 0 0 16px; }
.about-item { margin: 0; }
.first-about, .second-about, .third-about { display: flex; }

@media (max-width: 768px) {
  .about-container { justify-content: center; }
  .first-about, .second-about, .third-about { flex-direction: column; justify-content: center; margin-bottom: 80px; }
  .about-img { margin: 0 auto; }
  .about-cotent { padding-right: 18px; }
}

/* ===== 不用品について ===== */
.dispose-box { display: flex; justify-content: center; padding: 0 80px 30px; }
@media (max-width: 768px) { .dispose-box { flex-direction: column; margin: 0 15px; padding: 0; } }
.dispose-group { margin: 0 auto; width: 780px; max-width: 100%; }
.dispose-group h3 { font-size: 30px; }
.dispose-image { margin: 20px auto 0 0; }
.dispose-image img { width: 400px; height: 250px; }

/* ===== お問い合わせ（共通バナー） ===== */
.contact-container { max-width: 100%; background: #f9fbe7; padding-top: 1.45rem; padding-bottom: 1.6rem; }
.contact-description { text-align: center; margin-bottom: 10px; }
.contact-item { display: flex; }
@media (max-width: 768px) { .contact-item { flex-direction: column; } }

/* telボタン */
.button-tel {
  display: flex; flex-direction: column; width: 17.5rem; height: 59px; margin-bottom: 10px;
  padding: 0 3px .2rem 4px; text-align: center; justify-content: center; align-items: center;
  margin-left: auto; margin-right: 5px; background-color: #e4e70d; font-size: 10px;
  border-radius: 3rem; text-shadow: 1px 2px 3px #896464; box-shadow: 1px 2px 9px 1px rgba(0,0,0,.3);
}
@media (max-width: 768px) { .button-tel { margin: 0 auto 10px; } }
.button-tel span { display: flex; font-size: 25px; }

/* mailボタン */
.button-green {
  display: flex; width: 17.5rem; height: 59px; margin-bottom: 10px;
  padding: 0 3px .2rem 4px; text-align: center; justify-content: center; align-items: center;
  margin-right: auto; margin-left: 5px; background-color: #5eb865; font-size: 20px;
  border-radius: 3rem; text-shadow: 1px 2px 3px #555252; box-shadow: 1px 2px 9px 1px rgba(0,0,0,.3);
}
@media (max-width: 768px) { .button-green { margin: 0 auto 10px; } }

.contact-time p { text-align: center; font-size: 14px; }
.contact-main p { justify-content: center; font-size: 14px; }

/* プライバシーポリシー */
.contact-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}
@media (max-width: 600px){
  .contact-text { padding-left: 16px; padding-right: 16px; }
}
.contact-text p {
  max-width: 800px;
  line-height: 1.8;
  margin: 20px 0 0;
}

/* ===== よくあるご質問 ===== */
.questions { padding-left: 16px; padding-right: 20px; }
.questions .container { display: flex; flex-direction: column; padding-top: 50px; padding-bottom: 100px; justify-content: center; }
.accordion-group { display: flex; flex-direction: column; row-gap: 19px; margin-top: -6px; }
.accordion { border: 2px solid #13be7d; border-radius: 8px; display: flex; flex-direction: column; margin: 0 auto; justify-content: center; width: 600px; max-width: 100%; }
.titlebox { display: flex; padding: 10px 0 13px; position: relative; }
.accordion-title { border-radius: 8px; width: 700px; max-width: 100%; padding: 5px 8px 6px 7px; margin: 0; font-size: 16px; background-color: #fff; cursor: pointer; }
.titlebox::after { font-family: "bootstrap-icons"; color: #eca91f; content: "\F229"; display: block; position: absolute; right: 13px; top: 13px; }
.open.titlebox::after { transform: rotate(180deg); }
.accordion-content { display: none; flex-direction: row; border-radius: 0 0 8px 8px; padding: 6px 4px 6px 3px; font-size: 15px; background-color: #ffeee5; }
.accordion-content-active { display: flex; flex-direction: row; padding: 0; }
.q-mark { color: #f26618; background-color: #ffeee5; width: 32px; height: 32px; border-radius: 50%; text-align: center; align-items: center; margin: 5px 5px 5px 15px; padding-top: 2px; }
.a-mark { color: #fff; background-color: #f26618; width: 32px; height: 32px; border-radius: 50%; text-align: center; align-items: center; margin: 9px 1px 7px 12px; padding-top: 4px; }
.accordion-content-anser { font-size: 16px; width: 100%; max-width: 100%; margin: 10px 0 13px 11px; }
@media (max-width: 768px) { .accordion-title { width: 81%; padding-right: 22px; } }

/* ===== お客様の声 ===== */
.customer { width: 100%; max-width: 100%; background-color: rgb(247, 244, 201); padding: 50px 0; }
.customer .container { width: 1000px; max-width: 100%; margin: 0 auto; }
.customer-box { display: flex; padding: 5px 0; }
@media (max-width: 768px) { .customer-box { flex-direction: column; padding: 0 10px; } }
.customer-date { width: 20%; padding: 10px 0; border-bottom: 1px solid #CCC; }
@media (max-width: 768px) { .customer-date { border-top: 2px solid #ccc; width: 100%; } }
.customer-title { width: 70%; padding: 10px 0; border-bottom: 1px solid #CCC; z-index: 1; }
@media (max-width: 768px) { .customer-title { width: 100%; border-bottom: none; } }
.customer-img { width: 220px; height: 109px; }
@media (max-width: 768px) { .customer-img { width: 100%; margin-bottom: 10px; display: flex; } }
.customer-img img { width: 160px; height: 105px; margin-left: 10px; }
@media (max-width: 768px) { .customer-img img { margin: 0 auto; } }

/* ===== ブログ ===== */
.vlog { width: 100%; max-width: 100%; background-color: rgb(237, 247, 236); padding: 50px 0; }
.vlog .container { width: 1000px; max-width: 100%; margin: 0 auto; }
.vlog-box { display: flex; padding: 5px 0; }
@media (max-width: 768px) { .vlog-box { flex-direction: column; padding: 0 10px; } }
.vlog-date { width: 20%; padding: 10px 0; border-bottom: 1px solid #CCC; }
@media (max-width: 768px) { .vlog-date { border-top: 2px solid #ccc; width: 100%; } }
.vlog-title { width: 70%; padding: 10px 0; border-bottom: 1px solid #CCC; z-index: 1; }
@media (max-width: 768px) { .vlog-title { width: 100%; border-bottom: none; } }
.vlog-img { width: 220px; height: 109px; }
@media (max-width: 768px) { .vlog-img { width: 100%; margin-bottom: 10px; display: flex; } }
.vlog-img img { width: 160px; height: 105px; margin-left: 10px; }
@media (max-width: 768px) { .vlog-img img { margin: 0 auto; } }
.other-vlog { text-align: right; margin-top: 16px; }
@media (max-width: 768px) { .other-vlog { margin-right: 12px; } }
.other-vlog a { font-weight: 600; font-size: 18px; color: #fff; background-color: #857c7c; border-radius: 6px; padding: 3px; }
.other-vlog a:hover { background-color: #232323; color: #fff; box-shadow: 1px 2px 9px 1px rgba(0,0,0,.3); }

/* noteのタイトルだけ太字（ブログ内のnote読み込み領域） */
#note-feed .vlog-title a { font-weight: 700 !important; font-size: 18px; color: #232323; text-decoration: none; }
#note-feed .vlog-title a:hover { opacity: .8; }

/* ブログ：抜粋と画像の下にも下線を追加 */
.vlog-excerpt{width:70%;padding:10px 0;border-bottom:1px solid #CCC}

/* スマホではタイトル同様に抜粋の下線は消す */
@media (max-width:768px){
  .vlog-excerpt{width:100%;border-bottom:none !important}
  .vlog-img{border-bottom:none}
}

/* ===== お問い合わせ（ページ2の帯） ===== */
.contact-main .container { max-width: 100%; background: #fff; padding-top: 23px; padding-bottom: 23px; }

/* ===== 会社概要 ===== */
.company .container { background-color: rgba(124, 167, 44, 0.05); padding: 100px 0; }
.overview { display: flex; }
.table {
  display: table; border-collapse: collapse; border: solid 3px #dddddd; text-align: center;
  width: 55%; max-width: 100%; justify-content: center; margin: 0 auto 80px;
}
th, td { border: solid .1px #dddddd; font-size: 23px; }
.table th { background-color: #f7f3f3; font-weight: Normal; }
td span { font-size: 20px; }
.map-container { display: flex; justify-content: center; }
iframe { height: 300px; width: 500px; max-width: 100%; }
.access_list { display: flex; flex-direction: column; text-align: left; margin-left: 100px; }
.access_list li { margin-bottom: 20px; list-style-type: square; }

@media (max-width: 768px) {
  .table { width: 95%; margin: 0 auto 15px; }
  th, td { font-size: 13px; text-align: left; }
  td span { font-size: 12px; }
  .map-container { flex-direction: column; }
  .station { margin: 0 auto; }
  .company .container { padding-bottom: 0; }
  .map-container { margin-top: 25px; }
  .access_list { margin: 30px 0; }
}

/* ===== フッター ===== */
.footer .container {
  display: flex; flex-direction: column; background-color: #e8f5e9;
  width: 100%; max-width: 100%; height: 140px; padding-top: 20px;
}
.footer-item { display: flex; margin: 0 auto 10px; }
.footer-item h3 { width: 130px; display: flex; text-align: center; align-items: center; color: #333335; font-family: "Nico Moji"; font-size: 33px; }
.footer-item img { width: 48px; height: 48px; }
.footer-copyright { text-align: center; font-size: 12px; }

/* ===== 右下固定TEL ===== */
.button-tel-icon {
  display: flex; position: fixed; z-index: 2; bottom: 10px; right: 10px;
  width: 15.5rem; height: 59px; margin-bottom: 10px; padding: 0 3px .2rem 4px;
  text-align: center; justify-content: center; align-items: center;
  margin-left: auto; margin-right: 5px; background-color: rgba(247,242,11,.9);
  font-size: 18px; border-radius: 3rem; text-shadow: 1px 2px 3px #896464;
  box-shadow: 1px 2px 9px 1px rgba(0,0,0,.3);
}

/* ===== Inquiry Form (入力画面) ===== */
.inquiry{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:#f8fafc;
  padding:20px;
  box-sizing:border-box;
}
.inquiry .container{
  max-width:700px;
  width:100%;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding:40px 30px;
}
.inquiry .section-title{
  font-size:26px;
  font-weight:800;
  margin-bottom:24px;
  text-align:center;
  color:#4FC3F7;
}

/* form layout */
.inquiry .form{ display:flex; flex-direction:column; gap:20px; }
.inquiry .form-item-label{ font-size:15px; font-weight:600; color:#333; line-height:1.8; }
.inquiry .form-item-label-required{
  display:inline-block; margin-right:.5em; padding:2px 8px; font-size:11px; font-weight:800; color:#fff; background:#ff6b6b; border-radius:999px;
}

/* inputs */
.inquiry .form-item-input,
.inquiry .form-item-textarea{
  width:100%; padding:12px 14px; border:1px solid #e1e5ee; border-radius:8px; background:#fdfdfd;
  font-size:15px; line-height:1.6; color:#333; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.inquiry .form-item-input:focus,
.inquiry .form-item-textarea:focus{ border-color:#4FC3F7; box-shadow:0 0 0 3px rgba(79,195,247,.15); background:#fff; }
.inquiry .form-item-textarea{ min-height:160px; resize:vertical; }

/* submit */
.inquiry .btn{ text-align:center; margin-top:8px; }
.inquiry .form-btn{
  background:#4FC3F7; color:#fff; font-size:16px; font-weight:700; padding:14px 40px;
  border:none; border-radius:999px; cursor:pointer; transition: transform .06s ease, filter .2s ease;
}
.inquiry .form-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* mobile（入力画面だけ） */
@media (max-width:600px){
  .inquiry input, .inquiry textarea{ font-size:16px; } /* iOSズーム抑止 */
  .inquiry{ padding:16px 12px; }
  .inquiry .container{ padding:24px 16px; border-radius:12px; }
  .inquiry .section-title{ font-size:22px; margin-bottom:16px; }
  .inquiry .form{ gap:16px; }
  .inquiry .form-item-input, .inquiry .form-item-textarea{ font-size:16px; padding:12px 14px; }
  .inquiry .form-btn{ width:100%; min-height:48px; padding:12px 16px; border-radius:999px; }
}

/* ===== Inquiry Confirm (確認画面) ===== */
.inquiry-confirm{
  display:flex; justify-content:center; align-items:center; min-height:100vh; background:#f8fafc; padding:20px; box-sizing:border-box;
}
.inquiry-confirm .container{
  max-width:700px; width:100%; background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08); padding:40px 30px;
}
.inquiry-confirm .section-title{
  font-size:26px; font-weight:800; margin-bottom:24px; text-align:center; color:#4FC3F7;
}

/* form layout */
.inquiry-confirm .form{ display:flex; flex-direction:column; gap:20px; }
.inquiry-confirm .form-item-label{ font-size:15px; font-weight:600; color:#333; line-height:1.8; }
.inquiry-confirm .form-item-input,
.inquiry-confirm .form-item-textarea{
  width:100%; padding:12px 14px; border:1px solid #e1e5ee; border-radius:8px; background:#f4f6f8;
  font-size:15px; line-height:1.6; color:#666;
}
.inquiry-confirm .form-item-textarea{ min-height:160px; resize:none; }

/* ボタン行 */
.inquiry-confirm .btn-wrap{
  display:flex; justify-content:center; gap:16px; margin-top:20px;
}

/* 戻るボタン（サブ） */
.inquiry-confirm .form-btn.back-btn{
  background:#E5E7EB !important; color:#111827 !important; border:none; border-radius:999px;
  font-weight:600; padding:14px 28px; min-width:140px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition: transform .06s ease, filter .2s ease;
}
.inquiry-confirm .form-btn.back-btn:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.inquiry-confirm .form-btn.back-btn:active{ transform:translateY(0); filter:brightness(0.95); }

/* 送信ボタン（メイン） */
.inquiry-confirm .form-btn.submit-btn{
  background:#4FC3F7 !important; color:#fff !important; border:none; border-radius:999px;
  font-weight:700; padding:14px 28px; min-width:160px; cursor:pointer; box-shadow:0 4px 12px rgba(0,153,255,.3);
  transition: transform .06s ease, filter .2s ease;
}
.inquiry-confirm .form-btn.submit-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.inquiry-confirm .form-btn.submit-btn:active{ transform:translateY(0); filter:brightness(0.95); }
.inquiry-confirm .form-btn.submit-btn:disabled{ background:#BFDFFF !important; color:#fff !important; box-shadow:none; cursor:not-allowed; }

/* responsive（確認画面だけ） */
@media (max-width:600px){
  .inquiry-confirm input, .inquiry-confirm textarea{ font-size:16px; } /* iOSズーム抑止 */
  .inquiry-confirm{ padding:16px 12px; }
  .inquiry-confirm .container{ padding:24px 16px; }
  .inquiry-confirm .btn-wrap{ flex-direction:column !important; align-items:stretch !important; gap:10px; margin-top:16px; }
  .inquiry-confirm .form-btn.back-btn, .inquiry-confirm .form-btn.submit-btn{ width:100%; min-height:48px; padding:12px 16px; border-radius:999px; }
}

/* ===== Inquiry Thanks / 送信完了画面 ===== */
.contact_completion{
  display:flex; justify-content:center; align-items:center; min-height:100vh; background:#f8fafc; padding:20px; box-sizing:border-box;
}
.contact_completion_item{
  max-width:600px; width:100%; background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08); padding:40px 30px; text-align:center;
}
.contact_completion .thanks-message{ font-size:16px; line-height:1.9; color:#333; }

/* 送信完了：トップに戻る */
.send_top{ margin-top:24px; text-align:center; }
.send_top a{
  display:inline-block; width:220px; padding:14px 0; font-size:16px; font-weight:700; color:#fff; background:#4FC3F7; text-decoration:none;
  border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:transform .06s ease, filter .2s ease;
}
.send_top a:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* モバイル（完了画面だけ） */
@media (max-width:600px){
  .contact_completion_item{ padding:28px 16px; }
  .send_top a{ width:min(520px, 100%); min-height:48px; padding:12px 16px; border-radius:999px; }
}

/* 旧 .btn の影響を無効化（確認画面での事故防止のみ） */
.inquiry-confirm .btn{ display:none !important; }

/* スマホで縦並びを強要（極小幅） */
@media (max-width:480px){
  .inquiry-confirm .btn-wrap{ flex-direction:column; gap:10px; }
  .inquiry-confirm .form-btn{ width:100%; }
}

/* ========================================================= */
/* 互換：.about-cotent タイポを吸収 */
.about-cotent, .about-content {
  width: 500px; max-width: 100%; padding-left: 20px; box-sizing: border-box;
}
@media (max-width: 768px){
  .about-cotent, .about-content { padding-right: 18px; }
}

/* note 抜粋のレイアウト補強 */
.vlog-excerpt{
  word-break: break-word;
  line-height: 1.7;
  color: #333;
}
#note-feed .vlog-img img{
  display:block;
  max-width: 160px;
  height: auto;
}

/* アクセシビリティ（全体） */
a:focus-visible, button:focus-visible{
  outline: 3px solid #4FC3F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== ヘッダー直下にh1を配置 ===== */
:root{
  --header-offset: 90px; /* PCのヘッダー（top:10px + height:70px）を考慮 */
}

.site-main-title{
  position: static !important;         /* 過去のabsolute指定を打ち消し */
  left: auto !important;
  top: auto !important;
  transform: none !important;
  background: transparent !important;  /* 半透明背景を無効化 */
  border-radius: 0 !important;

  display: block;
  margin: calc(var(--header-offset) + 10px) auto 16px; /* ヘッダー直下に余白を確保 */
  padding: 0 16px;
  max-width: min(1100px, 92%);
  text-align: center;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  line-height: 1.35;
  color: #232323;
  width: auto;
  z-index: 1;
}

/* ヒーロー画像はh1の下から始まるので上マージンを抑制 */
.cover-slick-item img{
  margin: 12px auto 0 !important; /* 元の84pxを上書き */
}

/* スマホ：ヘッダー高さが近いので少し小さめに */
@media (max-width: 768px){
  :root{ --header-offset: 85px; }
  .site-main-title{
    margin: var(--header-offset) auto 8px;
    font-size: clamp(20px, 5.2vw, 28px);
  }
}