@charset "UTF-8";

body  {margin: 0;
      font-family: 'メイリオ',
        'Hiragino kaku Gothic Pro', sans-serif}

/*サイト名*/
.site h1 a {color: #FF0000;
            text-decoration: none}

.site h1    {margin: 0;
            font-size:30px}

/*ヘッダー画像*/
.topimg     {width: 100%;
            height: auto;
            vertical-align: bottom}

.saiyou     {width: 100%;
            height: auto;
            vertical-align: bottom}

/*キャッチコピー*/
.catch {margin: 0;
        padding: 15px;
        background-color: rgba(255,255,255,0.7);
        font-size: 28px}

.saiyoucatch {margin: 0;
              padding: 15px;
              background-color: rgba(255,255,255,0.7);
              font-size: 20px}


/*ヘッダー画像にキャッチコピーを重ねる*/
.top  {position: relative}

.catch  {position: absolute;
        top: 7%;
        left: 3%}

.saiyoucatch  {position: absolute;
              top: 7%;
              left: 3%}


/*概要*/

.gaiyou a {display: block;
          color: #ffffff;
          text-align: center;
          text-decoration: none}

.gaiyou a:hover {opacity: 0.8}

.gaiyou i {display: block;
          padding-top: 40px;
          padding-bottom: 40px;
          font-size: 38px;
          border-radius: 16px 16px 0 0}

