html, body{
    font-family: "Open Sans", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:auto;
    height:100%;

}
a{
    text-decoration: none;
    color: black;
}
.adobe{
    color: red;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: rgba( 255, 249, 238, 0.5);/*rbgaにしている理由は半透明にするためです。aの要素が透明度です。ここだと55%です*/
}
.headermobile{
    display: none;
}

.h-img{
    margin: 10px;
}/*ヘッダーのアイコン間のマージンを取ってます*/

.toppage{
    background-image: url(../image/kanasample02.png);
    background-size: cover;
    background-position: center;
    height: calc(100vh - 50px);/*100vhは画面の高さを100%にする指定です。50pxはヘッダーの高さ分を引いています*/
    /*便宜上高さを1000でとってます。*/
    /*border: dotted 2px;
    /*background-color: rgba( 255, 255, 255, 0.5 )/*トップページのdivの大きさを指定するためのcssです*/
}

.topbox{
    border-bottom: 1px solid rgb(77,77,77,);
}

.logobox{
    width:300px;
    height:300px;
    margin-top: 100px;
}/*位置のテストのために残しておいたCSSです。念のため残してありますが納品時には全くいらなくなります*/

.bukkentable,.bukkentd,.bukkentr{
    border:20px solid #fff;/*販売物件のテーブル間の余白をとるために10pxの白の実線の枠にしています*/
    text-align: center;
    background-color: #fff;
}/*テーブルの枠線を消す記述のCSSです*/



.chirashitable,.chirashitd,.chirashitr{
    border:30px solid #fff;/*チラシのテーブル間の余白をとるために10pxの白の実線の枠にしています*/
    text-align: center;
    background-color: #fff;
}/*テーブルの枠線を消す記述のCSSです*/


.titleh2{
    padding-top: 150px;
    margin-top: 0;
}/*このマージンゼロはコンテンツ間の余白を消すためのものです。3/17修正分100px→150px*/
.bukken{
    height:6815px;/*追記前8755 22/02/02*/
    background-color: #fff;/*一列追加ごとに450px追加*/
}
.bukkentop{
    height:auto;/*追記前1960 2.2 (一列減らしてあります)* 2025/08/27 1435→変更済み*/
    background-color: #fff;/*一列追加ごとに450px追加*/
}
.contents01{
    height:1680px;/*追記前1705 22/02/02(マザーズパートナー削除前)*/
    background-color: #fff;
}/*このコンテンツの高さは便宜上1200にしてあります。必要とあらばすぐ変えます(22.01.09時1750)*/
.motherscompany{
    height:940px;
    background-color: #fff;
}/*このコンテンツの高さは便宜上1200にしてあります。必要とあらばすぐ変えます(07.01時1420)*/
.click-company:hover {
  opacity: 0.7;
}
.container{
    display: flex;
    width: auto;
    height:300px;
    border: solid 1px;
}/*lightboxの並びを横にするcssです*/

.kaisha {
width: auto;
margin: auto;
}
 
.kaisha th,
.kaisha td {
border-bottom: 1px solid rgb(219,230,243);
padding: 25px;
}
 
.kaisha th {
font-weight: bold;
border-left: solid 10px rgb(81,131,190);
 
}/*会社概要のテーブルに対するスタイルシートです*/

.recruit {
width: auto;
margin: auto;
}
 
.recruit th,
.recruit td {
border-bottom: 1px solid rgb(219,230,243);
padding: 25px;
}
 
.recruit th {
font-weight: bold;
border-left: solid 10px rgb(185,205,229);
 
}/*求人情報のテーブルに対するスタイルシートです*/

.contents02{
    height: 700px;/*1.15追記2295→ 一列ごとに275 officeページの高さを指定　アクセスのみのレイアウトの場合使用*/
    background-color:#fff;
}
.contents002{
    height: 900px;/*2.10追記　officeページのコンテンツの高さを指定しています*/
    background-color:#fff;
}
.contents03{
    height: 1000px;
    background-color:#fff;
}
.contents003{
    height: 3235px;/*住所変更なければ3700に戻す*/
    background-color:#fff;
}

.contents04{
    height: 700px;
    background-color:#fff;
}/*人材派遣用(agency.html)のコンテンツの高さです*/
.contents05{
    height:1200px;
    background-color: #fff;
}

.jinzaihaikei{
    margin: 0;
	padding: 0;
	vertical-align: bottom;/*人材派遣のページの背景画像の下の余白をなくすためのスタイルシートです*/
}

.staff {
width: 880px;
}
 
.staff td {
border-bottom: 1px solid rgb(219,230,243);
padding: 20px;
}/*人材派遣のテーブルに対するスタイルシートです*/
.contactform{
    text-align: center;
}

.contact {
width: 880px;
}
 
.contact td {
border-bottom: 1px solid rgb(219,230,243);
padding: 20px;
}/*お問い合わせのテーブルに対するスタイルシートです*/

