@charset "UTF-8";
/* CSS Document */

body {
    box-sizing: border-box;
}

img {
    width: 100%;
}

p {
    line-height: 1.8;
}


/*headerの設定*/
.navbar-brand {
    width: 80px;
    height: auto;
}

header li {
    float: left;
    padding: 20px 30px;
}

section {
    padding-bottom: 50px;
    margin-bottom: 50px;
}

/* --- スマホ・タブレット幅（767px以下）の時のメニュー設定 --- */
@media (max-width: 767px) {
    /* メニュー全体を覆う白背景の設定 */
    #navbarNav {
        position: absolute;  /* 通常の配置から浮かせて自由に配置する魔法 */
        top: 100%;           /* ヘッダーのすぐ下からスタートさせる */
        left: 0;             /* 画面の左端にピタッと合わせる */
        width: 100%;         /* 横幅を画面いっぱいに */
        height: 100vh;       /* 縦幅を画面いっぱいに（100vh = 画面の高さ100%） */
        background-color: #ffffff; /* ここで白い背景色を指定 */
        z-index: 1000;       /* 他の要素より一番手前に表示させる */
        padding: 3rem 1rem;  /* メニューの内側に少し余白を持たせる */
    }

    /* おまけ：メニューの文字を中央揃えにして、少し間隔を広げるとスマホで押しやすくなります */
    #navbarNav .navbar-nav {
        align-items: center;
    }
    #navbarNav .nav-item {
        margin-bottom: 1.5rem;
    }
    #navbarNav .nav-link {
        font-size: 1.2rem;   /* 文字を少し大きく */
    }
}


/*
==============================
heroエリアの設定
==============================*/

.mainvisual_demo {
    content: "";
    width: 100vw ;
    height: calc(100vh - 122px);
    background-color: #888;
}



/*
==============================
公式ラインエリアの設定
==============================*/

.line_demo {
    content: "";
    width: 320px;
    height: 80px;
    background-color: green;
}

/*
==============================
お知らせエリアの設定
==============================*/

.section_title {
    position: relative;
}

.title_img img {
    max-height: 150px;
}

.title_bar {
    position: absolute;
    top: -10px;
    z-index: -1;
}

.section_title_md,
.section_title_sm{
    display: none;
}

@media (max-width:1024px){
.section_title {
    display: none;
}
.section_title_md {
    display: block;
    position: relative;
}
.title_bar_md {
    position: absolute;
    top: 0px;
    z-index: -1;
}
}

@media (max-width:400px) {
.section_title ,
.section_title_md {
    display: none;
}

.section_title_sm {
    display: block;
    position: relative;
}

.title_bar_sm {
    position: absolute;
    top: 0px;
    z-index: -1;
}
}


/*
==============================
会社概要エリアの設定
==============================*/

#introduction {
    background-image: url("../image/introBg.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

.about_txt::before,
.about_txt::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin: 40px 0;
    background-image: url("../image/decoration01.svg");
}

.detail img{
    width: 300px;
    height: auto;
    transition: 0.2s;
}

.detail img:hover {
    transform: translateY(5px);
}

@media (max-width:1024px) {
#introduction {
    background-image: url("../image/introBg_md.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

.about_txt::before,
.about_txt::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin: 20px 0;
    background-image: url("../image/decoration01.svg");
}
}


@media (max-width:400px) {
#introduction {
    background-image: url("../image/introBg_sm.svg");
    background-size: cover;
    background-repeat: no-repeat;
}
}


/*
==============================
強みエリアの設定
==============================*/

#strength {
    background-image: url("../image/strength_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.strength_decoration_top img,
.strength_decoration_bottom img {
    width: 80px;
    height: auto;
}




/*
==============================
業務内容エリアの設定
==============================*/
.service-detail img {
	width: 300px;
	height: auto;
}

#service-content {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: backround-image 0.3s ease-in-out;
}

/* --- タブボタンの幅を統一する設定 --- */
#business-tab .nav-link {
    width: 240px;   /* ここですべてのボタンの幅を固定します（お好みで調整OK） */
    margin: 0 auto; /* 念のため、ボタンが箱の中でしっかり中央にくるようにします */
}

#service-content:has(#sanitary-tab.active) {
	background-image: url("../image/service01.jpg");
}

#service-content:has(#serving-draining-tab.active) {
	background-image: url("../image/service02.jpg");
}

#service-content:has(#air-control-tab.active) {
	background-image: url("../image/service03.jpg");
}

#service-content:has(#snow-tab.active) {
	background-image: url("../image/service04.jpg");
}

#service-content:has(#electronic-equipment-tab.active) {
	background-image: url("../image/service05.jpg");
}



/*
==============================
プロジェクトエリアの設定
==============================*/

/*
.js-slider {
    width: 540px;
    margin: 50px auto;
    border: 2px solid #3e3e3e;
}

.js-slider .slick-slide {
    width: 240px;
    margin: 0 10px;
}
*/

/* スライダーの1枚1枚の箱 */
.project_content {
    border: 2px solid #3e3e3e;
    margin: 0 10px; /* ★左右の余白を小さくする（上下は0にするのがSlickのコツ） */
    padding: 15px;  /* ★スマホ用に内側の余白も小さく */
}

/* PCなどの広い画面(768px以上)の時の設定を上書き */
@media (min-width: 768px) {
    .project_content {
        margin: 0 20px;
        padding: 30px;
    }
}

/* 中の画像 */
.project_content img {
    width: 100%; /* ★超重要！400px固定ではなく、箱の幅いっぱいに広げる */
    max-width: 400px; /* PCで大きくなりすぎないように最大幅を指定 */
    height: auto;
    margin: 0 auto; /* 画像をど真ん中に配置 */
}

/*
==============================
採用エリアの設定
==============================*/

.recruit-content {
	background-image: url("file:///E:/%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA/original_site/root/top/image/introBg.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 30px;
}

.recruit-txt::after,
.recruit-txt::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin: 40px 0;
    background-image: url("../image/decoration01.svg");
}