/* 基本の設定 */
BODY{
 font-family:"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , "Meiryo" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
 color:#333333;
 text-align: justify;
 text-justify: inter-ideograph;
}
/*リンクの装飾設定*/
a{text-decoration:none;}
a:link{ color:#2f67ea; }
a:active { color:#56351e; }
a:visited{ color:#c473351; }
a:hover{ color:#eec643; }


/* 基本のボックス */

.container {
 margin: 0 auto ;
 width: 100%;
 max-width: 1000px;
 height: 100%;
 min-height: 100%;
 text-align:center
}

.heda {
 border: 1px solid #333333;
}

.topmenu{
 position: relative;
 overflow: hidden;

}
.release{
 clear:both;
}
/* トップメニューのレイアウト */
.topmenu ul{
 position: relative;
 left: 50%;
 float: left;
 margin: 0; 
 padding: 10px; 
 list-style: none;
}

.topmenu li{ 
 position: relative;
 left: -50%;
 float: left;
 display: inline; 
 padding: 0; 
 margin: 0; 
 float: left;
}

.topmenu li a{
display: block; 
border: 1px solid #666;
background-color: #ccc;
padding: 10px;
text-decoration: none;
color: #333;
width: 100px; 
margin: 1px;
text-align: center;
}
.topmenu li a:hover{
background-color: #2d56be;
color: #fff;
}
/* トップメニューのレイアウトここまで */
.index {
 border:#333333 solid 1px;
 border-top: 30px solid #000000; 
 margin:20px auto;
 padding: 0 20px;
 max-width: 700px;
 background-color: #f0f0f0;
 text-align:left;
}

.mainbox {
 text-align:center;
 width:100%;
}
.mainbox2 {
 border:#333333 solid 1px;
 margin:20px auto;
 padding: 20px;
 max-width: 780px;
 text-align:left;
}

.main {
 color:#000000;
 border:#000000 solid 1px;
 border-top: 30px solid #000000; 
 margin:20px 0;
 padding:0 20px;
 line-height: 200%;
 background-color: #f0f0f0;
 text-align:center;
}
.main p, h1,h2,h3,h4 {
 margin: 20px auto;
 max-width: 780px;
 text-align: left;
}

.thumbnail {
 margin:10px 0 auto;
 padding:10px 0;
 width:100%;
}
.thumbnail p {
 margin: 10px auto;
 max-width: 780px;
 text-align: left;
}
.mainthumbnail {
 margin:0 auto;
 max-width: 780px;
 text-align:left;
}



/*画像はセンター、テキストは左寄せのまま*/
.maingallery {
 margin:20px 0;
 padding:10px 20px;
 text-align: center;
}
.maingallery p {
 text-align: left;
}
/*imgタグに挿入して画像をセンター表示*/
.center_img{
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 1em;
 margin-bottom: 1em;
}

.foot {
 margin:20px 0;
 padding:0 20px;
 text-align:left;
}



/*キャプション付き画像表示*/
/* ▼キャプション付き画像全体を囲むボックスの装飾 */
figure {
 display: inline-block;   /* インラインブロック化 */
 margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */
 vertical-align: top; 
 background-color: #ccc;  /* 背景色 */

}
/* ▼画像に対する装飾 */
figure img {
 display: block;          /* 余計な余白が出ないようにする */
 margin-left: auto;
 margin-right: auto;
 margin-top: 3px;         /* 上だけ3pxの余白を追加 */
 margin-bottom: 3px;      /* 下だけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
 width: 200px;
 margin: 5px; 
 font-size: 0.9em;        /* 文字サイズを90%に */
 line-height: 1.5em;
 text-align: justify;
 text-justify: inter-ideograph;
}



/* 見出しの設定 */



/* ここからスマホ設定 */
/*画面の横幅が700px以下*/
@media screen and (max-width:700px){
/*画像*/
img {
    max-width: 100%;
    height: auto;
}

/*画面の横幅が480px以下*/
@media screen and (max-width:480px){
/* トップメニューのレイアウト */
.topmenu ul{
 position: relative;
 margin: 0; 
 padding: 10px; 
 list-style: none;
}

.topmenu li{ 
 position: relative;
 padding: 0; 
 margin: 4px; 
}

.topmenu li a{
display: block; 
border: 1px solid #666;
background-color: #ccc;
padding: 30px;
text-decoration: none;
color: #333;
width: 480px; 
margin: 1px;
text-align: center;
}
.topmenu li a:hover{
background-color: #2d56be;
color: #fff;
}
/* トップメニューのレイアウトここまで */


/* ボックスのレイアウトここから */
.mainbox2 {
 border: none;
 margin:10px auto;
 padding: 10px;
 max-width: 780px;
 text-align:left;
}

.main {
 color:#333333;
 border: none;
 margin:10px 0;
 padding:0 10px;
 line-height: 150%;
 background-color: #ffffff;
 text-align:left;
}

/* ボックスのレイアウトここまで */


/*キャプション付き画像表示*/
/* ▼キャプション付き画像全体を囲むボックスの装飾 */
figure {
 display: inline-block;   /* インラインブロック化 */
 margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */
 background-color: #ccc;  /* 背景色 */
}
/* ▼画像に対する装飾 */
figure img {
 display: block;          /* 余計な余白が出ないようにする */
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 3px;      /* 下側にだけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
 width: 100px;
 font-size: 0.9em;        /* 文字サイズを90%に */
 text-align: justify;
 text-justify: inter-ideograph;
}