.accessh2{
    padding-top: 100px;
    padding-bottom: 50px;
    margin-top: 0;
}
.contactbox{
    height: 700px;
    background-color: #fff;
}
.contactbox02{
    height: 800px;
    background-color: #fff;
}
.contacttext{
    width: 700px;
    margin: auto;
}
.compliance{
    text-align: left;
}
.finish{
    height: 500px;
    background-color: #fff;
}
/**.boxlogo{
    position: relative;
    left: 50px;
}**/
.box01{
    width:400px;
    height:220px;
    position: relative;
    left: 100px;
}
.box001{
    width:500px;
    height:100px;
    position: relative;
    left: 100px;
}
.ggmap{
    text-align: center;
    
}

.footer{
    height:150px;
    background-color: rgb( 219,230,243);
    display: flex;
    justify-content: center;
    font-weight:bold;
    font-size: small;
    width:auto;
}/*フッターの青枠のサイズやフォントを決めています*/

.footerlogotext{
    margin: 0;
    padding: 0;
}


.flex-footermenu{
    display: flex;
    position: relative;
    margin-top: 30px;
}/*マージン20pxでメニュー上の余白を確保しています 修正前35*/

.footercontact{
    width: 400px;
    height: 100px;
    
}

.footerlogo{
    width: 320px;/*調整前400px*/
    /*height: 200px;*/
    margin-top: 18px
}/*マージン20pxでロゴ上の余白を確保しています*/

.footertext{
    position: relative;
    left:10px;
    margin: 0;
}/*ポジションとleftで住所と電話のテキストの開始位置を決めています*/

                    .bukkenmobile{
                        display: none;
                    }
                    .topgazomobile{
                        display: none;
                        }
                    .global_nav{
                        display: none;
                    }
                    .toggle{
                        display:none;
                    }
                    .flyermobile{
                        display: none;
                    }
                    .footermobile{
                        display: none;
                    }
                    .contents04mobile{
                        display: none;
                    }
.staffmobile{
    display: none;
}
.companymobile{
    display: none;
}
.mobilecontacttext{
    display: none;
}
.accessmobile{
    display: none;
}
/*スマホ対応CSS*/
@media screen and (max-width: 768px) {
                    .toppage{
                        display: none;
                    }
                    .topgazomobile{
                        display: inherit;
                        width: 100%;
                    }
                    .header{
                        display: none;
                    }
                    .logobox{
                        display: none;
                    }/*レスポンシブ化後のトップ画像のアイコンを消しています*/
                    .toppage,.footermobile,.header,.contents01 company{
                        overflow: hidden;
                    }
    
                    .ggmap{
                        width:100%;
                        margin: auto;
                        
                    }/*スマホ版グーグルマップの横幅を決めています*//*max-width修正前750px*/
    .box01{
    width:300px;
    height:180px;
    text-align: left;
}
    .contacttext{
        display: none;
    }
    .mobilecontacttext{
        display: inherit;
    }
    
    .contents03{
        display:none;
    }
    .contents03{
        display:none;
    }
    .contents003{
        display:none;
    }
    .accessmobile{
        display: inherit;
    }
    
    .contents01{
        display: none;
    }
    .motherscompany{
        display: none;
    }
    .contents05{
        display: none;
    }
    .companymobile{
        display: inherit;
    }
    .footer{
        display: none;
        
    }/*フッターの切り替え用です*/
    .footer-test{
        display: none;
        
    }/*フッターの切り替え用です*/
                    .footermobile{
                        display: inherit;
                    height:200px;
                    background-color: rgb( 219,230,243);
                        width: auto;
                    }
                    .footermobilecontact,.footermobilelogo02{
                        text-align: center;
                        font-size: 9px;
                    }
                    .footermobiletext{
                        font-size: 9px;
                        text-align: center;
                    }/*スマホ用フッターのCSSです*/
                    /*.toppage{
                        background-image: url(../image/bukken/comingsoon.png)
                    }レスポンシブ化後のトップ画像の指定です*/
                    body{
                        font-size: 10px;
                    }
                .kaisha tr,.kaisha td,.kaisha th,
                
                .recruit tr,.recruit td,.recruit th{
                    display:block;
                    }/*レスポンシブ化後表のセルが立て並びになる指定です。*/
                .kaisha th {width:auto;}
                .contents01{
                    width:auto;
                    height:1500px;
                    background-color: #fff;
                    }/*レスポンシブ化後の会社概要の高さを指定しています。*/
                .contents05{
                    height:1700px;
                    background-color: #fff;
                    }
                    .bukken{
                        display: none;
                    }
                    .bukkentop{
                        display: none;
                    }/*1/15追記*/
                    .bukkenmobile{
                        display: inherit;
                        font-size: 9px;
                    }
                    .flyer{
                        display:none;}
    

                    .flyermobile{
                        display:inherit;
                        font-size: 9px;
                    }
                    .contents02mobile{
                        height: 555px;
                    background-color:#fff;
                    }/*チラシページの高さの設定です(21.09.01.700px)*/
    /*以下記述がハンバーガーメニューについてです*/
                            .headermobile{
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            position: fixed;
                            width: 100%;
                            height: 70px;
                            background-color: rgba( 77, 77, 77, 0.5 );/*rbgaにしている理由は半透明にするためです。aの要素が透明度です。ここだと55%です*/
                        }
                            .headermobile img{
                                text-align: left;
                            }
    
    
                         .toggle {
                            position: fixed; /* bodyに対しての絶対位置指定 */
                            right: 13px;
                            top: 13px;
                            display: block;
                            width: 45px;
                            height: 50px;
                            cursor: pointer;
                            z-index: 3;
                            /*background: rgba( 255, 255, 255, 0.5 );*/
                        }
                        .toggle span {
                            display: block;
                            position: absolute; /* .toggleに対して */
                            width: 70%;
                            border-bottom: solid 3px rgba(255,255,255,1);
                            -webkit-transition: .35s ease-in-out;
                            -moz-transition: .35s ease-in-out;
                            transition: .35s ease-in-out;
                            padding-top: 5px;
                            right: 7px;
                        }
                        .toggle span:nth-child(1) {
                            top: 3px;
                        }
                        .toggle span:nth-child(2) {
                            top: 13px;
                        }
                        .toggle span:nth-child(3) {
                            top: 23px;
                        }
                        .toggle span:nth-child(4) {
                            border: none;
                            top: 28px;
                            left: 5px;
                            font-size: 12px;
                            font-weight: bold;
                        }
                            /* 最初のspanをマイナス45度に */
                        .toggle.active span:nth-child(1) {
                            top: 15px;
                            left: 4px;
                            -webkit-transform: rotate(-45deg);
                            -moz-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                        }
                        /* 2番目と3番目のspanを45度に */
                        .toggle.active span:nth-child(2),
                        .toggle.active span:nth-child(3) {
                            top: 15px;
                            -webkit-transform: rotate(45deg);
                            -moz-transform: rotate(45deg);
                            transform: rotate(45deg);
                        }

                            /* .global_nav */
                        .global_nav {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            transform: translateY(-100%);
                            z-index: 2;
                            padding-top: 50px;
                            text-align: center;
                            color: #000;
                            background: rgba( 77, 77, 77, 0.7 );
                            transition: all .8s;  
                            display: inherit;
                        }
                        .global_nav .nav_li {
                            /*display:inline-block;/*グローバルナビゲーションの中央揃え*/
                            width: 100%;
                            padding: 10px;
                            margin: 0;
                            list-style-type: none;
                            letter-spacing: 3px;
                        }
                        .global_nav .nav_li a {
                            display: block;
                            color: #fff;
                        }
    

                            /* .global_navに.activeが追加 */
                        .global_nav.active {
                            transform: translateY(0%);
                        }
    .contents04{
        display:none;
    }
    .contents04mobile{
        display: inherit;
        width: 100%;
    }
    .staff{
        display: none;
    }
    .staffmobile{
        display: inherit;
    }
    .staffmobile td {
    border-bottom: 1px solid rgb(219,230,243);
    padding: 20px;
    }
}/*会社概要におけるレスポンシブ対応の記述です*/


