@charset "UTF-8";

body{
	background-color:#c0c0c0;
	margin: 0 auto;
	font-size:16px;
	font-family:Noto Sans CJK JP, メイリオ;
	width:100% ;
	max-width:768px;
	line-height :2.0em;
	background-color:#f0f0f0;
	text-align:left;
 	text-decoration: none;
	}
	
a {
	color:#222222;
	font-weight:bold;
}

header {
	padding:5px;
	}
	
button {
 	padding: 10px 20px;
  	font-size: 16px;
  	background-color: #303030;
  	color: white;
  	border: none;
  	border-radius: 5px;
  	text-align:center;
  	cursor: pointer;
		}

button:hover {
  			background-color: #0056b3;
}

#affiliate-footer {
		background-color:#ffffff;
		transition: opacity 0.3s ease, visibility 0.3s ease;
}

#affiliate-footer.hidden {
  		opacity: 0;
  		visibility: hidden;
}

.an{
	margin: 10px;
	padding: 30px 10px 200px 10px;
	background-color: #f9f9f9;
	}
	
.an2{
	font-weight:bold;
	font-size:18px;
	text-indent: 3em;
	line-height: 6.0em;
	}

footer {
  	position: fixed;
  	bottom: 0;
	width: 100% ;
	padding: 5px;
	max-width:768px;
}

	
/* スマホでは少し大きめにする例（任意） */
@media screen and (max-width: 768px) {
  #pageTopBtn {
    font-size: 16px;
    padding: 12px 20px;
    right: 12px;
    bottom: 24px;
  }
}


@media screen and (max-width: 768px) {
  body {
    font-size: 18px; /* スマホ用の大きめ文字 */
  }

/* ホバー時（PC向け）：少しだけ強調 */
#pageTopBtn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
}

main {
  max-width: 768px;
  margin: auto;
  padding: 16px;
}