/*

2020.1.14
Kaoru師匠
main.css
ブログなどのcss
pc用
*/

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

@media (max-width:767px) { video {
max-width: 100%;
} }
/*動画の幅を自動変換*/

p
{
	margin: 20px 10px;
}

a
{
	text-decoration: none;
}
/*リンクの下線削除*/

a:hover
{
	background-color: rgb(224,224,224);color: rgb(255,0,0);text-decoration: underline;
}
/*リンクにカーソルを合わせると、赤く文字が光って灰色の枠を表示させる。/*

/*^^^^^^^^^^センタリング関連^^^^^^^^^^^^*/

.textcenter
{
	text-align: center;
}
/*
textcenterというクラスを作り、その中で画像をセンタリングする方法。
画像はテキストと同じ扱いなのでtext-alignでセンタリング出来る。
ただし続けて二つ画像を挿入すると横に並んで表示される。
<div class="textcenter"><img src="ファイル名" alt="画像の説明" /></div>とhtmlに入力して機能する。
*/


/*
img
{
	display: block;margin: 0px auto;
}
*/

/************************************************************************************************************************************************************
 * html側は普通にタグを指定して画像を挿入します。
 * 画像はテキストと同じ扱いだが、display: block;と指定する事で<div>等と同じようなボックスとして定義出来るため、marginで左右をautoにする事でセンタリング可能。
 * 上下に余白を持たせたい場合は0pxの所を編集。
 *************************************************************************************************************************************************************/

.boxcenter
{
	display: block;margin: 0px auto;
}
/*******************************************************************************************
 * <img class="boxcenter" src="ファイル名" alt="画像の説明" />で画像をセンタリングして表示。
 * 二つ並べても縦に並ぶよ。
 *******************************************************************************************/

/*
img
{
	display: block;margin: 0px 2px;float: left;
}
*/
/*
marginで画像の間の余白を自由に調整可能。
尚、floatを使った後は回り込みを解除するのを忘れない。
*/

/****************************************/
/*^^^^^^^^^^センタリング関連^^^^^^^^^^^^*/
/****************************************/

img
{
	border:none;
}
/*画像枠線を消す。*/

/*
img:hover
{
	opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;
}
*/
/*画像にカーソルを乗せると透過変化する。*/

a img:hover
{
	opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;
}
/*
htmlで<a>で囲んで画像からリンクを作った時だけカーソルが乗ると半透明になり、リンクされていない場合は半透明にならない。
a img:hover {}の間に他の定義を記載する事で半透明だけでなくmarginで位置をズラす等の設定も出来る。
*/

/***********************************************
 * 背景、フォント等全体設定
 * font-size: 90%;とかでフォントサイズかえれます。
 * color: rgb(0,176,240);とかで文字色変えれます。
 * font-weight: bold;で太字にできます。
 ***********************************************/
body
{
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	background-color: rgba(0,0,0,0.7);
	font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",sans-serif;
}


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

@-webkit-keyframes fadeIn
{
    0% {opacity: 0}
    100% {opacity: 1}
}
/*フェードイン*/

#page
{
	width: 1000px;
	margin: 15px auto 50px auto;
}
/***********************************************************************
 * #を付けることで独自設定が可能。後ろの名前も任意でおｋ
 * width918はページ全体の幅。
 * margin: 0 auto 0 auto;は上下0pxの余白、左右はセンタリングする事を示す。
 * marginは余白の定義で「上 右 下 左」の順で記述。
 * 上の例では左右でautoを指定しているため中央にセンタリング。
 * これがないとページ全体が左に寄る。
 * background-colorでpage内の背景。
 ***********************************************************************/

#main
{
	border-radius: 25px;
	width: 750px;
	float: left;
	margin: 50px 0op 50px 0px;
	background-color: rgb(255,255,255);
}
 
#site_title
{
	width: 300px;
	margin: 10px auto 10px auto;
}
/*マージンを下に10px余白をつけて、下と重ならないようにする。*/


#site_title h1
{
	margin: 0 0 0 0;
}
/*h1がすでに余白を持っているため、すべて0。*/


#site_title img
{
	border: none;
}
/*画像の周りに線が表示されないようにする。*/

/************************************************/
/* メイン ***************************************/
/************************************************/
#center
{
	margin: 0px 10px 10px 25px;
	width: 729px;
	border-left: 1px rgb(191,191,191) solid;
}

#center h1
{
	margin: 0px 16px 10px 16px;
	padding: 6px 4px;
	color: rgb(255,255,255);
	background-color: rgb(0,0,0);
}


.line
{
	width: 95%;
	border-bottom: 1px rgb(0,0,0) dashed;
}

.maincontents
{
	margin: 0px 0px 10px 0px;
	padding: 5px;
}

.maincontents h2
{
	margin: 0px 16px 10px 16px;
	padding: 6px 4px;
	background-image: url(../img/h2Lin.png);
}

.maincontents h3
{
	margin: 0px 16px 10px 16px;
	padding: 6px 4px;
	 font-size: 110%;
}

.maincontets h5
{

	margin: 0px 16px 10px 16px;
	padding: 0px 0px 0px 15px;
	 font-size: 50%;
}

/******************************************/
/** 書斎用のcss ***************************/
/******************************************/


/**************/
/*外部にリンク*/
/**************/
#left
{
	border-radius: 15px;
	width: 180px;
	margin: 0px 10px 10px 10px;
	float: left;
	background-color: rgb(0,0,0);
}

#left h2
{
color:red;
}

.link
{
	border-radius: 15px;
	margin: 5px 5px 10px 5px;
	border: 1px rgb(0,0,0) solid;
	background-color: rgb(255,255,255);
}

.link h2
{
	margin: 0px;
	padding: 10px 5px 6px 5px;
	background-color: rgb(0,0,0);
}

/**********************************************/
/* フッター */
/**********************************************/

#footer
{
	padding: 10px 0px 10px 0px;
	border-top: 1px rgb(0,176,240) solid;
	text-align: center;
}


.advertisement
{
	margin: 0px 0px 10px 0px;
}

.clear
{
	clear:both;
}