/* =======================================================
		ＴＹ企画ホームページ
========================================================*/
@charset "shift-jis";

body { margin:1px 2px; font-size:96%; background-color:#d2efff; padding:1px; background-image:url('00_data/back22.jpg'); background-attachment: fixed;}

/*-----------------------------------------------
 最外郭ボックス page
-----------------------------------------------*/
#page { width:100%; margin:8px auto; padding:0px; position:relative; background-color:#ffffff; }
#page p { padding-left:10px; padding-right:10px; }

@media only screen and (max-width:750px) { img { max-width: 100%; } } /* 写真を表示枠内に収める */

h1 { font-size:1.0em; letter-spacing:0px; }
h2 { font-size:1.0em; letter-spacing:0px; }
strong { color:#CC0000; font-sizse:1.2em; }
.bold { font-weight:bold; }

/*-----------------------------------------------
 imgタグの設定
-----------------------------------------------*/
img{ border:0px; margin:0px; padding:0px; }

/*-----------------------------------------------
 aタグの設定
-----------------------------------------------*/
a { text-decoration:underline; color:#0000FF; } /* リンク設定 */
a:link { text-decoration:underline; } /* まだアクセスしたことのない */
a:visited { text-decoration:underline; color:##996633; } /* 既にアクセスしたことのある */
a:hover { text-decoration:underline; color:#ff0000; } /* マウスが上に乗っている */
a:active { text-decoration:underline; color:##996633; } /* 選択されている */

/* =======================================================
		インライン要素
========================================================*/
.clearboth { clear:both; }
.clearleft { clear:left; }
.clearright { clear:right; }

.collink01 { font-weight:bold; color:blue; }
.collinkai { font-weight:bold; color:red; }
.col6 { color:blue; }
.foot01 { position:relative; margin:0px; padding:0px; border-width:1pt; border-style:solid; border-color:#009900; }

.left1 { float:left; }
.right1 { float:right; }

.marginbom01 { float:left; position:relative; margin-bottom:100px; } /*ナビの長さ＞コンテンツの長さ時の対処*/
.marginbom02 { float:left; position:relative; margin-bottom:200px; }
.marginbom03 { float:left; position:relative; margin-bottom:300px; }
.marginbom04 { float:left; position:relative; margin-bottom:400px; }

.midashi01 { background-image:url('00_data/back08.jpg'); background-position:right center; background-repeat:repeat; }

.pagetop { float:right; position:relative; padding-right:10px; }

.waku { border-top:2px solid snow; border-right:2px solid darkgray; border-bottom:2px solid darkgray; border-left:2px solid snow; }
.waku01 { margin:0px; padding:10px; }
.waku02 { border-top:2px solid #FFF0F5; border-right:2px solid darkgray; border-bottom:2px solid darkgray; border-left:2px solid #FFF0F5; }

.title00  { width:100%; margin:5px auto; padding-bottom:3px; position:relative; text-align:center; float:left; }
.bodcol22 { border-left:4px solid #00CC00; border-right:4px solid #00CC00; text-align:center; }
.nav01 { border-left:4px solid #00CC00; border-right:4px solid #00CC00; text-align:center; }
.nav01-t { width:90px; height:22px; position:relative; background-image:url('00_data/back00.jpg'); background-position:right top; background-repeat:repeat; }

/* カウンター表示 */
#ptop { width:100%; padding:0px; position:relative; right:0px; text-align:right; float:left; }

/*-----------------------------------------------
 ty headerボックス
-----------------------------------------------*/
#tyheader { width:100%; margin:0px; position:relative; height:24px; background-color:#ffffff; background-image:url('00_data/back07.jpg'); background-position:top center; background-repeat:repeat; font-size:90%; }
#tyheader h1 a { text-decoration:none; text-align:left; padding-top:6px; padding-left:20px; display:block; }
#tyheader ul { margin:0px; padding:0px; text-align:right; list-style-type:none; list-style:none; /*line-height:150%;*/ }
#tyheader-menu { position:absolute; top:3px; right:0px; }
#tyheader-menu li { width:70px; list-style-type:none; float:left; margin:0px; }
#tyheader-menu li a { color:white; text-decoration:none; text-align:center; border-left:1px solid #CFCFCF; display:block; position:relative; }
#tyheader-menu li a:hover { color:#33FFFF; }

/*-----------------------------------------------
  アクセントライン
-----------------------------------------------*/
.line01 { width:100%; height:3px; position:relative; background-image:url('00_data/back05.gif'); background-repeat:repeat; }
.ichi01 { padding:4px; align:center; text-align:center; }

/*-----------------------------------------------
  ページの内容表示タイトル
-----------------------------------------------*/
.bar01 { width:100%; margin:0px 5px; height:25px; line-height:5px; /*position:relative;*/  align:center; background-color:blue; color:#ffffff; float:left; }
.bar01 h1 { text-align:top left; padding-left:20px; /*display:block;*/ }
.bar02 { width:100%; margin-left:5px; margin:4px 5px 2px 5px; background-image:url('00_data/back08.jpg'); background-position:top center; }
.bar03 { width:100%; margin-left:5px; padding-left:0px; background-color:blue; color:#ffffff; float:left; }
.bar03 h1 { text-align:top; padding:0px; }
.bar04 { width:100%; margin-left:5px; margin:4px 5px 2px 5px; background-image:url('00_data/back08.jpg'); background-position:top center; }

/*-----------------------------------------------
  ページの内容表示
-----------------------------------------------*/
#tycont02 { width:100%; margin-left:5px; padding:4px; position:relative; top:4px; background-color:#d2efff; float:left; }
#tycont02 ul { margin:0px; padding:0px; background-color:#d2efff; float:left; }
#tycont02-navi { margin-left:0px; position:relative; }
#tycont02-navi p { margin:0px; padding:0px; top:0px; font-size:0.8em; }
#tycont02-navi a:hover { color:#ff0000; }
#tycont02-navi li { margin:0px; padding:2px; position:relative; font-size:0.9em; }
#tycont02-navi li a { margin:0px; display:block; color:#0000ff; padding:5px; text-decoration:underline; }
#tycont02-t { width:120px; height:26px; position:relative; background-image:url('00_data/back00.jpg'); background-position:right top; background-repeat:repeat; }

.dispbox { width:80px; margin:5px 5px 0px 5px; padding:0px; position:relative; line-height:10%; float:left; }
.dispbox_list h1 { margin:0px; padding:3px; color:blue; font-weight:bold; text-align:center; }
ul.dispbox_list li { margin:10px; position:relative; left:5px; display:block; text-align:center; }
.dsp02 { width:120px; margin:4px 5px 2px 5px; background-image:url('00_data/back08.jpg'); background-position:top center; }
.dsp03 { width:220px; margin:4px 5px 2px 5px; background-image:url('00_data/back09.jpg'); background-position:top center; }

.dispbox1 { /*width:220px;*/ margin:5px 5px 0px 5px; padding:0px; position:relative; line-height:10%; float:left; }
.dispbox1_list h1 { margin:0px; padding:3px; color:blue; font-weight:bold; text-align:center; }
ul.dispbox1_list li { margin:10px; position:relative; left:5px; display:block; text-align:center; }


.width220 { width:220px; }





.dispbox2 { width:320px; margin:5px 5px 0px 5px; padding:0px; position:relative; line-height:10%; float:left; }


#header { width:100%; margin:0px auto; height:40px; align:center; position:relative; font-weight:bold; background-image:url('00_data/back07b.jpg'); background-position:top center; background-repeat:repeat; font-size:90%; }

#header1 { width:100%; margin:30px auto; height:26px; align:center; position:relative; font-weight:bold; background-image:url('00_data/back04.jpg'); background-position:top center; background-repeat:repeat; font-size:90%; }
#header-menu {  margin:5px 0px 5px 0px; position:relative; top:10px; align:center; }
#header-menu li { width:80px; height:20px; list-style-type:none; align:center; float:left; }
#header-menu li a { color:white; text-decoration:none; text-align:center; border-left:0px solid #CFCFCF; display:block; position:relative; }
#header-menu li a:hover { color:#33FFFF; }

/*-----------------------------------------------
  inline-blockを指定
-----------------------------------------------*/
.inline-block1 { display:inline-block; padding-top:2px; height:100px; }
.inline-block2 { display:inline-block; width:320px; padding-top:2px; height:200px; }
.inline-block3 { display:inline-block; background-color:#ccc; padding:20px; }
.inline-block4 { display:inline-block; background-color:none; width:320px; padding:10px; vertical-align: middle; height:200px; }
.inline-block5 { display: inline-block; background-color:#ccc; width:250px; }

.parent { text-align:center; border:solid 2px; padding:20px; }

/*-----------------------------------------------
  説明タイトルバー
-----------------------------------------------*/
.tycont07 { width:230px; margin:5px; padding:0px; position:relative; text-align:left; line-height:120%; float:left; }
.tycont07 h1 { width:230px; margin-top:3px; padding:0px auto; text-align:center; background-image:url('00_data/back08.jpg'); background-position:left top; background-repeat:repeat; color:blue; line-height:140%; border-left:5px solid green; } /*  */
.tycont07 li { margin:0px; padding:2px; top:0px; font-size:0.8em; }

/*-----------------------------------------------
  リンク設定用BOX id="linkbox"の中のulに対してCSSを適用
-----------------------------------------------*/
#linkbox ul { list-style-type:none; margin-left:3px; text-align:left; }

/*-----------------------------------------------
  id="linkbox"の中のulの中のliに対してCSSを適用
-----------------------------------------------*/
#linkbox ul li { display:inline-block;width:100%; margin:0px; padding:0px; vertical-align:top; background:none; color:black; }




/*-----------------------------------------------
  display:table に依る表作成
-----------------------------------------------*/
#hyou05 { width:400px; margin-left:10px; display:table; }
.row05 { display:table-row; background-color:#d2efff; text-align:center; }
.row05>div { display:table-cell; margin:5px; padding:5px; border:1px solid #ffffff; }
.row05col1 { width:26%; color:white; background-color:blue; }
.row06 { text-align:left; }

#hyou06 { width:50%; margin:0px auto; display:table; }
.hyou06 { display:table-row; background-color:#ccff33; text-align:center; } /* テーブルの列 tr 要素に該当 */
.hyou06title { width:26%; color:white; background-color:blue; }
.hyou06>div { display:table-cell; margin:1px; padding:1px; text-align:left; border:1px solid #ffffff; } /* テーブルのセル th 要素、td 要素に該当 */


/*-----------------------------------------------
  tableを使わない表作成
-----------------------------------------------*/
.box { display:grid; width:calc(98% - 10px); margin-top:0px; margin-right:5px; margin-bottom:5px; border-top:1px solid blue; border-left:1px solid blue; grid-auto-rows:auto; grid-template-columns:20% 80%; }

.box_itmes { padding-left:4px; color:black; border-right:1px solid blue; border-bottom:1px solid blue; }
.box_title { color:black; }


/*-----------------------------------------------
  ページの内容表示タイトル
-----------------------------------------------*/
.bar03 { width:100%; margin-left:5px; padding-left:5px; background-color:blue; color:#ffffff; float:left; }
.bar03 h1 { text-align:top left; padding:0px; }
.bar04 { width:100%; margin-left:5px; margin:4px 5px 2px 5px; background-image:url('00_data/back08.jpg'); background-position:top center; }





/*-----------------------------------------------
 font-size:16px;
 font-size:18px;
@media screen and (max-width:736px) {.box { grid-auto-columns:auto; } }
 font-weight:bold;
@media screen and (max-width: 736px) {.box__itmes { grid-column:1 / 3; } }


.box { display:grid; width:calc(100% - 10px); margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:5px; border-top:1px solid blue; border-left:1px solid blue; border-right:1px solid blue; border-bottom:1px solid blue; grid-auto-rows:auto; grid-template-columns:20% 80%; }









-----------------------------------------------*/




.my-container { display:grid; margin:5px; padding:4px; border-top:14px solid black; border-left:4px solid #ff0000; grid-auto-rows:auto; width:100%; border-top:4px solid #ccff33; border-left:4px solid #96ceb4; grid-auto-rows:auto; grid-template-columns:20% 80%;  }
.my-cell [ margin:5px; padding:14px; ]



.grid-2clm { display:grid; width:calc(100% - 10px); grid-template-columns:200px 1fr; grid-template-rows:repeat;}


.bg-red [ background-color: #fff000; ]
.bg-green [ background-color: #000fff; ]





















/*-----------------------------------------------
  メニューボタンを作る
 ↓id="nav"の中のulに対してCSSを適用
-----------------------------------------------*/
#nav ul {
  list-style-type: none; /*箇条書きのポッチを消す*/
  text-align:center /*左右中央寄せは親要素に対して指定*/
}

/* ↓id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li { 
  display: inline-block;/*inline-blockにします*/
  width: 230px;/*幅も指定できる*/
  padding: 4px 2;/*余白も指定できる*/
  margin: 4px 0;/*余白も指定できる*/
  vertical-align: middle;/*縦の表示位置も指定できる*/
  background: none;/*背景を水色に*/
  font-weight: bold;/*文字を太字に*/
  color:white; /*文字色を白に*/
}







/* =======================================================
		ブロック要素
========================================================*/

/*-----------------------------------------------
  site mapサイトマップナビ表示
-----------------------------------------------*/
#smap { width:128px; margin-left:560px; height:16px; padding:5px; position:absolute; top:5px; font-size:90%; background-color:#ffffff; border:1px solid green; }
#smap p { margin:0px; padding:0px; text-align:center; list-style:none; line-height:120%; }

/*-----------------------------------------------
  site mapサイトマップ表示
-----------------------------------------------*/
#smapcontents { width:100%; margin:0px; padding:5px; position:absolute; top:35px; text-align:left; background-color:#ffffff; }

/*-----------------------------------------------
  contents
-----------------------------------------------*/
#contents { width:700px; margin-left:120px; padding:5px; position:absolute; top:35px; text-align:left; background-color:#ffffff; }
#contents-menu { position:absolute; width:100%; margin-top:auto;  }_
#contents-menu li { width:100px; list-style-type:none; }

/*-----------------------------------------------
 footerボックス
-----------------------------------------------*/
#footer { width:700px; position:relative; margin-bottom:120px; }
#footer h3 { margin:0px; padding:4px; background:#009900; font-size:1.0em; color:#FFFFFF; font-weight:bold; text-align:center; }
#footer p { margin:5px; }


.col2 { color:red; }


ul { margin:0px; padding:0px; right:0px; list-style-type:none; }
ul.suuji01 { margin-left:40px; padding:0px; list-style-type:decimal; }
ul.suuji02 { margin-left:40px; padding:0px; list-style-type:square; }

/* =======================================================
		インライン要素
========================================================*/
.collink01 { font-weight:bold; color:blue; }
.foot01 { position:relative; margin:0px; padding:0px; border-width:1pt; border-style:solid; border-color:#009900; }

.left1 { float:left; }
.right1 { float:right; }

.tbdsn01 { width:640px; margin-left:20px; table-layout:fixed; }
.tbdsn02 { width:640px; margin-left:20px; table-layout:fixed; border:1px solid ; border-spacing:20px; border-collapse:collapse; border-width:1pt; border-style:solid; border-color:#009900; }
.tbdsn06 { width:140px; vertical-align:top; } /*  */
.tbdsn07 { vertical-align:top; }
.tbdsn08 { width:190px; vertical-align:top; overflow:visible; } /*価格表*/
.tbdsn09 { width:700px; margin:0px auto; padding:0px; text-align:center; position:relative; float:left; }

/* =======================================================
		ブロック要素
========================================================*/
/*-----------------------------------------------
  contents
-----------------------------------------------*/
#tycontents { width:100%; padding:0px; position:absolute; text-align:left; background-color:#ffffff; }
/*#tycontents { width:100%; margin-left:130px; padding:0px; position:absolute; top:40px; text-align:left; background-color:#ffffff; }*/


#tycontents-menu { position:absolute; width:100%; margin-top:auto; }_
#tycontents-menu li { width:100px; list-style-type:none; }
#tycontents h1 { color:blue; }

#tycont03 { padding:20px; position:absolute; right:0px; top:180px; text-align:right; float:left; } /* メール表示 */

#tycont04 { width:700px; padding:0px; position:relative; right:0px; text-align:right; float:left; } /* カウンター表示 */

#tycont05 { margin-left:0px; position:relative; top:5px; background-color:#ffffff; color:#000000; float:left; } /* 会社案内 */
#tycont05 h1 { width:695px; margin-top:5px; margin-bottom:5px; padding-top:100px auto; background-image:url('00_data/back19.jpg'); background-position:left top; background-repeat:repeat; color:blue; line-height:180%; border-left:5px solid #33CC66; } /* タイトル写真下タイトル */
#tycont05 ul { margin-left:40px; padding:0px; /*height:150px; background-color:#d2efff; */list-style-image:url('00_data/l_b12a.gif'); }

#tycont06-navi { width:615px; margin-left:5px; position:relative; }
#tycont06-navi p { margin:0px; padding:0px; top:0px; font-size:0.8em; }
#tycont06-navi a:hover { color:#ff0000; }
#tycont06-navi h2 { margin:0px; padding:3px 0px 1px 0px; height:16px; background:Silver; color:blue; font-size:0.9em; background-image:url('00_data/back08.jpg'); background-position:top center; background-repeat:repeat; }
#tycont06-navi li { margin:0px; padding:2px; position:relative; font-size:0.9em; }
#tycont06-navi li a { margin:0px; display:block; color:#000033; padding:5px; text-decoration:none; }
#tycont06-t { width:120px; height:26px; position:relative; background-image:url('00_data/l_b12a.gif'); background-
position:right top; background-repeat:repeat; }

.tycont08 { width:330px; margin-top:5px; margin-right:10px; margin-bottom:0px; margin-left:5px; padding:0px; position:relative; text-align:left; line-height:120%; float:right; }
.tycont08 h1 { width:330px; margin-top:5px; margin-bottom:5px; padding-top:100px auto; background-image:url('00_data/back19.jpg'); background-position:left top; background-repeat:repeat; color:blue; line-height:150%; border-left:5px solid #33CC66; } /*  */
.tycont08 li { margin:0px; padding:5px; font-size:0.8em; }
.tycont09 { width:688px; padding:3px; background-color:darkorange; background-image:url('00_data/back08.jpg'); 
background-position:right center; background-repeat:repeat; border-left:4px solid #CC0000; }

.dsp01 { background:#990000; border-left:6px solid #66FF00; } /*メイン表示*/

.dispbox { width:190px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:5px; padding:0px; position:relative; text-align:left; line-height:120%;  float:left; }

/*-----------------------------------------------
  navigaition 01
-----------------------------------------------*/
#navi01 { width:125px; margin:0px auto; height:1225px; position:relative; left:0px; top:17px; background-color:#d2efff;background-image:url('00_data/back27.jpg');  float:left; }
#navi01-navi { width:125px; margin:0px; position:relative; text-align:center; }
#navi01-navi p { margin:0px; padding:0px; top:0px; font-size:0.8em; }
#navi01-navi a:hover { color:#ff0000; }
#navi01-navi h2 { margin:0px; padding-top:6px; padding-bottom:0px; height:18px; color:blue; font-size:0.9em; background-image:url('00_data/back08.jpg'); background-position:top center; background-repeat:repeat; text-align:center; }
#navi01-navi li { margin:0px; padding:2px; position:relative; font-size:0.9em; }
#navi01-navi li a { margin:0px; display:block; color:#000033; padding-top:3px; padding-bottom:3px; text-decoration:none; }