/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2023/09/28, 14:42:37
    Author     : u1min
*/

/* ****************************************/
/* Font */
/* ****************************************/

@import url('https://fonts.googleapis.com/css?family=Impact');
@import url('https://fonts.googleapis.com/css?family=Futura+PT');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@1,700&family=Petit+Formal+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

.wf-Gothic {
    font-family: -apple-system, 'Noto Sans JP',BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

}

.wf-Mincho {
    font-family:  'Noto Serif JP',Georgia,游明朝 Regular,"Yu Mincho Regular",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,sans-serif,serif;
    transform: rotate(0.001deg);
}

.wf-Cormorant {
    font-family: 'Cormorant', serif ! important;
}

.wf-Josefin-Sans {
    font-family: 'Josefin Sans' ! important;
}

.wf-Impact {
    font-family: 'Impact', sans-serif;
}

.wf-FuturaPT {
    font-family: 'Futura PT', sans-serif;
}

.wf-Condor-ExtraLight {
    font-family: "condor", sans-serif !important ;
    font-weight: 200;
    font-style: normal;

}

.wf-Condor-Light {
    font-family: "condor", sans-serif !important ;
    font-weight: 300;
    font-style: normal;
}

.wf-Condor-Regular {
    font-family: "condor", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-Condor-Italic {
    font-family: "condor", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-Condor-Medium {
    font-family: "condor", sans-serif !important ;
    font-weight: 500;
    font-style: normal;
}

.wf-Condor-Bold {
    font-family: "condor", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-Condor-Bold-Italic {
    font-family: "condor", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-Condor-Black {
    font-family: "condor", sans-serif !important ;
    font-weight: 800;
    font-style: normal;
}

.wf-CondorComp-Regular {
    font-family: condor-compressed, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorComp-Italic {
    font-family: "condor-compressed", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorComp-Bold {
    font-family: "condor-compressed", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorComp-Bold-Italic {
    font-family: "condor-compressed", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-CondorCond-Regular {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorCond-Italic {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorCond-Bold {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorCond-Bold-Italic {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-CondorExtd-Regular {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorExtd-Italic {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorExtd-Bold {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorExtd-Bold-Italic {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-CondorWide-Regular {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorWide-Italic {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorWide-Bold {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorWide-Bold-Italic {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-TA-koigokoro {
    font-family: "ta-koigokoro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: '07ロゴたいぷゴシックCondense';
    src:url('../font/LogoTypeGothicCondensed.otf');
}

.wf-LogoTypeGothicCondensed {
    font-family: '07ロゴたいぷゴシックCondense';
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: '殴り書きクレヨン';
    src:url('../font/crayon_1-1.ttf');
}

.wf-crayon_1-1 {
    font-family: '殴り書きクレヨン';
    font-weight: 400;
    font-style: normal;

}

.wf-fot-chiaro {
    font-family: fot-chiaro-std, sans-serif;
    font-weight: 700;
    font-style: normal;
}

/*--------------------------------------------------------------
# font-weight
--------------------------------------------------------------*/
.fw100 {
    font-weight: 100 !important;
}

.fw300 {
    font-weight: 300 !important;
}

.fw400 {
    font-weight: 400 !important;
}

.fw500 {
    font-weight: 500 !important;
}

.fw700 {
    font-weight: 700 !important;
}

/*--------------------------------------------------------------
# margin & padding
--------------------------------------------------------------*/
mt-10 {
    margin-top: 10px; }

.mt-15 {
    margin-top: 15px; }

.mt-20 {
    margin-top: 20px; }

.mt-25 {
    margin-top: 25px; }

.mt-30 {
    margin-top: 30px; }

.mt-35 {
    margin-top: 35px; }

.mt-40 {
    margin-top: 40px; }

.mt-50 {
    margin-top: 50px; }

.mt-60 {
    margin-top: 60px; }

.mt-70 {
    margin-top: 70px; }

.mt-80 {
    margin-top: 80px; }

.mt-90 {
    margin-top: 90px; }

.mt-100 {
    margin-top: 100px; }

.mt-120 {
    margin-top: 120px; }

.mt-150 {
    margin-top: 150px; }

.mt-300 {
    margin-top: 300px; }

.mb-10 {
    margin-bottom: 10px; }

.mb-15 {
    margin-bottom: 15px; }

.mb-20 {
    margin-bottom: 20px; }

.mb-25 {
    margin-bottom: 25px; }

.mb-30 {
    margin-bottom: 30px; }

.mb-35 {
    margin-bottom: 35px; }

.mb-40 {
    margin-bottom: 40px; }

.mb-50 {
    margin-bottom: 50px; }

.mb-60 {
    margin-bottom: 60px; }

.mb-70 {
    margin-bottom: 70px; }

.mb-80 {
    margin-bottom: 80px; }

.mb-90 {
    margin-bottom: 90px; }

.mb-100 {
    margin-bottom: 100px; }

.mb-120 {
    margin-bottom: 120px; }

.mb-150 {
    margin-bottom: 150px; }

.pt-10 {
    padding-top: 10px; }

.pt-15 {
    padding-top: 15px; }

.pt-20 {
    padding-top: 20px; }

.pt-25 {
    padding-top: 25px; }

.pt-30 {
    padding-top: 30px; }

.pt-35 {
    padding-top: 35px; }

.pt-40 {
    padding-top: 40px; }

.pt-50 {
    padding-top: 50px; }

.pt-60 {
    padding-top: 60px; }

.pt-70 {
    padding-top: 70px; }

.pt-80 {
    padding-top: 80px; }

.pt-90 {
    padding-top: 90px; }

.pt-100 {
    padding-top: 100px; }

.pt-120 {
    padding-top: 120px; }

.pt-150 {
    padding-top: 150px; }

.pb-10 {
    padding-bottom: 10px; }

.pb-15 {
    padding-bottom: 15px; }

.pb-20 {
    padding-bottom: 20px; }

.pb-25 {
    padding-bottom: 25px; }

.pb-30 {
    padding-bottom: 30px; }

.pb-35 {
    padding-bottom: 35px; }

.pb-40 {
    padding-bottom: 40px; }

.pb-50 {
    padding-bottom: 50px; }

.pb-60 {
    padding-bottom: 60px; }

.pb-70 {
    padding-bottom: 70px; }

.pb-80 {
    padding-bottom: 80px; }

.pb-90 {
    padding-bottom: 90px; }

.pb-100 {
    padding-bottom: 100px; }

.pb-120 {
    padding-bottom: 120px; }

.pb-150 {
    padding-bottom: 150px; }

.pl-10 {
    padding-left: 10px; }

.pl-15 {
    padding-left: 15px; }

.pl-20 {
    padding-left: 20px; }

.pl-25 {
    padding-left: 25px; }

.pl-30 {
    padding-left: 30px; }

.pl-35 {
    padding-left: 35px; }

.pl-40 {
    padding-left: 40px; }

.pl-50 {
    padding-left: 50px; }

.pl-60 {
    padding-left: 60px; }

.pl-70 {
    padding-left: 70px; }

.pl-80 {
    padding-left: 80px; }

.pl-90 {
    padding-left: 90px; }

.pl-100 {
    padding-left: 100px; }

.pl-120 {
    padding-left: 120px; }

.pl-150 {
    padding-left: 150px; }

.pr-10 {
    padding-right: 10px; }

.pr-15 {
    padding-right: 15px; }

.pr-20 {
    padding-right: 20px; }

.pr-25 {
    padding-right: 25px; }

.pr-30 {
    padding-right: 30px; }

.pr-35 {
    padding-right: 35px; }

.pr-40 {
    padding-right: 40px; }

.pr-50 {
    padding-right: 50px; }

.pr-60 {
    padding-right: 60px; }

.pr-70 {
    padding-right: 70px; }

.pr-80 {
    padding-right: 80px; }

.pr-90 {
    padding-right: 90px; }

.pr-100 {
    padding-right: 100px; }

.pr-120 {
    padding-right: 120px; }

.pr-150 {
    padding-right: 150px; }

.mt--360 {
    margin-top: -360px;
}
.mt--600 {
    margin-top: -600px;
}

/*--------------------------------------------------------------
# link decoration
--------------------------------------------------------------*/

.link-dark {
    color: #343a40 !important; 
}
.link-dark:hover, .link-dark:focus {
    color: #2a2e33 !important; 
}

.link-fancy {
    color: #151515;
    text-decoration: none;
    display: inline-block;
    position: relative; 
}

.link-fancy:hover {
    color: #6c757d; 
}

.link-fancy:before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    transform-origin: left;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, #151515 0, #151515 25%, transparent 0, transparent 50%, #151515 0, #151515 75%, transparent 0, transparent);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 400% 1px;
    transition: background-position 0.8s ease-in-out; 
}

.link-fancy:hover:before {
    background-position: 100%;
}  

/*--------------------------------------------------------------
# shadow decoration
--------------------------------------------------------------*/

.shadow {
    box-shadow: 0 3rem 4rem rgba(21, 21, 21, 0.25) !important; }

.shadow-sm {
    box-shadow: 0 1rem 1.5rem rgba(21, 21, 21, 0.25) !important; }

.shadow-lg {
    box-shadow: 0 4rem 6rem rgba(21, 21, 21, 0.25) !important; }

.shadow-none {
    box-shadow: none !important; }

.text-shadow-b {text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);}
.text-shadow-w {text-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);}

/*--------------------------------------------------------------
# text aligin
--------------------------------------------------------------*/
.align-left { text-align: left ! important;}
.align-center { text-align: center ! important; }
.align-right { text-align: right ! important;}

/*--------------------------------------------------------------
# text underline
--------------------------------------------------------------*/
.bottom-line {border-bottom: 1px solid #444444;padding-bottom: 0.25em;}
.bottom-line-w {border-bottom: 1px solid #FFFFFF;padding-bottom: 0.25em;}
.bottom-line-g {border-bottom: 1px solid #555555;padding-bottom: 0.25em;}


/*--------------------------------------------------------------
# mobile ON/OFF
--------------------------------------------------------------*/

.mobile-display-ON {
    display: none ;
}
.mobile-display-OFF {
    display: block ;
}
@media screen and (max-width: 768px) {
    .mobile-display-ON {
        display: block ;
    }
    .mobile-display-OFF {
        display: none ;
    }
}


#Ranking {
    margin-top: 12rem;

}

/*--------------------------------------------------------------
# background decoration
--------------------------------------------------------------*/

.background-container {
    position: relative;
    width: 100%; /* コンテナの幅を調整 */
}

.right-white-background_s {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%; /* 左背景色を領域を設定 */
    height: 100%;
    background-color: #E5E0D7; /* 左側の背景色を設定 */
    border-radius: 0 236px 0 0 ;
    z-index: -99;
}

.right-white-background_e {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%; /* 右半分に背景色を設定 */
    height: 100%;
    background-color: var(--bs-body-color); /* 右側の背景色を設定 */
    border-radius: 236px 0 0 0;
    z-index: -99;
}

.left-white-background_s {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%; /* 左背景色を領域を設定 */
    height: 100%;
    background-color: var(--bs-body-color); /* 右側の背景色を設定 */
    border-radius: 0 12rem 0 0; /* 左上の角を丸くする */
    z-index: -99;
}

.left-white-background_e {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%; /* 右半分に背景色を設定 */
    height: 100%;
    background-color: #E5E0D7; /* 右側の背景色を設定 */
    border-radius: 236px 0 0 0;
    z-index: -99;
}

/*--------------------------------------------------------------
# test scroll
--------------------------------------------------------------*/

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 追加：親要素のスタイル */
.scrolling-text-wrapper {

    white-space: nowrap;
    overflow: hidden; /* 横方向のオーバーフローを非表示にする */
    position: absolute;
    top: 80%;
    color: #FFFFFF;
    z-index: 1;
    width: 100%; /* 幅を画面幅に合わせる */
    left: 0;

}

/* 追加：子要素のスタイル */
.scrolling-text-inner {

    overflow: scroll; /* スクロール可能にする */
    animation: scroll 20s linear infinite; /* アニメーションを適用 */
    width: 100%; /* 幅を親要素と同じにする */

}
.scrolling-text {

    display: flex;
    white-space: nowrap;
    overflow: hidden;
    animation: scroll 20s linear infinite;

    position: absolute; /* 絶対位置指定 */
    top: 80%; /* 上端からの距離をパーセンテージで指定 */
    /*left: 50%;  左端からの距離をパーセンテージで指定 */
    color: #FFFFFF; /* テキストの色を設定 */
    z-index: 1;

}

.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 1rem;
    font-size: 3rem;
}

.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 1rem;
    font-size: 256px;
    z-index: 1;
}
.marquee-inner {
    position: absolute;
    top: 80%;
    overflow-x: no-content ;
    color: #FFFFFF;

    animation: marquee 20s linear infinite;
}

@media screen and (max-width: 768px) {
.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 1rem;
    font-size: 160px;
    z-index: 1;
}
    .marquee-inner {
        position: absolute;
        top: 90%;
        overflow-x: no-content ;
        color: #FFFFFF;

        animation: marquee 20s linear infinite;
    }

}

@keyframes marquee {
    0%   { translate: 0; }
    100% { translate: calc(-100% - 1rem); }
}

/* ========================================*/
/* Hero画像のアスペクト比を保持する */
/* ========================================*/
.hero img {
    object-fit: cover;
    object-position: center center; /* フォーカスを当てたい位置に調整可能 */
}

/* ========================================*/
/* Hero画像のサイズとアスペクト比を制御 */
/* ========================================*/
.hero {
    min-height: unset;
    background-color: transparent;
    padding: 0; /* main.cssの padding: 160px 0 80px 0 を打ち消す */
}

.hero img {
    position: relative; /* absoluteを解除 */
    inset: auto;
    width: 100%;
    height: auto;      /* 高さを自動（比率を保つ） */
    display: block;
    object-fit: contain;
}


/* ========================================*/
/* ヘッダー会社名のフォント */
/* ========================================*/
.header .logo h1 {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", 
                 "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
    font-size: 0.8rem;
}



/* ========================================*/
/* Company セクション スマホ余白 */
/* ========================================*/
@media (max-width: 991px) {
    #company .col-lg-8 {
        padding-left: 2.0rem;
        padding-right: 2.0rem;
    }
}

/* ========================================*/
/* Company セクション スマホ文字サイズ */
/* ========================================*/
@media (max-width: 991px) {
    #company .custom-list {
        font-size: 16px !important;
    }
}


/* ========================================*/
/* セクションタイトル スマホ文字サイズ */
/* ========================================*/
@media (max-width: 991px) {
    .section-title h2 {
        font-size: 1.5rem !important;
    }
}

/* footer-contact 内の文字色を強制的に黒にする */
.footer .footer-contact p,
.footer .footer-contact span,
.footer .footer-contact strong {
    color: var(--default-color) !important; /* テンプレート標準の黒色を使用 */
}

/* 「私たちにできること」リスト全体の調整 */
.footer-links-small p {
    margin-bottom: 5px !important; /* 行間の隙間を5pxに（標準は1rem=16px程度） */
    line-height: 1.2;             /* 行自体の高さも少し低く設定 */
}

/* リンク文字のサイズのみを小さくする */
.footer-links-small p a {
    font-size: 0.85rem;            /* 標準より少し小さめ（お好みで0.8rem等に調整） */
    display: inline-block;         /* 余白設定を確実にするため */
}

/* 見出し(H4)の大きさは維持し、下の余白だけ少し作る */
.footer-links-small h4 {
    margin-bottom: 15px;
}
/* 見出し全体のコンテナ */
.custom-layered-heading {
    position: relative;
    padding: 20px 0 20px 60px; /* 左側に四角形がくるための余白 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px;
}

/* ========================================*/
/* 重なり四角形の見出しデザイン（中央配置・高さ調整版） */
/* ========================================*/

/* --- ベースのデザイン（共通：色は指定しない） --- */
.custom-layered-heading {
    position: relative;
    width: fit-content;
    margin: 0 auto 40px auto;
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.layered-squares {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid; /* 色はここでは指定しない */
    background: transparent;
    z-index: 1;
}

.layered-squares::after {
    content: "";
    position: absolute;
    top: 5px; 
    left: 5px; 
    width: 100%;
    height: 100%;
    border: 2px solid; /* 色はここでは指定しない */
    background: transparent;
    box-sizing: border-box;
    z-index: -1;
}

/* ========================================*/
/* カラーバリエーション一括設定（大見出し＋小見出し） */
/* ========================================*/

/* 1. 産業廃棄物・一般廃棄物：緑系 */
.color-green .layered-squares { border-color: #008d4b !important; }
.color-green .layered-squares::after { border-color: #a8d8b9 !important; }
.color-green .sub-heading { border-left-color: #008d4b !important; }

/* 2. 特殊清掃：青系 (eco21.html はこれ) */
.color-blue .layered-squares { border-color: #0055a4 !important; }
.color-blue .layered-squares::after { border-color: #a5d4f3 !important; }
.color-blue .sub-heading { border-left-color: #0055a4 !important; }

/* 3. エコアクション：黄緑系 */
.color-eco .layered-squares { border-color: #8ea604 !important; }
.color-eco .layered-squares::after { border-color: #dbee71 !important; }
.color-eco .sub-heading { border-left-color: #8ea604 !important; }

/* 4. 許可・資格：グレー系 */
.color-license .layered-squares { border-color: #928f8f !important; }
.color-license .layered-squares::after { border-color: #dcdcdc !important; }
.color-license .sub-heading { border-left-color: #928f8f !important; }

/* 5. 排水管理：赤・ピンク系 */
.color-red-pink .layered-squares { border-color: #d9333f !important; }
.color-red-pink .layered-squares::after { border-color: #f9d0d5 !important; }
.color-red-pink .sub-heading { border-left-color: #d9333f !important; }

/* 5. 排水管理：赤・ピンク系 */
.color-brown .layered-squares { border-color: #d98033 !important; }
.color-brown .layered-squares::after { border-color: #f9ded0 !important; }
.color-brown .sub-heading { border-left-color: #d98033 !important; }

/* 文字部分 */
.heading-text {
    position: relative;
    z-index: 3;
    text-align: center;
}

.heading-text h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.heading-text p {
    margin: 5px 0 0 0 !important;
    font-size: 0.9rem;
    color: #666;
}

/* --- 小見出しのベースデザイン --- */
.sub-heading {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 2px 0 2px 15px;
    margin-top: 50px;         /* 大見出しや前のブロックとの間隔 */
    margin-bottom: 15px;
    border-left: 6px solid;   /* 左の縦線の太さ（PC） */
    line-height: 1.4;
    color: #333;
}

/* --- 説明文のスタイル --- */
.sub-description {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
    padding-left: 5px;        /* 縦線の位置と文字の始まりを微調整 */
}

/* --- 【スマホ対応】画面幅が991px以下の設定 --- */
@media (max-width: 991px) {
    .sub-heading {
        font-size: 1.15rem;   /* 文字を少し小さく */
        border-left-width: 4px; /* 縦線を少し細くして圧迫感を減らす */
        padding-left: 12px;
        margin-top: 35px;
    }
    .sub-description {
        font-size: 0.95rem;   /* 説明文も少しコンパクトに */
    }
}

/* --- 各カラーとの連動（!importantで確実に適用） --- */
.color-red-pink .sub-heading { border-left-color: #d9333f !important; }
.color-green .sub-heading    { border-left-color: #008d4b !important; }
.color-blue .sub-heading     { border-left-color: #0055a4 !important; }
.color-eco .sub-heading      { border-left-color: #8ea604 !important; }
.color-license .sub-heading  { border-left-color: #928f8f !important; }

/* --- リスト全体のスタイル --- */
.custom-check-list {
    list-style: none; /* 標準の「点」を消す */
    padding-left: 0;
    margin-top: 10px;
}

.custom-check-list li {
    position: relative;
    padding-left: 30px;  /* アイコン分の余白 */
    margin-bottom: 12px; /* 項目ごとの間隔 */
    line-height: 1.6;
    font-size: 1rem;
    color: #444;
}

/* --- アイコン（チェックマーク）の共通設定 --- */
.custom-check-list li::before {
    content: "\f00c"; /* FontAwesomeのチェックアイコン */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.1rem;
}

/* --- カラー連動設定 --- */
.color-red-pink .custom-check-list li::before { color: #d9333f !important; }
.color-green .custom-check-list li::before    { color: #008d4b !important; }
.color-blue .custom-check-list li::before     { color: #0055a4 !important; }
.color-eco .custom-check-list li::before      { color: #8ea604 !important; }
.color-license .custom-check-list li::before  { color: #928f8f !important; }

.image-container {
  position: relative; /* 基準点にする */
  display: inline-block;
}

.image-container img {
  display: block;
  width: 100%;
}

.text {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

/* ============================================================
   許可・資格ページ専用：5列・2段見出し（全行ゼブラ・細字統一版）
   ============================================================ */

.color-license .custom-table-wrapper {
    margin-top: 30px;
    margin-bottom: 50px;
    border-radius: 12px;
    overflow: auto;
    border: 1px solid #e0e4e8;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
}

/* --- 見出しエリア（thead） --- */
.color-license .custom-table thead th {
    background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%) !important;
    color: #495057 !important;
    padding: 12px 8px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    text-align: center;
    vertical-align: middle;
}

/* --- 明細行（tbody）の共通スタイル --- */
.color-license .custom-table tbody th,
.color-license .custom-table tbody td {
    padding: 14px 10px;
    border: 1px solid #f1f1f1; /* 薄い罫線 */
    color: #555;
    vertical-align: middle;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 400 !important; /* 全体を通常の太さに統一 */
}

/* --- 【ご要望】全行共通のゼブラ設定（一行おきに微妙に色変え） --- */
.color-license .custom-table tbody tr:nth-child(even) {
    background-color: #fafafa !important;
}

/* --- 1列目を縦一列同じ色で強調（文字は少しだけ太く） --- */
.color-license .custom-table tbody tr th:first-child,
.color-license .custom-table tbody tr td:first-child {
    background-color: #f8f9fa !important;
    text-align: left !important;
    padding-left: 20px;
    font-weight: 600 !important; /* 1列目（分類名）のみ視認性を上げます */
    border-right: 2px solid #eee;
}

/* ホバー効果 */
.color-license .custom-table tbody tr:hover {
    background-color: #f0f7ff !important;
    transition: 0.2s;
}

/* カッコ付きの番号リスト */
.license-list {
    list-style: none; /* デフォルトの「1.」を消す */
    counter-reset: license-counter; /* 番号のカウントをリセット */
    padding-left: 0.5rem;
    margin: 20px 0;
}

.license-list li {
    counter-increment: license-counter; /* リスト項目ごとにカウントアップ */
    position: relative;
    padding-left: 2.5rem; /* 番号を置くための余白 */
    margin-bottom: 12px;
    line-height: 1.6;
}

/* (1) (2) (3) の部分を作る */
.license-list li::before {
    content: "(" counter(license-counter) ")"; /* カッコと番号を合成 */
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #6c757d; /* 許可ページに合わせた落ち着いたグレー */
}

header {
    padding-right: 100px; /* 右側に50pxの固定余白 */
}


/* FAQの質問サイズを調整 */
.faq-container .faq-item h3 {
    font-size: 1.05rem !important; /* 標準より少し小さく（調整してください） */
    line-height: 1.5;             /* 行間を少し広げると読みやすくなります */
}

/* 番号（.num）の大きさは変えたくない場合 */
.faq-container .faq-item h3 .num {
    font-size: 1.2rem; /* 番号だけ元のサイズ感を維持 */
}


/* --- ページタイトル全体の上下余白を調整 --- */
.page-title .heading {
    padding: 20px 0 !important; /* デフォルトの80pxから半分に縮小 */
}

/* --- パンくずリスト（Home > 産業廃棄物）の上下余白も調整 --- */
.page-title .breadcrumbs {
    padding: 12px 0 !important; /* デフォルトの15px〜20pxから少し縮小 */
}

/* --- タイトル（h1）と下の文字（p）の間の隙間も詰めたい場合 --- */
.page-title .heading h1 {
    margin-bottom: 5px !important;
}

/* セクション全体の上下余白を標準（60px）より少し詰める（全ページ共通） */
section {
    padding: 20px 0 !important;
}

/* スマホ表示の時だけ、表を横スクロールさせる設定 */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;; /* 横スクロールを許可 */
        -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかにする */
        margin-bottom: 1rem;
    }

    .custom-table {
        min-width: 600px; /* ★ここが重要！表の横幅を最低600pxに固定します */
        display: table !important; /* Bootstrapの干渉を防ぐ */
    }
    
    /* セル内の文字が改行されすぎて読みづらくなるのを防ぐ */
    .custom-table th, .custom-table td {
        white-space: nowrap; /* 文字を勝手に改行させない */
    }
    
    /* 説明文など、長い文章が入るセルだけは改行を許可する場合 */
    .custom-table td.text-wrap {
        white-space: normal;
        min-width: 200px;
    }
}

/* ==========================================================================
Google Map Style
========================================================================== */
#map {
    width: 100% !important;
    height: 500px;
}


/* --- Instagram指差しアニメーション（横向き版） --- */

@keyframes bounce-horizontal {
  0%, 100% {
    transform: translateX(0); /* 元の位置 */
  }
  50% {
    transform: translateX(-10px); /* 左に少し引いてから...（助走のような動き） */
  }
  /* または、ロゴに向かってグイッ！と動かしたい場合はこちら ↓ */
  /* 50% { transform: translateX(8px); } */
}

.pointing-hand {
  font-size: 28px;
  color: #069377;
  display: inline-block;
  /* アニメーション名を bounce-horizontal に変更 */
  animation: bounce-horizontal 1.2s infinite; 
}

/* ======= Instagram Section ======= */

/* メディアエリア全体の行 */
.insta-media-row {
  gap: 0;
}

/* 動画ラッパー */
.insta-video-wrap {
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  height: 100%; /* 追加：親の高さ（col）に合わせる */
  display: flex;   /* 追加：中身のビデオを制御しやすくする */
}

/* 動画本体 */
.insta-video {
  display: block;
  width: 100%;
  height: 100% !important; /* 重要：高さを強制的に100%にする */
  object-fit: cover;       /* 比率を保ったまま枠を埋める（はみ出しはカット） */
}

/* 写真ラッパー（共通） */
.insta-img-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%; /* 追加：親の高さに合わせる */
}

/* 写真本体（共通） */
.insta-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右カラム：上下2枚の写真（flex均等） */
.insta-img-half {
  flex: 1;
}

/* 下側の写真の上マージン */
.insta-img-half--bottom {
  margin-top: 6px;
}

/* Instagramリンクエリア */
.insta-link-wrap {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 10px;
}