@charset "UTF-8";

/* --- 約物Webフォントの読み込み --- */
@font-face {
  font-family: "Yakumono";
  src: url("./YakuCaltGothic-R.woff") format("woff");
}

/* --- ブラウザの仕様で文字サイズが変わらないようにする --- */
body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /*Chrome,Safari*/
  -ms-text-size-adjust: 100%; /*EgdeMobile*/
  -moz-text-size-adjust: 100%; /*firefox*/
}

body {
	font-family: "Yakumono", "游ゴシック体 ミディアム", "YuGo-Medium", "游ゴシック Medium", "Yu Gothic UI Regular", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #666666;
	table-layout: fixed;
	background-color: #FFFFFF;
/*	background-color: #4E5869; */
	margin: 0;
	padding: 0;
}

/* --- エレメント／タグセレクター --- */
ul, ol, dl { /* ブラウザー間の相違により，リストの余白とマージンをゼロにすることをお勧めします．一貫性を保つために，量をここで指定するか，リストに含まれるリスト項目 (LI，DT，DD) で指定できます．より詳細なセレクターを記述しない限り，ここで指定する内容が .nav リストにも適用されることに注意してください． */
	padding: 0;
	margin: 0;
}
h1, h3, h4, h5, h6 {
	margin-top: 0px; /* 上マージンを削除すると，マージンを含む div からマージンがはみ出す場合があるという問題を回避できます．残った下マージンにより，後続のエレメントからは離されます． */
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px 0px 8px 0px;
}
h2 {
	font-family: "Yakumono", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
/* --- h2 は游ゴシックを使わず，ヒラギノ角ゴ or MS にする --- */
	font-size: 20px;
	color: #00CCFF;
	letter-spacing: 6px;
/*	text-indent: 8px; */
	font-weight: normal;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 24px 0px;
/*	border-bottom: 1px solid #CCC; */
/*	border-left: 14px solid #CCC; */
}
p {
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 8px 0px;
}
img.kakomi {
	border: 1px solid #CCCCCC;
}
a img { /* このセレクターは，一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します． */
	border: none;
	border-width: 0;
	_vertical-align:bottom;
	*vertical-align:bottom; /* ←これはIE6対策．アンダースコアを先頭につけることで，IE6だけが認識するようになる． */
}

/* --- 以下，文字列へのリンク関連の擬似クラスセレクタの定義．記述の順番は変えないこと． --- */
a:link {
	text-decoration: none;
	color: #666666;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover, a:focus {
	text-decoration: underline;
	color: #666666;
}
a:active {
	text-decoration: none;
	color: #0000FF;
}

/* --- この container が他のすべての div を囲み，（リキッドの場合は）パーセンテージに基づいた幅を指定します．--- */
.container {
	width: 768px;
/*	width: 80%; */
/*	max-width: 1260px; /* レイアウトが大型モニターで広がりすぎないように，最大幅を指定することをお勧めします．これにより，読みやすい行の長さを保つことができます．IE6 ではこの宣言は無視されます． */
/*	min-width: 780px; /* レイアウトが狭くなりすぎないように，最小幅を指定することをお勧めします．これにより，サイドカラムで読みやすい行の長さを保つことができます．IE6 ではこの宣言は無視されます． */
	background-color: #FFFFFF;
	margin: 0 auto; /*幅に加え，両側を自動値とすることで，レイアウトが中央に揃います．.container の幅を 100% に設定した場合，これは必要ありません． */
	padding: 0px 0px 16px 0px;
}
.container02 {
	width: 392px;
	background-color: #FFFFFF;
	margin: 0 auto; /*幅に加え，両側を自動値とすることで，レイアウトが中央に揃います．.container の幅を 100% に設定した場合，これは必要ありません． */
}

/* --- ヘッダーには幅は指定されません．ヘッダーはレイアウトの幅全体まで広がります．ヘッダーには，ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます．--- */
.header {
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 24px;
	margin-left: auto;
}

