@charset "utf-8"; /*全体の設定 ---------------------------------------------------------------------------*/ body { color: #333; /*全体の文字色*/ background-color: #FFF; /*全体の背景色*/ background-image: url('../images/bg.gif'); /*背景画像の読み込み*/ margin: 0px; padding: 0px; font: 13px/2 "メイリオ", Meiryo, "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; /*文字サイズ/行間、フォントファミリー*/ } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; vertical-align: bottom; } input,textarea,select { font-size: 1em; } form { margin: 0px; } .auto-style1 { vertical-align: middle; margin: 2px; } /*リンク(全般)設定 ---------------------------------------------------------------------------*/ a { color: #333; /*リンクテキストの色*/ } a:hover { color: #958569; /*マウスオン時の文字色(全体)*/ text-decoration: none; /*マウスオン時に下線を消す設定。残したいならこの1行削除。*/ } /*コンテナー(HPを囲むブロック) ---------------------------------------------------------------------------*/ #container { width: 980px; /*コンテナー幅*/ margin: 0px auto; -webkit-box-shadow: 0px 0px 8px #999; /*影の設定。右・下・ぼかし幅・色の設定*/ box-shadow: 0px 0px 8px #999; /*同上*/ background-color: #FFF; /*コンテナーの背景色*/ padding: 0px 10px; /*上下、左右の余白*/ } /*ヘッダー(サイト名ロゴが入ったブロック) ---------------------------------------------------------------------------*/ /*ヘッダーブロック*/ header { width: 100%; /*ブロックの幅*/ height: 170px; /*ブロックの高さ*/ position: relative; } /*h1タグの設定*/ header h1 { font-weight: normal; /*通常太字なのを標準にする設定*/ color: #FFF; /*文字色*/ background-color: #958569; /*背景色*/ font-size: 10px; /*文字サイズ*/ text-align: right; /*文字を右寄せ*/ line-height: 18px; /*行間*/ } /*ロゴ画像の設定*/ header #logo { position: absolute; left: 10px; /*ヘッダーブロックに対して左から10pxの位置に配置*/ top: 38px; /*ヘッダーブロックに対して上から38pxの位置に配置*/ } /*電話番号ボックスの設定*/ header address { position: absolute; top: 38px; /*ヘッダーブロックに対して上から38pxの位置に配置*/ right: 20px; /*ヘッダーブロックに対して右から20pxの位置に配置*/ font-size: 18px; /*文字サイズ*/ text-align: center; /*文字をセンタリング*/ font-style: normal; /*通常斜体になっているのを通常に*/ letter-spacing: 0.1em; /*文字間隔を少し広めにとる設定*/ line-height: 1; /*行間*/ color: #958569; /*文字色*/ font-weight: bold; /*文字を太字に*/ } /*電話番号ボックス内の「TEL」の設定*/ header address .tel { display: inline-block; color: #FFF; /*文字色*/ background-color: #958569; /*背景色*/ padding: 2px 10px 1px; /*上、左右、左へのボックス内の余白*/ margin-right: 10px; font-weight: normal; } .breadcrumb { padding : 1px 1px 1px 0px; padding-left : 2px; text-align : left; font-weight : normal; color : gray; font-size : 11px; } .breadcrumb A{ font-size : 11px; font-weight:normal; color : gray; text-decoration:underline; } /*上部のメインメニュー ---------------------------------------------------------------------------*/ /*メニューブロックの設定*/ nav#menu ul { position: absolute; left: 0px; /*ヘッダーブロックに対して左から0pxの位置に配置*/ bottom: 0px; /*ヘッダーブロックに対して下から0pxの位置に配置*/ } /*メニュー1個ごとの設定*/ nav#menu ul li { float: left; width: 196px; /*メニュー幅*/ } nav#menu ul li a { height: 42px; /*ブロックの高さ*/ padding-top: 8px; line-height: 1.4; /*行間*/ text-decoration: none; display: block; margin: 0px 0px 20px 4px; /*メニューの外側への余白。上、右、下、左への指定。*/ font-size: 14px; /*文字サイズ*/ font-weight: bold; letter-spacing: 0.1em; /*文字間隔を少し広めにとる設定。*/ -webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/ transition: 0.5s; /*同上*/ border: 1px solid #CCC; /*枠線の幅、線種、色*/ border-radius: 4px; /*角丸のサイズ*/ background-color: #FFF; /*背景色(古いブラウザだとここの色のみが出ます)*/ background-image: url(../images/menu_bar1.png), -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#f4f4f4)); /*バー画像の読み込みとグラデーション*/ background-image: url(../images/menu_bar1.png), -webkit-linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%); /*同上*/ background-image: url(../images/menu_bar1.png), linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%); /*同上*/ background-repeat: no-repeat; /*背景のバー画像をリピートしない設定*/ background-position: left center; /*背景のバー画像の位置*/ text-align: center; /*文字をセンタリング*/ -webkit-box-shadow: 1px 2px 5px #e2e2e2, 0px 0px 1px #FFF inset; /*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定+内側への設定*/ box-shadow: 1px 2px 5px #e2e2e2, 0px 0px 1px #FFF inset; /*同上*/ } /*最初のメニューの設定*/ nav#menu ul li:first-child a { margin-left: 0px; } /*マウスオン時と、current(表示中のメニュー)の設定*/ nav#menu ul li a:hover, nav#menu ul li#current a { border: 1px solid #635946; /*枠線の幅、線種、色*/ background-color: #958569; /*背景色(古いブラウザだとここの色のみが出ます)*/ background-image: url(../images/menu_bar2.png), -webkit-gradient(linear, left top, left bottom, from(#958569), to(#7e7059)); /*バー画像の読み込みとグラデーション*/ background-image: url(../images/menu_bar2.png), -webkit-linear-gradient(#958569, #8f7f64 49%, #7e7059 50%, #918166 100%); /*同上*/ background-image: url(../images/menu_bar2.png), linear-gradient(#958569, #8f7f64 49%, #7e7059 50%, #918166 100%); /*同上*/ background-repeat: no-repeat; /*背景のバー画像をリピートしない設定*/ background-position: left center; /*背景のバー画像の位置。*/ color: #FFF; /*文字色*/ } /*英語表記の設定*/ nav#menu ul li a span { font-size: 9px; /*文字サイズ*/ color: #958569; /*文字色*/ display: block; font-weight: normal; } nav#menu ul li a:hover span, nav#menu ul li#current a span { color: #FFF; /*マウスオン時の文字色*/ } /*トップページのスライドショー ---------------------------------------------------------------------------*/ #mainimg { clear: left; width: 100%; /*幅*/ height: auto; /*高さ*/ position: relative; border-radius: 4px; /*角丸のサイズ*/ -webkit-box-shadow: 1px 2px 7px #ccc; /*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/ box-shadow: 1px 2px 7px #ccc; /*同上*/ margin-bottom: 20px; /*画像の下の余白*/ } #mainimg img { border-radius: 4px; /*角丸のサイズ*/ } #mainimg .slide_file { display: none; } #slide_image { z-Index:2; height: auto; width: 100%; position: relative; } #slide_image2 { z-Index:1; height: auto; width: 100%; position: absolute; left:0px; top:0px; } /*コンテンツ(main,subを囲むブロック) ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*メインコンテンツ ---------------------------------------------------------------------------*/ #main { float: left; /*左側に回り込み*/ width: 980px; /*メインコンテンツ幅*/ padding-bottom: 10px; } /*mainコンテンツのh2タグの設定*/ #main h2 { background-color: #000000; /*背景色(古いブラウザだとここの色のみが出ます)*/ font-size : 13px; text-align : left; font-weight : bold; color: #958569; /*文字色*/ padding: 7px 15px; /*上下、左右への余白*/ clear: both; border-bottom: 5px solid #958569; /*下の線の幅、線種、色*/ border-top: 1px solid #CCC; /*上の線の幅、線種、色*/ border-right: 1px solid #CCC; /*右の線の幅、線種、色*/ border-left: 1px solid #CCC; /*左の線の幅、線種、色*/ } /*mainコンテンツのh3タグの設定*/ #main h3 { background-color: #666699; /*背景色(古いブラウザだとここの色のみが出ます)*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#333)); /*グラデーション*/ color : white; text-align : center; -webkit-box-shadow: 1px 2px 5px #e2e2e2; /*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/ box-shadow: 1px 2px 5px #e2e2e2; /*同上*/ font-size: 100%; padding: 4px 15px; /*上下、左右への余白*/ clear: both; border: 1px solid #CCC; /*枠線の幅、線種、色*/ } /*mainコンテンツのh4タグの設定*/ #main h4 { padding: 2px 0px 2px 10px; /*上、右、下、左側への余白*/ font-size: 100%; border-bottom: 1px solid #CCC; /*下側の線の幅、線種、色*/ border-left: 3px solid #000; /*左側の線の幅、線種、色*/ margin-bottom: 0.5em; color: #000; /*文字色*/ } /*mainコンテンツの段落タグ設定*/ #main p { padding: 0.5em 15px 1em; /*左から、上、左右、下への余白*/ } #main ul{ padding: 0; margin: 0; width: 100%; } #main li{ float:left; width:120px; line-height:18px; overflow:hidden; font-size : 11px; text-align : center; } #main a{  text-decoration:none; white-space:nowrap; display:block; } .breadcrumb A{ font-size : 11px; font-weight:normal; color : gray; text-decoration:underline; } TABLE{ width : 980px; font-size : 13px; text-align : center; } IMG{border-width : 0px 0px 0px 0px;} /*テーブル1 ---------------------------------------------------------------------------*/ /*テーブル1 ---------------------------------------------------------------------------*/ /*** レスポンシブテーブルデザイン ***/ table ul{ padding: 0; margin: 0; width: auto; } table li{ float:left; padding: 2px 0px 2px 0px; overflow:hidden; font-size : 13px; text-align : center; } .type1 { border-collapse: collapse; width: 100%; border: 1px solid #000; } .type1 th, .type1 td { border: 1px solid #BBBDC0; padding: 2px; font-size : 13px; text-align: center; } .type1 th { color : white; background-color : #666699; text-align: center; } .type1 .p{ font-weight : bold; color : red; font-size : 14px; } .type1 FORM{ padding-top : 1px; padding-left : 1px; padding-right : 1px; padding-bottom : 1px; margin-top : 1px; margin-left : 1px; margin-right : 1px; margin-bottom : 1px; } .type1 .on { background-color: #e5e5ff; } .type1 .off { background-color: #fff; } .ta1 { width: 100%; border-collapse: collapse; } .ta1, .ta1 td, .ta1 th{ border: 1px; /*テーブルの枠線の幅、線種、色*/ line-height: 2; } /*テーブル内の右側*/ .ta1 td{ padding: 10px; } /*テーブル内の左側*/ .ta1 th{ width: 180px; padding: 10px; text-align: center; background-color: #e2e2e3; /*背景色*/ } @media only screen and (max-width: 480px) { .type1 tr, .type1 th, .type1 td { display: block; width: auto; } .type1 tr:first-child { border-top: 1px solid #dbe1e8; } .type1 th, .type1 td { border-top: none; } }/* end */ /*PAGE TOP設定 ---------------------------------------------------------------------------*/ #pagetop { clear: both; } #pagetop a { color: #FFF; /*文字色*/ font-size: 10px; /*文字サイズ*/ background-color: #958569; /*背景色*/ text-decoration: none; text-align: center; width: 12em; /*ボックス幅*/ display: block; float: right; letter-spacing: 0.1em; /*文字間隔を少し広めにとる設定。*/ } /*マウスオン時*/ #pagetop a:hover { background-color: #333; /*背景色*/ color: #FFF; /*文字色*/ } /*フッター設定 ---------------------------------------------------------------------------*/ footer { clear: both; text-align: center; padding-top: 15px; padding-bottom: 15px; color: #FFF; /*文字色*/ background-color: #958569; /*背景色*/ } footer .pr { display: block; font-size: 50%; } footer a { text-decoration: none; color: #FFF; } footer a:hover { color: #FFF; } /*その他 ---------------------------------------------------------------------------*/ .look { background: #dcdcdc; } .mb15 { margin-bottom: 15px; } .clear { clear: both; } ul.disc { padding: 0em 25px 1em; list-style: disc; } .color1 { color: #958569; } .pr { font-size: 10px; } .btn { font-size: 13px; } .wl { width: 96%; } .ws { width: 50%; } .r { text-align: right; } figcaption { font-size: 11px; } img { max-width: 100%; height: auto; } #menubar_hdr { display: none; } .mini1 { font-size: 11px; font-weight: normal; } .sortbox { background-color: #eee; text-align: right; padding: 10px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; margin-bottom: 15px; } .c{ text-align : center; width: 100%; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid; } .ttl{ color : #232323; background-color : #e8d5fd; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #1e1e1e #1e1e1e #1e1e1e #1e1e1e; font-size : 20px; text-align : left; font-weight : bold; } /*ここからタブレット用(481px~800px)環境の設定 ---------------------------------------------------------------------------*/ /*表示を切り替えるウィンドウサイズの指定*/ @media (min-width:481px) and (max-width:800px){ /*コンテナー(HPを囲むブロック) ---------------------------------------------------------------------------*/ #container { width: auto; } /*ヘッダー(サイト名ロゴが入ったブロック) ---------------------------------------------------------------------------*/ header { text-align: center; height: auto; margin-bottom: 15px; } /*h1ロゴの設定*/ header h1 { display: none; } /*ロゴ画像の設定*/ header #logo { position: static; padding: 10px 0px; /*ロゴの上下にあける余白が10px*/ } /*電話番号ボックスの設定*/ header address { position: static; width: auto; margin: 0px auto 20px; } /*上部のメインメニュー ---------------------------------------------------------------------------*/ /*メニューブロックの設定*/ nav#menu ul { position: static; } /*メニュー1個ごとの設定*/ nav#menu ul li { width: 50%; } nav#menu ul li a { margin: 0px; margin-bottom: 5px; } /*奇数番目のメニューの設定(※スマホ・タブレットでは「HOME」が隠れているので「サービス」「お問い合わせ」が奇数番目になる)*/ nav#menu ul li:nth-child(odd) { width: 49%; margin-left: 1%; } /*最後のメニューの設定*/ nav#menu ul li:last-child { margin-bottom: 20px; } /*コンテンツ(main,subを囲むブロック) ---------------------------------------------------------------------------*/ #contents { width: auto; } /*main,subコンテンツ ---------------------------------------------------------------------------*/ #main, #sub { float: none; width: auto; } /*その他 ---------------------------------------------------------------------------*/ /*指定の場合にsubブロックを表示させない設定*/ body.s-n #sub { display: none; } /*スマホ・タブレットで非表示(HOMEメニューに使用)*/ .stn { display: none; } } /*ここからスマートフォン用(480px以下)環境の設定 ---------------------------------------------------------------------------*/ /*表示を切り替えるウィンドウサイズの指定*/ @media (max-width : 480px){ /*コンテナー(HPを囲むブロック) ---------------------------------------------------------------------------*/ #container { width: auto; } /*ヘッダー(サイト名ロゴが入ったブロック) ---------------------------------------------------------------------------*/ header { text-align: center; height: auto; margin-bottom: 15px; } /*h1ロゴの設定*/ header h1 { display: none; } /*ロゴ画像の設定*/ header #logo { position: static; padding: 10px 0px; /*ロゴの上下にあける余白が10px*/ } header #logo img { width: 80%; /*画面に対してロゴ画像を80%の幅に*/ height: auto; } /*電話番号ボックスの設定*/ header address { position: static; width: auto; margin: 0px auto 20px; } /*上部のメインメニュー ---------------------------------------------------------------------------*/ /*メニューブロックの設定*/ nav#menu ul { position: static; } /*メニュー1個ごとの設定*/ nav#menu ul li { float: none; width: auto; } nav#menu ul li a { margin: 0px; margin-bottom: 5px; } /*最後のメニューの設定*/ nav#menu ul li:last-child { margin-bottom: 20px; } /*コンテンツ(main,subを囲むブロック) ---------------------------------------------------------------------------*/ #contents { width: auto; } /*main,subコンテンツ ---------------------------------------------------------------------------*/ #main, #sub { float: none; width: auto; } #main p { padding: 0.5em 5px 1em; } /*service.htmlで使っている紹介ボックスの設定 ---------------------------------------------------------------------------*/ /*ボックス内の段落タグ設定*/ #main section.list article p { margin-left: 0; } /*ボックス内の写真設定*/ #main section.list article figure img { width: 40%; height: auto; margin-right: 5px; } /*テーブル1 ---------------------------------------------------------------------------*/ /*テーブル内の右側*/ .ta1 td{ width: auto; padding: 2px; } /*テーブル内の左側の見出し部分*/ .ta1 th{ width: 100px; padding: 2px; } /*その他 ---------------------------------------------------------------------------*/ .ws { width: 96%; } /*指定の場合にsubブロックを表示させない設定*/ body.s-n #sub { display: none; } /*メニュー折りたたみ設定*/ #top #menubar_hdr { display: none; } #menubar_hdr { display: inline; position: absolute; top: 0px; right: 10px; background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e5e5e5)); background-image: -webkit-linear-gradient(#fbfbfb, #e5e5e5); background-image: linear-gradient(#fbfbfb, #e5e5e5); padding: 10px; border: 1px solid #cfcfcf; border-radius: 0px 0px 6px 6px; } /*スマホ・タブレットで非表示(HOMEメニューに使用)*/ .stn { display: none; } }