@charset "UTF-8";

/* PC・タブレット・スマホ(全端末)共通設定
--------------------------------------------------------------------------------------------------*/

/* 全体設定
---------------------------------------------------------------------------*/
html {
  font-size: 100%; /* フォントのサイズの指定 */
}

body {
  margin: 0px;
  padding: 0px;
  -webkit-text-size-adjust: 100%; /* スマホ横向き時の文字サイズ変更対策 */
  color: #000; /* 全体の文字色 */
  font-family: "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif";  /* フォント種類 */
  font-size: 20px; /* 文字サイズ */
  line-height: 1.5em;  /* 行間 */
  background: url("../images/bg_9Fa.png"); /* 背景 */
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: normal;
}

/* 順序のないリスト */
ul {
  list-style-type: none; /* マーカー文字の種類 */
}

/* 順序のあるリスト */
ol {
  padding-left: 40px;
  padding-bottom: 15px;
}

/* 画像 */
img {
  border: none; /* 画像の境界線の指定 */
  max-width: 100%; /* 幅の最大値の指定 */
  height: auto; /* 高さを指定 */
  vertical-align: middle; /* 縦方向の揃え位置を指定 */
}

/* リンク */
a {
  color: #666; /* リンクテキストの色 */
  transition: 0.3s; /* マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
  color: #224acf; /* マウスオン時の文字色 */
}


/* 一番外側のブロック
---------------------------------------------------------------------------*/
#container {
  max-width: 1100px; /* ブロックの最大幅 */
  margin: 0 auto;
  padding: 0 3%;
}

/* 見出しバーや文字などが入っているブロック
---------------------------------------------------------------------------*/
#contents {
  overflow: hidden;
}

/* コンテンツのh1タグの設定 */
#contents h1 {
  clear: both;
  margin-bottom: 20px;
  font-size: 110%;
  color: #fff; /* 文字色 */
  padding: 10px 20px; /* 上下、左右への余白 */
  background: #224acf; /* 背景色 */
  border-radius: 10px; /* 角を丸くする */
}

/* コンテンツのh2タグの設定 */
#contents h2 {
  clear: both;
  margin-bottom: 20px;
  font-weight: bold;
  padding: 8px 20px; /* 上下、左右への余白 */
  border: 1.5px solid #000; /* 枠線の幅、線種、色 */
  border-radius: 10px; /* 角を丸くする */
}

/* コンテンツのh3タグの設定 */
#contents h3 {
  clear: both;
  margin-bottom: 20px;
  color: #fff; /* 文字色 */
  padding: 10px 20px; /* 上下、左右への余白 */
  background: #224acf; /* 背景色 */
  border-radius: 10px; /* 角を丸くする */
}

/*コンテンツのpタグ設定*/
#contents p {
  padding: 0px 20px 0px; /* 上、左右、下への余白 */
}

#contents p + p {
	margin-top: -5px;
}
#contents h1 + p,
#contents h2 + p,
#contents h3 + p {
	margin-top: -10px;
}
#contents section + section {
	margin-top: 30px;
}


/* headerブロック
---------------------------------------------------------------------------*/
header {}

/* ロゴ画像 */
#logo img {
  text-align: center; /* 中央寄せ */
  width: 800px;      /* 画像幅 */
  margin: 2em 2em;    /* ロゴの上と下にスペースを空ける */
}
#logo2 img {
  width: 300px;      /* 画像幅 */
  margin: 2em 2em;    /* ロゴの上と下にスペースを空ける */
}

/* 「にじの会の説明」部分 */
#box {
  padding: 0.5em 1em;
  margin: 0 2em 2em 2em;
  font-weight: bold;
  color: #000; /* 文字色 */
  background: #FFF; /* 背景色 */
  border: solid 3px #6091d3; /* 画像の境界線 */
  border-radius: 10px; /* 角の丸み */
}

#box p {
  font-size: 90%;
  margin: 0; 
  padding: 0;
}

/* 「お知らせ」ブロック
---------------------------------------------------------------------------*/
#new {
  padding: 0.5em 1em;
  margin: 0 2em 2em 2em;
  font-size: 10%
  font-weight: bold;
  color: #000C32; /* 文字色 */
  background: #FFF;
  border: solid 3px #6091d3; /* 線 */
  border-radius: 10px; /* 角の丸み */
}