/* --- レイアウトに使用するカラムです．

1) 余白は，div の上部または下部にのみ配置されます．これらの div 内のエレメントには，それ自体に余白があるので，ボックスモデル計算を行う必要がありません．ただし，div 自体に両側の余白やボーダーを指定した場合，その値が加算されたものが合計幅になることに注意してください．div 内のエレメントの余白を削除し，さらにその div 内に，全体のデザインに必要な幅や余白を指定していない 2 つ目の div を追加することもできます．

2) カラムはすべてフロートしているため，マージンは指定されていません．マージンを追加する必要がある場合は，フロート方向には指定しないでください (例えば，右フロートに設定した div の右マージン)．多くの場合，代わりに余白を使用できます．このルールに従わない場合は，div のルールに「display:inline」宣言を追加し，一部のバージョンの Internet Explorer でマージンが 2 倍になるバグを回避する必要があります．

3) クラスはドキュメント内で複数回使用できるので (またエレメントには複数のクラスを適用できます)，カラムには ID ではなくクラス名が割り当てられます．例えば，必要に応じて 2 つのサイドバー div をスタックできます．クラスを各ドキュメントで一度しか使用しないのであれば，ユーザーの好みに応じて，クラス名を ID に変更することができます．

4) ナビゲーションを左ではなく右に配置したい場合，これらのカラムを反対方向にフロートさせると (すべて左方向にする代わりに，すべて右方向に設定)，反転してレンダリングされます．HTML ソース内で div を移動する必要はありません．

--- */
.sidebar1 { /* サイドバーの設定 */
	float: left;
	width: 180px;
	background-color: #FFFFFF;
	padding-bottom: 28px;
	padding-right: 28px;
}
.content { /* メインコンテンツの設定 */
	float: left;
/*	position: relative; */
	width: 560px;
/*	width: 80%; */
	background-color: #FFFFFF;
/*	padding: 0px 0px 0px 208px; /* padding だとサイドバーを覆い隠してしまうため，だめ．もし必要なら margin を使うべし */
/*	margin: 0 10px 0 208px; */
}
.books { /* 使用事例ページの本の紹介の外枠 */
	float: left;
/*	clear: both; */
	width: 560px;
	padding: 0px 0px 8px 0px;
}
.books_cover { /* 本の紹介 書影画像部分 */
	float: left;
	width: 100px;
	padding: 0px 12px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.books_cover p { /* 本の紹介 書影画像の p の設定 */
	margin: 0px 0px 0px 0px;
}
.books_data { /* 本の紹介 文字データ部分*/
	float: left;
	width: 434px;
/*	padding: 0px 0px 0px 116px; */
}
.prvc { /* プライバシーポリシーのページの設定 */
	background-color: #FFFFFF;
	padding: 24px 0px 16px 0px;
	margin: 16px 0px 0px 0px;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
}
.prvc02 { /* プライバシーポリシーのページの設定（内側） */
	margin: 0px 14px 0px 14px;
}

/* --- このセレクターグループは，.content 内のリストに領域間隔を指定します． --- */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* この余白は，上述の見出しと段落ルールの右の余白を表します．下の余白はリスト内の他のエレメントとの間隔用に配置され，左の余白はインデント作成用に配置されています．これは必要に応じて調整できます． */
}