/*記事に埋め込んだGoogleマップの角丸化*/
/*iframe[src^="https://www.google.com/maps/embed?"] {
    border-radius: 10px !important;
}*/

/* --- フッター --- */
.site-footer {
    background-color: #f8f8f8;
    color: #333;
    padding: 60px 5%;
    font-size: 14px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* フッターメニュー */
.footer-nav {
    /* メニューが長すぎる場合に備え、最小限の幅を確保 */
    min-width: 0;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* ★変更点: PC表示では折り返さない */
    flex-wrap: nowrap; 
}

.footer-nav li {
    line-height: 1.5;
    white-space: nowrap; 
}

.footer-nav li:not(:last-child) {
    margin-right: 12px;
    padding-right: 13px;
    border-right: 1px solid #ccc;
}

.footer-nav a {
    /* 画面幅に応じてフォントサイズを可変させる */
    font-size: clamp(10px, 1.3vw, 14px);
    
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #007bff;
}

/* フッターバナー */
.footer-banner {
    margin-left: auto; 
    flex-shrink: 0; 
    /* ★追加: Flexboxを有効にし、中の要素を中央揃えにする */
    display: flex;
    align-items: center;
    gap: 15px; /* ★追加: アイコンとバナーの間の余白 */
}

.footer-banner img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* コピーライト */
.copyright {
    text-align: center;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid #e5e5e5;
    font-size: 12px;
    color: #777;
}

/* ★★★ スマートフォン・タブレット向けのスタイル ★★★ */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-nav {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .footer-nav ul {
        /* ★変更点: 画面が狭くなったら折り返しを許可する */
        flex-wrap: wrap;
    }

    .footer-nav li {
        /* 折り返した際の項目下の余白 */
        margin-bottom: 10px;
    }

    .footer-banner {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ★追加: SNSアイコンのスタイル */
.sns-icon img {
    display: block;
    /* ★追加: 高さを親要素(バナー)に合わせる */
    height: 100%;
    max-height: 80px; /* バナーの元々の高さに合わせる（任意で調整） */
    width: auto; /* 幅は自動調整 */
}

/* ★追加: メインバナーのスタイル */
.banner-main img {
    display: block;
    max-width: 100%;
    height: auto;
}