.gaiyou .fa-sitemap {background: #bfbd13}

.gaiyou .fa-desktop {background-color: #c58839}

.gaiyou .fa-file-text-o {background-color: #859f46}

.gaiyou h1 {background-color:#222222;
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 20px;
            font-weight: normal}

.gaiyou p {margin-top: 0;
          margin-bottom: 0;
          padding-top: 15px;
          padding-bottom: 15px;
          background-color: #524e3c;
          font-size: 12px;
          border-radius: 0 0 16px 16px}



/*お知らせ*/
.news {padding: 20px;
      border: solid 5px #dddddd}


.news h1 {margin-top:0;
          margin-bottom: 5px;
          font-size: 18px;
          color: #666666}

.news ul  {margin: 0;
          padding: 0;
          list-style: none}

.news li  {display: block;
            padding: 10px 15px;
            border-bottom: dotted 2px #dddddd;
            color: #000000;
            font-size: 14px;
            text-decoration: none}

.news time {color:#888888;
            font-weight: bold}

.news a:after {content="";
              display: block;
              clear: both}

.news time {float: left;
            width: 60px}


.news .text {float: none;
            width: auto;
            margin-left: 100px}

/*　SNSメニュー*/
.follow ul {margin: 0;
            padding: 0;
            list-style: none}

.follow li a {display: block;
              margin-bottom: 10px;
              padding: 10px;
              border-radius: 4px;
              color: #ffffff;
              font-size: 14px;
              text-decoration:none}

.follow li a:hover {opacity :0.8}

.follow-tw {background-color: #63bafb}
.follow-fg {background-color: #5288f7}
.follow-gp {background-color: #f65d4a}

.follow i {margin-right: 10px;
            font-size: 24px;
            vertical-align: middle}

/*補足説明　*/
.follow p   {margin-top: 0;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #dddddd;
            font-size: 14px;
            text-align: center}

.follow-info {
            	position: relative;
            	background: #dddddd;
            }
.follow-info:after {
            	top: 100%;
            	left: 50%;
            	border: solid transparent;
            	content: " ";
            	height: 0;
            	width: 0;
            	position: absolute;
            	pointer-events: none;
            	border-color: rgba(221, 221, 221, 0);
            	border-top-color: #dddddd;
            	border-width: 15px;
            	margin-left: -15px;
            }
/*記事　*/
.kiji h1 {margin-top: 0px;
          margin-bottom: 20px;
          padding-left:20px;
          border-left: solid 20px #c50018;
          font-size: 36px;
          font-weight: normal}

.kiji p  {max-width: 640px;
          margin-top: 0;
          margin-bottom: 20px}

.kiji h2  {margin-top: 50px:
          margin-bottom: 20px;
          border-bottom: solid 1px #dddddd;
          font-size: 28px;
          font-weight: normal}

.kiji h2 i {margin-right: 7px;
            color: #888888}

.kiji .lead{max-width: 100%;
            font-size: 20px;
            color: #666666}

.kijiimg    {max-width: 100%;
            height: auto;
            margin-bottom: 20px}

/*パン屑リスト*/

.bread      {margin-bottom: 20px}

.bread ol   {margin: 0;
            padding: 0;
            list-style: none}

.bread li a {display: inline-block;
            padding: 5px;
            color: #000000;
            font-size: 14px;
            text-decoration: none
            }

.bread li a:hover {background-color: #eeeeee}

.bread ol:after    {content:"";
                    display: block;
                    clear:both}

.bread li          {float: left;
                    width: auto}

.bread li::after    {content: '\003e';
                    color: #888888;
                    margin-left: 10px;
                    margin-right: 10px}
/* サイドメニュー　*/
.sidemenu       {border: solid 6px #dddddd}

.sidemenu h1    {margin: 0;
                padding: 10px;
                font-size: 16px;
                font-weight: normal}

.sidemenu i     {margin-right: 5px;
                color: #8abc60;
                font-size: larger}

.sidemenu ul    {margin: 0;
                padding: 0;
                list-style: none}

.sidemenu li a    {display: block;
                padding: 10px;
                border-top: solid 1px #dddddd;
                color: #000000;
                font-size: 14px;
                text-decoration: none}

.sidemenu li a:hover {background-color: #eeeeee}

/* 会社概要　*/
.kaishagaiyou h1 {paddig-bottom: 20px;
                  padding-left: 20%}

/* コピーライト　*/
.copyright p {margin: 0;
              color: #666666;
              font-size: 12px;
              text-align: center}

/*BOXAの下に線を挿入*/
.boxA  {border-bottom: solid 1px #DDDDDD}

/*BOXAの下に線を挿入（コンテンツページのみ）*/
/*.contents .boxA  {border-bottom: solid 1px #dddddd}*/


/*　box5をバーの形にする。　*/
.box5  {background-color: #FFFFFF;
		border-top: solid 2px #DDDDDD;
		padding-top: 15px;
		padding-bottom: 15px}


/* ボックスの左右　*/
.boxA,.box4,.box5,.box7,.box9 {padding-left: 15px;
                  padding-right: 15px}


/* ボックス8の表題の位置　*/
.box8-1 {padding-left: 15%}

/*　ボックスの上下　*/
.boxA   {padding-top: 20px;
        padding-bottom: 10px}

.box4   {padding-top: 20px;
        padding-bottom: 20px;
        }

.box4-1 {padding-bottom: 20px}

.box6 {padding-top: 20px}

.box6-1,.box6-2,.box6-3 {padding-bottom: 10px}

.box7,.box8 {padding-top: 25px;
      padding-bottom: 25px}

.box9 {padding-bottom: 20px}

/*#############599px以下############*/
@media (max-width: 599px){


/*ナビゲーション*/
.menu li a {padding: 10px 7px;
            font-size: 11px}

/*キャッチコピー*/
.catch,.saiyoucatch  {padding: 5px 10px;
        font-size: 12px}

/*記事*/
.kiji h1    {font-size: 26px}

.kiji h2    {font-size: 20px}

.kiji .lead {font-size: 16px}
}
/*#############768px以下############*/

@media (max-width: 767px) {

/*トグルボタン*/

#menu       {display: none}

#menubtn    {padding: 6px 12px;
            border: solid 1px #aaaaaa;
            border-radius: 5px;
            background-color: #ffffff;
            position: absolute;
            top: 20px;
            right: 15px;
            cursor: pointer}

#menubtn:hover  {background-color: #dddddd}

#menubtn:focus  {outline: none}

#menubtn i    {color: #888888;
              font-size: 18px}

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

/*ナビゲーションメニュー（縦並び)*/

.menu ul {margin: 0;
          padding: 0;
          list-style: none}

.menu li a {display: block;
            padding: 5px;
            color: #DD0000;
            font-size: 14px;
            text-decoration: none}

.menu li a:hover {background-color: #eeeeee}

}


/*#############768px以上############*/
@media(min-width: 768px){


  /*トグルボタン*/
#menubtn     {display: none}

/*ナビゲーション*/

#menu     {display: block !important}

.menu ul    {margin: 0;
              padding: 0;
              list-style: none}

.menu li a  {display: block;
              padding: 10px;
              color: #DD0000;
              font-size: 18px;
              text-decoration: none}

.menu li :hover {background-color: #eeeeee}

.menu ul::after {content:"";
                  display: block;
                  clear: both}

.menu li        {float: left;
                  width:auto}

/*Box1とBox2を横に並べる設定*/
.boxA:after {content:"";
            display:block;
            clear:both}

.box1       {float: left;
            width: auto}

.box2       {float: right;
            width: auto}

/* BOX6-1,BOX6-2,BOX6-3を横に並べる設定*/
.box6:after {content: "";
            display: block;
            clear: both}

.box6-1     {float: left;
            width: 32%;
            margin-left: 1%;
            margin-right: 1%}

.box6-2     {float: left;
            width: 32%}

.box6-3     {float: left;
            width: 32%;
            margin-left : 1%;
            margin-right : 1%}

/*BOX7-1とBOX7-2を横に並べる設定*/
.box7:after{content:"";
            display: block;
            clear:both}

.box7-1     {float: right;
            width: 80%;
            padding-left: 50px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box}

.box7-2     {float: left;
            width: 20%}


/*BOX4-1とBoX4-2を横に並べる設定*/
.box4:after{content:"";
            display: block;
            clear: both}

.box4-1     {float: left;
             width: 70%;
             padding-right: 35px;
             -moz-box-sizing: border-box;
             -webkit-box-sizing: border-box;
             box-sizing: border-box}

.box4-2     {float: left;
              width: 30%}
}
/*#############1190px以上############*/
@media(min-width: 1190px){

/*全体の横幅を固定*/
.box3,.box4,.boxA,.boxA-inner,.box5,.box5-inner,.box6,.box7,.box8,.box9 {width: 1345px;
            margin-left: auto;
            margin-right: auto}

}