/* pタグ設定*/
#contents p {
  padding: 0px 20px 20px; /* 上、左右、下への余白 */
}


/* トップページのメニュー
---------------------------------------------------------------------------*/
/* メニュー全体を囲むブロック */
#topmenu {
  text-align: center;  /* 文字をセンタリング */
  width: auto;        /* メニュー部分の幅 */
  height: auto;        /* メニュー部分の高さ */
}
/* メニュー１個あたりの設定 */
#topmenu li {
  display: inline; /* 横並びにする設定 */
}

#topmenu li a {
  text-decoration: none;
}

/* 画像 */
#topmenu img {
/*  border: solid 3px #6091d3; 画像の境界線 */
/*  border-radius: 10px; 角の丸み */
/*  width: 150px;   幅 */
/*  height: 150px; 高さ */
  max-width: 100%; /* 幅の最大値の指定 */
  vertical-align: middle; /* 縦方向の揃え位置を指定 */
  margin: 2em 0;    /* 上と下にスペースを空ける */
}

#topmenu img:hover {
  opacity: 0.5 ;  /* マウスオン時に半透明にする */
}

/* メニューバー
---------------------------------------------------------------------------*/
#menubar {
  text-align: center;
  padding: 0px 20px 20px;   /* 上下、左右へのブロック内の余白 */
}

#menubar ul {
  margin: 0 ;
  padding: 0 ;
}

/* メニュー１個あたりの設定 */
#menubar li {
  list-style: none;
  display: inline-block;
  width: 18%;
  min-width: 90px;
}

#menubar ul li a{
  text-decoration: none;
}


/* infoブロック
---------------------------------------------------------------------------*/
#info {}

/* リスト */
#info dl {
  padding: 10px 20px 0px;   /* 上下、左右へのブロック内の余白 */
}

/* 質問 */
#info dt {
  font-weight: bold;  /* 太字 */
}

/* 回答 */
#info dd {
  padding-left: 1em;
  margin-bottom : 20px; /* １つの質問＆回答の間隔 */
}

/* 順序のないリスト */
ul {
  list-style-type: none; /* マーカー文字の種類 */
    padding: 0px 40px 10px;   /* 上下、左右へのブロック内の余白 */
}

/* mainブロック
---------------------------------------------------------------------------*/
#main {
   float: right;
   min-width :10px;
   width: 75%;
}

/* subブロック
---------------------------------------------------------------------------*/
#sub {
   float: left;
   width: 240px;
}

/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
footer {
  clear: both;
  text-align: center;	/*文字をセンタリング*/
  padding: 30px 0px 10px;	/*上、左右、下へのボックス内の余白*/
}
footer a {
  text-decoration: none;
  border: none;
}
footer .pr {
  display: block;
}



/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*その他
---------------------------------------------------------------------------*/
.look {
    background: #e5e5e5;
    padding: 5px 10px;
    border-radius: 4px;
}

.mb15,.mb1em {
    margin-bottom: 15px;
}

.color1 {
    color: #224acf;
}

.pr {
    font-size: 12px;
}

.wl {
    width: 96%;
}

.ws {
    width: 50%;
}

.c {
    text-align: center;
}

.r {
    text-align: right;
}

.l {
    text-align: left;
}



/* モバイル版  画面幅580px以下の設定
--------------------------------------------------------------------------------------------------*/
@media screen and (max-width:580px){

    /*全体の設定
    ---------------------------------------------------------------------------*/
    body {
        font-size: 12px;	/*文字サイズ*/
        line-height: 1.5;	/*行間*/
    }

    /*メニュー
    ---------------------------------------------------------------------------*/
    /*メニュー１個あたりの設定*/
    #menubar li {
        /* display: block; 縦並びにする設定*/
        margin-bottom: 10px;
    }
    #menubar li a {
        text-decoration: none;
        /* padding: 8px 30px; 各メニュー内の余白。*/
    }
    
    /*Galleryページ
    ---------------------------------------------------------------------------*/
    /*各ブロックごとの設定*/
    /*
    .list {
        padding: 10px;	/*ボックス内の余白*/
    }
    */

    /*その他
    ---------------------------------------------------------------------------*/
    /*
    .ws,.wl {
        width: 94%;
    }
    */


}