@charset "UTF-8" ;/*文字のコード指定*/

/*============================================
全般的なスタイル
※コメントの入れ方の注意：
　2バイトの和文のとなりにコメントアウトがあると
　ブラウザーによって機能しない場合がある。
　解決方法は、半角を入れる。　(共通)　
============================================*/

/*============================================
ヘッダーのスタイル
============================================*/
/* ヘッター部の設定 */
.header
{
	border-bottom: none ;	/* 枠線 */
	text-align: center ;	/* テキスト、画像の真ん中寄せ */
	padding:  0 ;	/* 上下の余白 */
	margin-bottom: 0;	/* 他のブロックとのスペース */
	background: #ebefef ;	/* 背景色(確認用) */
}

/* .logo1=桶川ネット「oke-net」のタイトル・ロゴ画像と、TOP画像 */
.logo1 {
width:930px;
max-width: 100%;
height: auto;
}

.logo2 {
width:930px;
max-width: 100%;
height: auto;
}


/*.logo1=タイトルをスマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo1
	{
		width: 350px ;
	}
}
/* .logo1=タイトルをスマホだけに適用するCSS。終わり。*/


/*.logo2 =TOP写真=TOP画像 */
.logo2
{
	width: 930px ;
	height: auto ;
	padding: 0 ; /* 上下の余白 */
}




/* logo2=TOPの写真=TOP画像スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo2
	{
		width: 350px ;
	}
}
/* logo2=TOPの写真=TOP画像スマホだけに適用するCSS。終わり。*/


/*.logo3　 キャッチコピー「桶川ネット「Oke-net」は、桶川地域の皆様へ発信するホームページです。地域の活性を目的に願っております。 」 */
/* .logo3=キャッチコピー */
.logo3
{
	margin: 0 ;
	text-align: center ;	/* テキスト、画像の真ん中寄せ */
	padding: 10px ; /* 上下の余白 */
	color:  #80989b ;/* 文字色 */
	font-size:15px;  /* 文字サイズ */
	font-family: 'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif; /*フォントの種類*/
}

/*  スマホだけに適用するCSS */
@media screen and (max-width:479px)
/* mainの.logo1と.logo2=TOPの写真ロゴ画像を100%に　 */		   
	      img
	          {
                max-width:100%;　
                height: auto;
               }                      	

/*  .logo3=キャッチコピー。スマホだけに適用するCSS */
{
	/* .logo3=キャッチコピー */
	.logo3
	{
      font-size:10px;  /* 文字サイズ */
	}
}


/*============================================
上部グローバルメニュー覧 スタイル
============================================*/

.globalNav {	
    list-style: none;
    overflow: hidden;
    width:960px;
    margin:auto;
    font-size:17.6px;  /* 文字サイズ */
}
.globalNav li {
    float: left;
}
 
.globalNav li a {
    display: block;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    color: #4d5aaf;
    font-family: 'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif; /*フォントの種類*/
}
 
.globalNav li a:hover {
    background: #CECEF6;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.globalNav
	{
		width: auto ;
		padding: 0 10px ;
		font-size:13px;  /* 文字サイズ */
	}
}
/*　グローバルメニュー覧 スタイル終わり　*/








/*============================================
全体のボディの文字設定
============================================*/

/* 全体のボディ「桶川ネット「oke-net」」とリードコピー及びサイドタイトルの設定 */
body
{
	margin: 0 ;		/* スペース */
	padding: 0 ;		/* 余白 */
	font-size: 15px ;	/* 文字サイズ */
	line-height:1.7 ;	/* 行の高さ */
	color: #222222 ;
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /*明朝体フォントの種類*/
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
/* ボディ */
	body
	{
		font-size: 10px ;	/* 文字サイズ */
	}
}
/* 全体のボディの設定終わり */


/*============================================================
本文全体wrapper[メイン(サブサイド+サブメイン)+サイド]　（width:960px）
=============================================================*/
/* 本文全体wrapper(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 960px ;
	margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;	/* 上下左右の余白を0にしておく */
}

/* 本文スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.wrapper
	{
		width: auto ;
		padding: 0 10px ;
	}
}



/*============================================
ページをフェードインさせる設定開始　(共通)　
============================================*/
	    animation: fadeIn 2s ease 0s 1 normal; 														
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/* ========ページをフェードインさせる設定終了 */


/*=========================================================
メイン(サブサイド+サブメイン)　width: 630px設定
==========================================================*/
/* 本文左面width: 630px全体main(デスクトップPCとスマホ)に適用するCSS */
.main
{
	width: 630px ;/* divの幅の指定*/
	margin:0;　	/* 上右下左。外側(margin)0の余白 */
	padding: 0 ;	/* 上下左右に0の余白 */
	border: none ;	/* 枠線 */
	border:0px solid black; /* ボックスに線追加。一括指定(solid black)。 */
	word-wrap: none;/* divの中で文字を改行させる設定 */
	float: left;  /* 左寄せ(回り込み)にして横並び対応させる */
	line-height:1.7 ;	/* 行の高さ */
	h1:#164a84
}