/* --- ナビゲーションリストのスタイル付け (Spry などの事前作成済みのフライアウトメニューを使用する場合は削除できます)  --- */
ul.nav {
	list-style: none; /* リストのマーカーを削除します． */
	border-top: 1px solid #CCC; /* リンク用の上部のボーダーを作成します．他のすべてのものは LI 上で下部のボーダーを使用して配置されます． */
	margin-bottom: 15px; /* 下のコンテンツのナビゲーション間の間隔を作成します． */
}
ul.nav li {
	border-bottom: 1px solid #CCC; /* ボタンの区切り線を作成します． */
	padding: 8px 0px 8px 0px;
	background-image: url(images/arrow.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 12px 12px;
	text-indent: 0px;
}
ul.nav a, ul.nav a:visited { /* これらのセレクターをグループ化することで，リンクのボタン表示が訪問後も確実に保持されます． */
	padding: 6px 0px 6px 14px;
/* 	display: block; リンクにブロックプロパティを指定し，リンクが含まれる LI 全体がリンクになるようにします．これにより，領域全体がマウスのクリックに反応するようになります． */
	text-decoration: none;
/*	background-color: #8090AB; */
	color: #666666;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* マウスを使用する場合もキーボードを使用する場合も，背景色とテキストカラーを変更します．  */
/*	background-color: #6F7D94; */
	text-decoration: underline;
	color: #999999;
}

/* --- フッター --- */
.footer {
	padding: 12px 0px 0px 0px;
	background-color: #FFFFFF;
	position: relative; /* IE6 に，適切にクリアするための hasLayout を指定します． */
	clear: both; /* この clear プロパティにより .container は，カラムの範囲がどこまでかを認識してその範囲を含めるようになります． */
}

/* --- その他の float/clear クラス --- */
.fltrt { /* このクラスを使用すると，ページ内でエレメントを右にフローティングさせることができます．フローティングさせるエレメントは，ページ内で横に並べて表示するエレメントの前に指定する必要があります． */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると，ページ内でエレメントを左にフローティングさせることができます．フローティングさせるエレメントは，ページ内で横に並べて表示するエレメントの前に指定する必要があります． */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは，#footer が #container から削除されているか取り出されている場合に，<br /> または空の div で，フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます． */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* --- クラスセレクタ --- */
.midashi-books {
	font-family: "Yakumono", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
	font-size: 24px;
	color: #00CCFF;
	letter-spacing: 8px;
	word-spacing: normal;
	text-indent: 2px;
	font-weight: normal;
}
.midashi-archives {
	font-family: "Yakumono", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
	font-size: 20px;
	color: #00CCFF;
	letter-spacing: 0.5em;
	word-spacing: normal;
	text-indent: 2px;
	font-weight: normal;
}
.midashi-24 {
	font-family: "游ゴシック体 ボールド", "YuGo-Bold", "游ゴシック Bold", "Yu Gothic UI Bold", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #999999;
	list-style: none;
	-webkit-font-smoothing: antialiased;
}
.midashi-16 {
	font-family: "游ゴシック体 ボールド", "YuGo-Bold", "游ゴシック Bold", "Yu Gothic UI Bold", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
}
.midashi-14 {
	font-family: "游ゴシック体 ボールド", "YuGo-Bold", "游ゴシック Bold", "Yu Gothic UI Bold", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
}
.text14px {
	font-size: 14px;
}
.text12px {
	font-size: 12px;
	line-height: 18px;
}
.text10px {
	font-size: 10px;
}
.handcntr {
	line-height: 24px;
	height: 24px;
	background-image: url(images/hand.svg);
	background-repeat: no-repeat;
	background-position: left center;
	text-indent: 36px;
}
/* 最初の1文字のみ青色に */
.blue:first-letter {
	color: #00CCFF;
	letter-spacing: 0.5em;
}
/* 会社概要ページの表組用 */
.corpinfo_01{
	width: 100%;
	border-collapse: collapse;
}
.corpinfo_01 th{
	width: 72px;
	padding: 8px 0px 8px 0px;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	font-weight: normal;
}
.corpinfo_01 td{
	padding: 8px 0px 8px 0px;
	background-color: #fff;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	vertical-align: top;
}
/* 最寄り駅案内の表組用 */
.corpinfo_02{
/*	width: 100%; */
	border-collapse: collapse;
}
.corpinfo_02 td{
	padding: 0px 14px 2px 0px;
	background-color: #fff;
/*	border-top: 1px solid #CCCCCC; */
/*	border-bottom: 1px solid #CCCCCC; */
	vertical-align: top;
	text-align: left;
}
/* =================================== */
/* Google カスタム検索のデザイン変更 */
/* =================================== */
/* 全体の幅と位置 */
#gsc {
    width: 180px !important;
/*	float: left; */
    margin:0 auto; 
    position:relative;
}
/* 余白の再設定 */
#gsc .gsc-control-cse, 
#gsc .gsc-control-cse-ja,
#gsc .gsib_a{
    margin:18px 0 0 -6px; !important;
    padding:0 0 0 0; !important;
}
/* テキスト入力フォームとボタンの位置 */
#gsc table.gsc-search-box td,
#gsc table.gsc-search-box input {
    vertical-align: top !important;
}
/* テキスト入力フォーム　通常時 */
#gsc input[type="text"]{
	border: 1px solid #CCCCCC !important;
	height: 19px !important;
}
/* テキスト入力フォーム　フォーカス＝入力時 */
#gsc input[type="text"]:focus {
	border: 1px solid #00CCFF !important;
	outline: 0;  /*safariの自動フォーカスを切る */
}
/* テキスト入力フォームの影を消す */
#gsc #gsc-iw-id1{
    border:none !important;
}
/* テキスト入力フォームの背景画像位置調整 */
#gsc #gs_tti0 input{
    background-position:5px 5px !important;
}
/* ボタンの色 */
#gsc input.gsc-search-button {
background: #999999 !important;
background: -ms-linear-gradient(top,  #999999 0%,#999999 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999 !important;
}
/* ボタンの位置調整と角丸消し */
#gsc .gsc-search-button{
    margin:0 0 0 6px !important;
    border-radius:0;
}
/* 入力時に出る「×」ボタンの位置調整 */
#gsc .gsib_b a{
    position:absolute;
    top:0px;
    left:50px;
}
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#gsc .gsib_b span{
        box-sizing: border-box;
   -moz-box-sizing: border-box;
        padding:2px 0 0 0;
}

/* 新サイトへのリンク文字 */
.newSiteMess {
  display: inline-block;
  transform: scale(0.95, 1);
  transform-origin: top left;
}