﻿@chrset "utf-8";

/*===========================================
全体のスタイル
===========================================*/
* {
   padding:0px;                       /*パディング*/
   margin:0px;                        /*マージン*/
}
body {
   background-color:#fafafa;          /*背景色*/
   line-height:1.5;                   /*行の高さ*/
   font-family:"游ゴシック Medium",   /*フォント*/
               "Yu Gothic Medium",
               "游ゴシック体",
               "YuGothic";
}
img {
   border:0;                          /*画像のボーダー*/
}
/*============================================
ヘッダ
============================================*/
#header {
   width:100%;                        /*幅*/
   top:0px;                           /*位置*/
   position:fixed; z-index:2;         /*配置の固定*/
   background-color:#ff7f27;          /*背景色*/
}
.headerin {
   width:1000px; height:60px;         /*幅と高さ*/
   margin:0 auto;                     /*センタリング*/
}
.headerin h1 {
   padding:0px 5px;                   /*パディング*/
   display:block;                     /*ブロック表示*/
   float:left;                        /*フロート*/
   font-family:"AR Brush5";           /*フォント*/
   font-size:40px;                    /*フォントサイズ*/
   color:#ffffff;                     /*フォントカラー*/
   font-weight:bold;                  /*文字の太さ*/
   text-decoration:none;              /*文字の下線*/
}
.headerin h1:hover {
  transform:scale(1.05, 1.05);        /*拡大*/
}
.headerin span {
   padding:7.5px 5px 0px 0px;         /*パディング*/
   float:left;                        /*フロート*/
   font-size:20px;                    /*フォントサイズ*/
}
/*============================================
ページ本体
============================================*/
#pagebody {
   width:1000px;                      /*幅*/
   margin:0 auto;                     /*センタリング*/
   background-color:#ffffff;          /*背景色*/
}
/*============================================
右カラム
============================================*/
.right {
   width:780px;                       /*幅*/
   padding:60px 0px 0px 0px;          /*パディング*/
   margin:10px 20px 0px 0px;          /*マージン*/
   float:right;                       /*フロート*/
}
.item {
   width:240px;                       /*幅*/
   margin:20px 0px 10px 20px;         /*マージン*/
   float:left;                        /*フロート*/
}
.item h2 {
   border-bottom:1px solid;           /*下ボーダー*/
   font-size:14px;                    /*フォントサイズ*/
   color:#3c3c3c;                     /*フォントカラー*/
   font-weight:bold;                  /*文字の太さ*/
}
.itemimg {
   width:240px; height:150px;         /*幅と高さ*/
   margin:10px 0px;                   /*マージン*/
   border-radius:3px;                 /*ボーダー角*/
   float:left;
}
.item p {
   width:240px;                       /*幅*/
   display:block;                     /*ブロック表示*/
   float:left;                        /*フロート*/
   text-indent:0;                     /*インデント幅*/
   font-size:13px;                    /*フォントサイズ*/
}
.item a:hover {
   opacity:0.7;                       /*透過*/
}
.right hr {
   width:760px;                       /*幅*/
   margin:0px 0px 0px 20px;           /*マージン*/
   clear:both;                        /*回り込みをクリア*/
   border:none;                       /*ボーダーをクリア*/
   border-top:1px dotted #cccccc;     /*上ボーダー*/
}
/*============================================
左カラム
============================================*/
.left {
   width:180px;                       /*幅*/
   padding:60px 0px 0px 0px;          /*パディング*/
   margin:0px 0px 0px 20px;           /*マージン*/
   float:left;                        /*フロート*/
}
.menu {
   margin:30px 0px 0px 0px;           /*マージン*/
   top:60px;                          /*位置*/
   position:fixed;                    /*配置の固定*/
}
.menu ul li {
   width:160px;                       /*幅*/
   margin:0px 10px;                   /*マージン*/
   list-style-type:none;              /*リストマーカー*/
}
.menu ul li a {
   padding:10px 0px;                  /*パディング*/
   border-bottom:1px solid;           /*下ボーダー*/
   display:block;                     /*ブロック表示*/
   font-size:14px;                    /*フォントサイズ*/
   color:#3c3c3c;                     /*フォントカラー*/
   font-weight:bold;                  /*文字の太さ*/
   text-decoration:none;              /*文字の下線*/
   text-align:center;                 /*文字のセンタリング*/
}
.menu ul li:first-child {
   border-top:1px solid;              /*上ボーダー*/
}
.menu ul li a:hover {
   text-decoration:underline;         /*文字の下線*/
}
#menu {
   display:block;                     /*ブロック表示*/
}
#menubtn {
   display:none;                      /*非表示*/
}
.link {
   width:180px; height:40px;          /*幅と高さ*/
   margin:30px 0px 0px 0px;           /*マージン*/
   top:341.8px;                       /*位置*/
   position:fixed;                    /*配置の固定*/
}
.link ul li {
   list-style-type:none;              /*リストマーカー*/
}
.link ul li a {
   width:40px; height:40px;           /*幅と高さ*/
   margin:0px 10px;                   /*マージン*/
   float:left;                        /*フロート*/
   font-size:12px;                    /*フォントサイズ*/
}
.link ul li a:hover {
  transform:scale(1.1, 1.1);          /*拡大*/
}
.linkimg {
   width:40px; height:40px;           /*幅と高さ*/
}
.link i {
   display:none;                      /*非表示*/
}
.link span {
   display:none;                      /*非表示*/
}
.address {
   width:163px;                       /*幅*/
   padding:5px 0px 5px 5px;           /*パディング*/
   margin:30px 5px 0px 5px;           /*マージン*/
   border:1px solid #cccccc;          /*ボーダー*/
   border-radius:3px;                 /*ボーダー角*/
   top:418.6px;                       /*位置*/
   position:fixed;                    /*配置の固定*/
   text-indent:0;                     /*インデント幅*/
   font-size:13px;                    /*フォントサイズ*/
   color:#3c3c3c;                     /*フォントカラー*/
   font-weight:bold;                  /*文字の太さ*/
   text-decoration:none;              /*文字の下線*/
}
/*============================================
フッタ
============================================*/
#footer {
   height:31.4px;                     /*高さ*/
   padding:20px 0px;                  /*パディング*/
   margin:0 auto;                     /*センタリング*/
   background-color:#ffffff;          /*背景色*/
   clear:both;                        /*回り込みをクリア*/
}
small {
   display:block;                     /*ブロック表示*/
   font-size:x-small;                 /*フォントサイズ*/
   font-weight:bold;                  /*文字の太さ*/
   text-align:center;                 /*文字の回り込み*/
}
#footer hr {
   margin:10px 10px;                  /*マージン*/
   clear:both;                        /*回り込みをクリア*/
   border:none;                       /*ボーダーをクリア*/
   border-top:1px solid #cccccc;      /*上ボーダー*/
}
/*============================================
メディアクエリ
============================================*/
@media(max-width:767px) {

.headerin               { width:100%;                       }

.headerin h1            { font-size:40px;                   }

.headerin span          { padding:7.5px 5px 0px 0px;
                          font-size:15px;                   }

#pagebody               { width:100%;                       }

.right                  { width:100%;
                          margin:0px;
                          float:none;                       }

.right h2               { width:300px;
                          padding:10px 0px 0px 0px;
                          margin:0 auto;                    }

.item                   { width:100%;
                          height:auto;
                          padding:10px 0px 0px 0px;
                          margin:0 auto;
                          float:none;                       }

.itemimg                { width:300px;
                          height:200px;    
                          margin:0 auto;
                          display:block;
                          float:none;                       }

.item p                 { width:300px;
                          height:auto;
                          padding:10px 0px;
                          margin:0 auto; 
                          border-bottom:1px dotted #cccccc;           
                          font-size:14px;
                          float:none;                       }

.itembr                 { display:none;                     }

.right hr               { display:none;                     }

.left                   { width:auto;
                          padding:0px;
                          margin:0px;
                          float:none;                       }

#menu                   { margin:0px;
                          top:60px; right:0px;
                          display:none;                     }

