/*

2019.11.4 
Dao-Game
DAW.css
pc用
*/

.fade_off
{
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade_on
{
    opacity: 1;
}

.float {
  animation: float_5224 2s linear infinite;
  transform-origin: center;
}

@keyframes float_5224 {
  0% { transform: translateY(0) }
  50% { transform: translateY(-16px) }
  100% { transform: translateY(0) }
}
/*ふわふわ画像*/

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

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

.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
margin: 10% auto 10% auto;
overflow: hidden;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*動画の幅を自動変換*/

p
{
	margin: 20px 10px;
	font-size: 150%;
}
/*pタグに上下左右の余白*/

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

a:hover
{
	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で位置をズラす等の設定も出来る。
*/

body
{
	background-image: url("../img/20190713_26905241.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",sans-serif;
	color: rgb(255,255,255);
}

body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
	background-image: url("../img/20190713_26905241.png");
  background-size:cover;
}

/*
背景、フォント等全体設定
font-size: 90%;とかでフォントサイズかえれます。
color: rgb(0,176,240);とかで文字色変えれます。
font-weight: bold;で太字にできます。
*/


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

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

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

#site_title
{
	width: 700px;
	margin: 0 auto 10px auto;
}
/*マージンを下に10px余白をつけて、下と重ならないようにする。*/


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


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

#header
{
	width: 878px;
	margin: 50px 20px 300px 20px;
}

#center
{
	margin: 10px 20px 10px 20px;
	width: 878px;
}

.main_
{
	width: 371px;
	height: 0;
	margin: 10px 0px 0px 0px;
}

.main
{
	position: relative;
	width: 100%;
	height: 123px;
	margin: 1em 0;
}

/* 画像に対して指定する class */
.inner_photo
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.main_2
{
	width: 552px;
	float: right;
	margin: 10px 10px 80px 10px;
}

.main2
{
	margin: 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;
}