h1 {
  font-size:h1;/*文字の大きさはh1*/
  color: #7f7fff;/*文字色*/
  text-align: center ;	/* テキスト、真ん中寄せ */
  border: solid 3px #9393ff;/*線色*/
  padding: 0.2em;/*文字周りの余白*/
  border-radius: 0.3em;/*角丸*/
}




/* 本文スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main
	{
		width: 100% ;
		padding: 0 10px ;
	}
	 img
	  {
          max-width:100%;　
          height: auto;
       }           
}


/* ==================================================
本文右width: 300pxサイド…………………………………右(300px)
==================================================== */
/* 本文右width: 300pxサイドバック(デスクトップPCとスマホ)に適用するCSS */
.side
{
	border-top: none ;	/* 枠線 */
	text-align: center ;	/* テキスト、画像の真ん中寄せ */
	width: 300px ;
	margin-top: 0 ; /* 他のブロックとのスペース */
	padding: 0 ; /* 上下の余白 */
	background: #ebefef ;　/* 薄いグレー*/
}

/* 本文左面と右面スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main
	{
		width: auto ;
		padding: 0 ;		/* 余白 */
		border: none ;		/* 枠線 */
	}

	.side
	{
		width: auto ;
	}
}
/* 本文左面と右面スマホだけに適用するCSS 終わり*/


/* 本文全体(デスクトップPCとスマホ)に位置を設定するCSS */
.main
{
	float: left ;		/* 左に寄せる */
}

.side
{
	float: right ;	/* 右に寄せる */

}

/* 本文右と左サイドスマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main , .side
	{
		float: none ;
	}
}

.wrapper
{
	overflow: hidden ;
}
/* 本文全体(デスクトップPCとスマホ)に位置を設定するCSS終わり */

/*　本文左 7個のアイコンスタート　*/
/* 本文左全体width: 630pxの上の4つのリンク用アイコン・段落・水平線のスタイル指定 */
ul.foo {
list-style-type: none;
  width: 630px; 
  margin:10px 0px 10px 0px;  /* 左右のサイズ、幅を指定 天地にマージンを指定 */
  text-align:center; 
  border:0px solid black;  /* ボックスに線追加 */
  padding:0;
  font-size:0px;
}

/* 本文左の下の3つのアイコンを横に並べる設定 */
ul.foo li {		
list-style-type: none;
  width:150px;
  border: none solid black;  /* ボックスに線追加 */
  display: inline-block; /* リストを横に並べる設定 */
  padding-left: 0;
  margin: 3px ;	/* 左右に[auto]を指定することで、真ん中に寄る */
}

 /* カーソルを重ねると半透明になる*/
ul.foo li a:hover img  {   /* リンク画像にカーソルを重ねると半透明になる*/
 opacity: 0.5;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
ul.foo  {	
    float:none;
    width:100%;  
    height:auto;
}
}
/* 本文左のリンク用7個のアイコン・段落・水平線のスタイル指定終わり*/


/* .side本文右に適用するCSS */	
h2 {
  font-size:h2;/*文字の大きさはh2*/
  color: #7f7fff;/*文字色*/
  text-align: center ;	/* テキスト、真ん中寄せ */
  border: solid 3px #9393ff;/*線色*/
  margin:10px;
  padding: 0.2em;/*文字周りの余白*/
  border-radius: 0.3em;/*角丸*/
}
h3{
  font-size:h3;/*文字の大きさはh3*/
  color: #4169e1;/*文字色*/
  text-align: left ;	/* テキスト、左寄せ */
  border: solid 0 ;/*無色*/
  margin:0px 0px 0px 10px;  /* 左右のサイズ、幅を指定 天地にマージンを指定 */
  padding:0px;/*文字周りの余白無し*/
 }
/* .sideボディの本文文章設定 */
.side
p{
	text-align:center ;	/* テキスト、センター */
    margin:0px 0px 0px 5px;  /* 左右のサイズ、幅を指定 天地にマージンを指定 */
	padding: 0 ;		/* 余白 */
	font-size: 13px ;	/* 文字サイズ */
	line-height:1.7 ;	/* 行の高さ */
	color: #222222 ;
	font-family: 'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif; /*フォントの種類*/
}
.author
p{
	 text-align:center; /*写真(author)とフォントを中央に*/
	 }

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
.side {	
    float:none;
    width:100%;  
    height:auto;
    text-align: center ;	/* テキスト、センター */
    }
}
/* .side本文右に適用するCSS 終わり*/	



/*============================================
フッタ
============================================*/
.footer
{
	border-top: none ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 2em 0 ;			/* 上下の余白 */
	background: #ebefef ;
	font-size: 12px ;	/* 文字サイズ */
	line-height: 5px
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* フッター */
	.footer
	{
		font-size: 8px ;	/* 文字サイズ */
	}
}