.menu ul li             { margin:0px 0px;
                          background-color:#ffffff;         }

.menu ul li:first-child { border-top:none;                  }

.menu ul li a           { border-left:1px solid;
                          border-bottom:1px solid;
                          color:#ff7f27;                    }

#menubtn                { padding:6px 9px;
                          border:solid 1px #cccccc;
                          border-radius:5px;
                          top:13px; right:5px;
                          position:fixed; z-index:3;
                          display:block;
                          background-color:#ffffff;         }

#menubtn span           { display:inline-block;
                          text-indent:-9999px;              }

#menubtn i              { font-size:19px;
                          color:#ff7f27;                    }

.link                   { width:300px;
                          height:23.6px;
                          margin:0 auto;
                          margin-top:10px;
                          position:static;
                          top:auto;
                          display:block;                    }

.link ul li             { width:100px;
                          height:auto;
                          display:inline-block;
                          float:left;
                          list-style-type:none;             }

.link ul li a           { width:100px;
                          height:auto;
                          padding:3px 0px;
                          margin:0px;
                          font-size:12px;
                          font-weight:bold;
                          text-decoration:none;
                          text-align:center;                }

.linkimg                { display:none;                     }

.link i                 { padding:0px 5px 0px 0px;
                          position:relative; z-index:2;
                          display:inline-block;             }

.link1                  { width:100px;
                          height:23.6px;
                          position:relative;
                          display:inline-block;
                          color:#ffffff;
                          background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
                          background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; }

.link span              { position:relative; z-index:2;
                          display:inline-block;             }

.link1:before           { content:"";
                          width:100px;
                          height:23.6px;
                          position:absolute; z-index:1;
                          top:0px;
                          left:0px;
                          background:-webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
                          background:linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat; }

.link2                  { color:#ffffff;
                          background-color:#3B5998;         }

.link3                  { color:#fafafa;
                          background-color:green;           }

.address                { width:300px;
                          padding:5px 0px;
                          margin:0 auto;
                          margin-top:10px;
                          position:static;
                          display:block;
                          font-size:12px;
                          text-align:center;                }

#footer                 { height:auto;
                          padding:10px 0px;
                          margin:0 auto;
                          margin-top:10px;
                          background-color:#cccccc;
                          clear:both;
                          font-size:x-small;
                          text-align:center;                }

.addressbr              { display:none;                     }

#footer hr              { display:none;                     }
}