@charset "utf-8";

/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*全体の設定
---------------------------------------------------------------------------*/
body { margin:0px; padding:0px; color:#666; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:16px; line-height:2; -webkit-text-size-adjust:none; background:#fff;}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin:0px;padding:0px; font-size:100%;}
ul {list-style-type:none;}
ol {padding-left:40px;padding-bottom:15px;}
img {border:none;max-width:100%;height:auto;vertical-align:middle;}
table {border-collapse:collapse;font-size:100%;border-spacing:0;}
iframe {width:100%;}

p{ width:85%; margin-top:10px; margin-left:auto; margin-right:auto;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a { color:#666; -webkit-transition:0.5s; transition:0.5s;}

a:hover { color:#65c5f2; text-decoration:none;}

/*コンテナー（ホームページ全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {overflow-x:hidden;}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header { max-width:1200px; position:relative; z-index:1; margin:0 auto; height:110px; text-align:center; top:1px;}

/*ロゴ画像*/
#logo img { width:600px; padding-top:10px; padding-bottom:5px;}

/*----画像切替----*/
.slideshow { position:relative; width:500px; height:375px; margin:auto;}

.slideshow img { position:absolute; left:0; top:0; opacity:0; transition:1s;}

.slideshow .show { opacity:1; z-index:1;}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar { max-width:900px; position:relative; z-index:2; margin:0 auto; background:#fff; background:rgba(255,255,255,0.9); height:45px; padding:5px 0;}

/*トップページのメニューブロックの設定*/
#top #menubar { border-radius:10px; -webkit-box-shadow:2px 5px 8px rgba(0,0,0,0.2); box-shadow:2px 5px 8px rgba(0,0,0,0.2);}

#menubar li { float:left; width:13.5%;}

#menubar li a { text-decoration:none; display:block; text-align:center; line-height:45px; border-right:1px dashed #ccc;}

/*１メニューの設定*/
#menubar li:first-child { margin-left:2.8%;}
#menubar li:first-child a { border-left:1px dashed #ccc;}

#menubar li a:hover,
#menubar li.current a { color:#333631; background:#ffdbed;}

/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#menubar-s { display:none;}

/*３本バーアイコンを表示させない*/
#menubar_hdr { display:none;}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents { clear:both; max-width:1200px; overflow:hidden; padding:20px 0; margin-left:auto; margin-right:auto;}

/*メインコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
.main { width:1000px; margin-left:auto; margin-right:auto;}

#table { width:100%; margin-left:auto; margin-right:auto; list-style-type:none;}

h2{ width:98%; font-size:18px; color:#cc6600; letter-spacing:5px; border-bottom:5px solid #f5ae15; padding:5px; margin:0 auto;}

h3{ width:85%; font-size:17px; color:#ff9966; text-align:center; letter-spacing:5px; border-bottom:5px solid #ffa500; padding:5px; margin:0 auto;}

h4{ width:85%; font-size:17px; color:#ff6699; letter-spacing:5px; border-bottom:5px solid #cccc00; padding:5px; margin:0 auto;}

.pn{ width:20%; padding:10px;}

.sp{ font-size:12px; color:#333333; margin-left:5px; margin-bottom:15px; border:1px solid #999999; padding:5px;}

/*-----table関連------*/
#login{ width:90%; margin-top:20px; margin-left:auto; margin-right:auto;}

#comp{ width:90%; margin:15px auto;}
#comp th{ padding:5px; background-color:#ccc; color:#666666; text-align:left; letter-spacing:5px; border-bottom:solid 1px #ffffff;}
#comp td{ padding-left:5px; border-bottom:solid 1px #666666;}

#prc{ width:70%; margin-top:5px; margin-left:auto; margin-right:auto; margin-bottom:15px; border:#999999 solid 1px;}
#prc th{ width:23%; color:#cc6600; font-size:18px; margin-left:auto; margin-right:auto;}

#prc2{ width:85%; margin-left:auto; margin-right:auto; margin-bottom:15px;}
#prc2 th{ width:45%; margin-left:auto; margin-right:auto; text-align:left;}

#prc td,
#prc2 td{ border-bottom:1px #ccc dotted; padding-left:5px;}

#prc td span,
#prc2 td span{ color:#cc0066; font-weight:bold; vertical-align:text-top;}

#cul{ width:85%; margin-left:auto; margin-right:auto; margin-bottom:20px;}
#cul th{ width:230px; text-align:center; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc;}
#cul td{ padding-left:3px; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
#cul td span{ color:#993366; font-weight:bold; padding-right:3px;}

/*----DL関連----*/
dl.prc2{ width:85%; margin-left:auto; margin-right:auto; margin-bottom:20px;}
dl.prc2 dt{ color:#ff9900; font-weight:bold; letter-spacing:3px; margin-top:10px;}
dl.prc2 dd{ border-bottom:dotted 1px #999999; margin-top:10px;}

dl.link{ width:85%; margin-right:auto; margin-left:auto; margin-bottom:15px; clear:both;}
dl.link dt{ width:100%; font-weight:bold; letter-spacing:5px; color:#ff9966; font-size:16px; margin-top:5px; border-bottom:solid 3px #ffa500;}
dl.link dd{ margin-top:5px; clear:both; display:flex; flex-direction:row; flex-wrap:wrap;}
dl.link dd span{ float:left; width:30%; border:solid 1px #999999; padding:10px; margin-bottom:15px; margin-left:2px; text-align:center;}

/*----UL関連----*/
ul.pri{ width:85%; margin-left:auto; margin-right:auto;}

ul.pri li{ margin-top:15px;}

/*pagetop設定
---------------------------------------------------------------------------*/
#pagetop {
 clear:both; max-width:1200px; margin:0 auto;}

#pagetop a {
 text-decoration:none; text-align:center; display:block; float:right; color:#333631; font-size:20px; padding:0px 30px; background:#ffdbed; border-radius:4px 4px 0px 0px;}

/*マウスオン時*/
#pagetop a:hover {
 background:#999; color:#fff;}

/*フッター設定
---------------------------------------------------------------------------*/
footer { clear:both; background:#ffe6fb; color:#333631; text-align:center;}

footer a {
 color:#fff; text-decoration:none;}

footer a:hover { color:#fff;}

footer .pr {
 display:block; font-size:80%;}

/*画面幅1300px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){

/*全体の幅を一括設定
---------------------------------------------------------------------------*/
header,#menubar,.contents,#pagetop { margin:0 3%;}

.contents {
 margin-left:auto; margin-right:auto; margin-top:100px;}

.main {
 width:1000px; margin-left:auto; margin-right:auto;}

#table {
 width:100%; margin-left:auto; margin-right:auto; list-style-type:none;}

h2{
 width:98%; font-size:18px; color:#cc6600; letter-spacing:5px; border-bottom:5px solid #cccc00; padding:5px; margin:0 auto;}

h3{
 width:85%; font-size:17px; color:#003300; text-align:center; letter-spacing:5px; border-bottom:5px solid #cc6600; padding:5px; margin:0 auto;}

h4{
 width:85%; font-size:17px; color:#ff6699; letter-spacing:5px; border-bottom:5px solid #cccc00; padding:5px; margin:0 auto;}

.pn{
 width:20%; padding:10px;}

.sp{
 font-size:12px; color:#333333; margin-left:5px; margin-bottom:15px; border:1px solid #999999; padding:5px;}

#prc{
 width:70%; margin-top:5px; margin-left:auto; margin-right:auto; margin-bottom:15px; border:#999999 solid 1px;}

#prc2{
 width:85%; margin-left:auto; margin-right:auto; margin-bottom:15px;}

#prc th{
 width:23%; color:#cc6600; font-size:18px; margin-left:auto; margin-right:auto;}

#prc2 th{
 width:45%; margin-left:auto; margin-right:auto; text-align:left;}

#prc td,
#prc2 td{
 border-bottom:1px #ccc dotted; padding-left:5px;}

#prc td span,
#prc2 td span{
 color:#cc0066; font-weight:bold; vertical-align:text-top;}

}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar-s {
 display:block; position:relative; z-index:3; padding-top:15px;}

#top #menubar-s { margin-top:90px;}

/*メニュー１個あたりの設定*/
#menubar-s li {
 float:left; width:48%; margin:0 1% 10px 1%;}

#menubar-s li a {
 text-decoration:none; display:block; text-align:center; line-height:50px; border:1px solid #666; border-radius:10px;}

/*大きな端末用(画面幅801px以上)メニューを非表示にする*/
#menubar { display:none;}

.main {
 width:98%; margin-left:auto; margin-right:auto;}

#table {
 width:100%; margin-left:auto; margin-right:auto; list-style-type:none;}

h2{
 width:90%; font-size:18px; color:#cc6600; letter-spacing:5px; border-bottom:5px solid #cccc00; padding:5px; margin:0 auto;}

h3{
 width:75%; font-size:17px; color:#003300; text-align:center; letter-spacing:5px; border-bottom:5px solid #cc6600; padding:5px; margin:0 auto;}

h4{
 width:75%; font-size:17px; color:#ff6699; letter-spacing:5px; border-bottom:5px solid #cccc00; padding:5px; margin:0 auto;}

.pn{
 width:20%; padding:10px;}

.sp{
 font-size:12px; color:#333333; margin-left:5px; margin-bottom:15px; border:1px solid #999999; padding:5px;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
 display:block; z-index:4; position:absolute; top:25px; right:3%; width:30px; border:1px solid #000; padding:12px 10px 5px;}

#top #menubar_hdr { border:1px solid #000;}

/*３本のバー（1本あたり）*/
#menubar_hdr span {
 display:block; border-top:3px solid #000; margin-bottom:7px;}

#top #menubar_hdr span { border-top:3px solid #000;}

#table tbody{
 display:block;}

#table tbody tr{
 display:block; margin-bottom:1.5em;}

#table tbody td{
 display:list-item; border:none; margin-left:5px; padding-left:3px; text-align:left;}

/*----table関連-----*/
#prod tbody{
 display:block;}

#prod tbody tr{
 display:block;}

#prod th{}

#prod tbody td{
 display:list-item; list-style-type:none; border:none; margin-left:5px; padding-left:3px; text-align:left;}

/*----UL関連----*/
ul.pri{
 width:80%;}

ul.pri li{
 margin-top:15px;}

/*--------------------------------------*/
#prc{
 width:70%; margin-top:5px; margin-left:auto; margin-right:auto; margin-bottom:15px; border:#999999 solid 1px;}

#prc2{
 width:85%; margin-left:auto; margin-right:auto; margin-bottom:15px;}

#prc th{
 width:23%; color:#cc6600; font-size:18px; margin-left:auto; margin-right:auto;}

#prc2 th{
 width:45%; margin-left:auto; margin-right:auto; text-align:left;}

#prc td,
#prc2 td{
 border-bottom:1px #ccc dotted; padding-left:5px;}

#prc td span,
#prc2 td span{
 color:#cc0066; font-weight:bold; vertical-align:text-top;}

}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){


#top #menubar-s { margin-top:35px;}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
 text-align:left;}

#logo img {
 width:300px; padding-top:38px;}

#table tbody{
 display:block;}

#table tbody tr{
 display:block; margin-bottom:1.5em;}

#table tbody td{
 display:list-item; border:none; margin-left:5px; padding-left:3px; text-align:left;}

/*----UL関連----*/
ul.pri{
 width:80%;}

ul.pri li{
 margin-top:15px;}

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
 font-size:12px; line-height:1.6;}

#subimg {
 width:200%; position:relative; left:-50%;}

#top #menubar-s { margin-top:35px;}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
 padding:10px 0;}

#table tbody{
 display:block;}

#table tbody tr{
 display:block; margin-bottom:1.5em;}

#table tbody td{
 display:list-item; border:none; margin-left:5px; padding-left:3px; text-align:left;}

/*----UL関連----*/
ul.pri{
 width:80%;}

ul.pri li{
 margin-top:15px;}

}