@charset "utf-8";
/* ぱたぱたアニメ館 */

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   1. @IMPORT (ファイルの最上部に必須)
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   2. ベース/リセットスタイル
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

html[lang="ja"] {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
html,body {
	margin:0;
	padding:0;
}
body{
	font-size:20px;
	padding-bottom: 150px; 
	background-color:#6699ff;
	background-image:url(../layout_image/03.jpg);
	background-attachment:fixed;
	-webkit-text-size-adjust:none;
}

a {text-decoration:none;}
a:link {color:#0000cc;}
a:visited {color:#0000cc;}
a:hover {background-color:#b8cfff;}
a:active {color:#00ffff;}

footer a,
footer a:link,
footer a:visited {
	color:#fff;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   3. メインレイアウト要素
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
 
#wrapper {
	margin:0 auto;
	padding:10px 0px;
	background-color:#3366cc;
	background:url("../layout_image/denim.jpg");
	width:100%; 
	border-radius:1em; 
}
.sub-heading, .rules{
	margin:0;
	padding:0;
}
header {
	width:100%;
	margin:0;
	padding:0;

}
footer {
	width:100%;
	padding:15px 0px 0px 0px;
	text-align:center;
	font-size:16px;
}
#container {
	width:100%;
	margin:0;
	padding:0;
	background-color:#ffffff;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   4. コンポーネント/その他
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Flexboxによる左右配置 */
#sub-heading-rules {
	display: flex;             /* Flexコンテナにする */
	justify-content: space-between; /* 子要素を両端に寄せる */
	align-items: center;       /* 垂直方向の中央揃え (h2の高さに合わせる) */
	width: 98%;
	margin: 0 auto;
	padding: 10px 0 0 0; 
	text-align: left;

}
#sub-heading-rules a {
	padding:2px;
}
.rules {
	text-align: right;
}
main, section {
	width:95%;
	margin:0 auto;
	padding:0;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   5. メディアクエリ (画面幅による調整)
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

@media screen and (min-width:1000px) {

#wrapper {
	width:1024px;
	border-radius:1em;
}
}

@media screen and (max-width:767px) {
#wrapper {
	width:100%;
	border-radius:0;
}
/* nav 縦に並べる */
#sub-heading-rules {
	flex-direction: column; /* 縦方向に並べる */
	align-items: flex-start; /* 横方向の配置を左揃えにする */
}
.sub-heading, .rules {
	width: 100%; /* 幅を100%にする */
}
.rules {
	text-align: left;
}
}