/*

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

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

@media (max-width:767px) { video {
max-width: 100%;
} }

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に入力して機能する。
*/




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

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


/*
marginで画像の間の余白を自由に調整可能。
尚、floatを使った後は回り込みを解除するのを忘れない。
*/

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

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


/*画像にカーソルを乗せると透過変化する。*/

a img:hover
{
	opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;
}

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

#main
{
	border-radius: 25px;
	width: 100%;
	float: left;
	margin: none;
}
 
 
#site_title
{
	width: 50%px;
	margin: none;
}


#site_title h1
{
	margin: 0 0 0 0;
}

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

#center
{
	margin: none;
	width: 90%;
}

#center h1
{
	margin: none;
	padding: none;
	color: rgb(255,255,255);
	background-color: rgb(0,0,0);
}

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


/******************/
/*違う移動先の案内*/
/******************/

#left
{
	border-radius: 15px;
	margin:none;
	float: left;
	background-color: rgb(0,0,0);
}

#left h2
{
color:red;
}


/* 違うページのリンク */

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

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

/**************************/


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

.maincontents
{
	margin: none;
	padding: none;
}

.maincontents h2
{
	margin: none;
	padding: none;
	background-image: url(../img/h2Lin.png);
}

.maincontents h3
{
	margin: none;
	padding: none;
	 font-size: 110%;
}

.maincontets h5
{

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


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

.clear
{
	clear:both;
}