@charset "UTF-8";

/* --- 1. 基本設定 --- */
html { height: 100%; }
body {
    font-size: 12px;
    font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    background-color: #f4f7f8 !important; 
    background-image: none !important;
    margin: 0; padding: 0; height: 100%;
}
* { box-sizing: border-box !important; }
img { border: none; vertical-align: bottom; }
a:link { text-decoration: none; color: black; }
a:hover { color: maroon; text-decoration: underline; }
a:visited { color: maroon; }

/* --- 2. レイアウト構造 --- */
#wrapper {
    width: 1000px !important;
    margin: 0 auto !important;
    background: #FFFFFF !important;
    overflow: hidden;
    padding-top: 10px !important;
    padding-bottom: 30px !important;
}

#left {
    width: 210px !important;
    float: left !important;
    background-color: #FFFFFF !important;
}

#right {
    width: 780px !important; /* 合計1000pxになるように調整 */
    float: left !important;
    padding: 0 10px 15px 15px; /* 右側の余白を少し調整 */
}

a img { transition: 0.3s ease; }
a:hover img { opacity: 0.7; filter: brightness(110%); }

/* --- 3. ヘッダー・ナビ --- */
h1.margin0.textcenter {
    background-color: #003366 !important;
    color: #ffffff !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    letter-spacing: 1px;
    margin: 0 0 20px 0 !important;
    text-align: center;
}
#header {
    width: 1000px;
    height: auto;
    min-height: 90px; /* PCでは最低90pxは確保 */
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    z-index: 10;
    overflow: hidden; /* これが「浮き上がり」を防止する魔法です */
}
.topannai { width: 350px; padding: 15px 10px; font-weight: bold; float: left; line-height: 1.5; }
.header-right { float: right; width: 260px; text-align: right; padding-top: 5px; }
.toptoiawaseue { background-color: #EBEBEB; padding: 5px; font-size: 1.4em; font-weight: bold; text-align: center; margin-bottom: 5px; }
.toiawase {
    background-color: #0066cc !important;
    height: 35px; line-height: 35px; text-align: center; border-radius: 5px;
}
.toiawase a { color: #fff !important; font-size: 1.5em; font-weight: normal; display: block; }

#navi {
    width: 1000px; height: 40px; background-color: #333;
    display: flex; list-style: none; padding: 0; margin: 0;
}
#navi li { flex: 1; text-align: center; border-right: 1px solid #fff; }
#navi li:last-child { border-right: none; }
#navi li a {
    display: block; line-height: 40px; color: #fff; font-weight: bold; font-size: 13px; transition: 0.3s;
}
#navi li a:hover { background-color: #444; text-decoration: none; color: #ff9900; }

/* --- 4. サイドメニュー --- */
#leftnavi { margin: 0 !important; padding: 0; list-style: none; border-top: 1px solid #dcdcdc; }
#leftnavi li { border-bottom: 1px solid #dcdcdc; background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); }
#leftnavi li a {
    display: flex; align-items: center; padding: 10px 6px !important; font-weight: bold; color: #333; white-space: nowrap; letter-spacing: -0.5px; font-size: 13px; transition: 0.2s;
}
#leftnavi li a:hover { background: #ffffff; padding-left: 10px !important; color: #003366; text-decoration: none; }
#leftnavi li a img { width: 20px !important; height: 20px !important; margin-right: 6px !important; }

/* --- 5. コンテンツ要素 --- */
.oshirase-box { width: 1000px !important; margin: 0 !important; }
h2, h3 {
    background-color: #f8f9fa !important; color: #333 !important;
    border-left: 8px solid #ff9900 !important; border-bottom: 1px solid #ddd !important;
    padding: 10px 15px !important; font-size: 16px; font-weight: bold;
    margin-bottom: 10px; width: 100% !important; clear: both;
}
.topmenu_new { float: left; width: 31%; margin: 1%; text-align: left; }
.topmenu_new h4 { width: 100%; border: 1px solid #ddd; margin-bottom: 5px; text-align: center; background-color: #96C2E7; }
.topmenu_new img { width: 100%; border: 1px solid #ddd; margin-bottom: 2px; }
#topics { list-style: none; padding: 0; margin: 0; width: 100% !important; }
#topics li { padding: 8px 15px; border-bottom: 1px gray dotted; line-height: 150%; }

/* ページタイトル */
.titleimag {
    width: 100%; height: 60px; background-color: #666; 
    margin-bottom: 20px; display: flex; align-items: center; padding-left: 20px;
}
.titleimag p { font-size: 22px; font-weight: bold; color: #fff; margin: 0; }



/* --- 6. フッター & 共通パーツ --- */
#footer {
    width: 1000px; background-color: #003366 !important; color: #ffffff !important;
    clear: both; text-align: center; padding: 20px 0 !important;
    margin-top: 40px !important; border-top: 4px solid #e7e7e7;
}
#footer p { color: #ffffff !important; margin: 5px 0 !important; }
.textcenter { text-align: center; }
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.paddingtb { padding: 5px 0; }
.paddingbottom10 { padding-bottom: 10px; }
.lefttext p { line-height: 160%; font-size: 11px; padding: 0 10px; color: #333; }

@media(min-width: 768px){ a[href^="tel:"]{ pointer-events: none; } }

/* --- 7. 問い合わせページ専用スタイル（追加分） --- */
#formWrap { width: 95%; margin: 0 auto; color: #333; }
table.formTable { width: 100%; margin: 15px auto; border-collapse: collapse; }
table.formTable td, table.formTable th { border: 1px solid #ccc; padding: 12px 10px; font-size: 13px; }
table.formTable th { width: 25%; font-weight: bold; background: #f7f9fa; text-align: left; }
form input[type=text], form select, form textarea { width: 100%; padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
form input[type=submit], form input[type=reset], form input[type=button] { padding: 10px 30px; font-size: 15px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; }
form input[type=submit] { background-color: #0066cc; color: white; margin-left: 10px; }
form input[type=submit]:hover { background-color: #003366; }
form input[type=button], form input[type=reset] { background-color: #e0e0e0; color: #333; }
@media screen and (max-width:600px) {
    table.formTable th, table.formTable td { display: block; width: 100%; }
    table.formTable th { border-bottom: none; }
}


/* --- スマホ対応用レスポンシブ設定（CSSの一番下に追記） --- */
@media screen and (max-width: 1000px) {
    /* コンテナの幅を固定から柔軟に */
    #wrapper, #header, #navi, .oshirase-box, #footer {
        width: 100% !important;
        margin: 0 !important;
    }

    /* サイドバーとメインコンテンツを縦並びに */
    #left, #right {
        width: 100% !important;
        float: none !important;
    }
    
    /* 左右の余白を調整 */
    #right {
        padding: 15px !important;
    }

    /* 画像の幅をはみ出さないように */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ヘッダーのレイアウト調整 */
    .topannai, .header-right {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        margin-bottom: 10px;
    }

    /* メニューの3列表示を縦積みに */
    .topmenu_new {
        width: 98% !important;
        margin: 1% auto !important;
    }
    
    /* 文字サイズをスマホ向けに見やすく */
    body { font-size: 15px !important; line-height: 1.6 !important; }
    
    /* トップナビを非表示にする */
    #navi {
        display: none !important;
    }
}

/* --- ページコンテンツ共通 --- */
.service-img-box{
	float:left;
	margin-right:10px;
}