@charset "UTF-8";

/* =========================================
    リセットCSS
==========================================*/

*{
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  
}
html, body {
  height: 100%;
}

/* =========================================
    全体設計
==========================================*/
/* ↓ ユーザーが指定した文字サイズを正しく反映 ↓ */
html {
	font-size: 100%;
}

html, body {
  height: 100%;
}

/* ↓ 画像の大きさの指定（画像が親要素よりも大きくなることを防ぐ） ↓ */
img {
	max-width: 100%;
}

/* =========================================
    レイアウト
==========================================*/


.html_body {
	background-color: #ffffff; /* 画像が反映されなかった場合の背景色 */
	background-image: url("../img/kingyo_many_orange.png");
	background-repeat: repeat;
	align-content: center;
	color: #302622;
}

.css_body {
	background-color: #ffffff; /* 画像が反映されなかった場合の背景色 */
	background-image: url("../img/many_fish.png");
	background-repeat: repeat;
	align-content: center;
	color: #302622;
}

/* =========================================
    ヘッダー
==========================================*/

header {
	width: 1100px; 
	height: 333px;
	background-color: #ffffef;
	border: 2px solid #fa531c;
	margin-top: 30px;
	margin-left: auto; /* 左マージンを自動に */
	margin-right: auto; /* 右マージンを自動に */
	margin-bottom: 30px;
}

.top {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: center;
}

.html_title,
.CSS_title {
	padding-top: 110px; 
	padding-left: 100px;
}

.html_tag-list {
	padding-top: 50px;
	padding-right: 50px;
}

.css_tag-list {
	padding-top: 20px;
	padding-right: 100px;
}

header nav ul li a {
	text-decoration: none;
	color: #302622;
}

.html_tag-list li a:hover {
	background-color: #fda254;
}

.css_tag-list li a:hover {
	background-color: #70b8f2;
}

/* 中央の装飾線 */
.center-line {
	margin-right: 50px;
}


/* =========================================
   コンテンツ
==========================================*/
/* 背景 */
.contents {
	display: block; /* imgタグをブロック要素に変換 */
	margin-top: 30px;
	margin-left: auto; /* 左マージンを自動に */
	margin-right: auto; /* 右マージンを自動に */
	margin-bottom: 30px;
	padding: 10px;
	width: 1050px; 
	height: auto;
	border: 2px solid #fa531c;
	background-color: #fffeee;
}
/* コンテンツのタイトル */

h2 {
	padding-top: 40px;
	margin-bottom: 5px;
	}
	
h2,p {
	text-align: center;
}

p {
	margin-bottom: 30px;
}

/* 用語 */
dl {
	display: flex;
	flex-wrap: wrap;
  	width: 100%;
	margin: 30px 100px 30px 100px;
}

dt {
	width: 30%;
	padding: 10px;
	margin-bottom: 20px;
	text-align: center;
	border-right: 3px solid #fa531c;
	border-left: 3px solid #fa531c;
}

dd {
	width: 50%;
	padding: 10px;
	margin-bottom: 20px;
	text-align: center;
}

.circle-button {
	position: fixed;
	bottom: 180px;
	right: 20px;
	width: 120px;
	height: 120px;
	background: #007bff;
	border: none;
	border-radius: 50%; /* ← 丸くするポイント */

	/* 中央揃え */
	display: flex;
	justify-content: center;
	align-items: center;

	cursor: pointer;
	z-index: 1000;

  	/* 影 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.circle-button:hover {
	background-color: #014292
}

.circle-button a  {
	text-decoration: none;
	color: white;
	font-size: 15px;
}

/* =========================================
    フッター
==========================================*/
	
footer {
	text-align: center;
	background-color: #fda854;
	}
	
footer nav ul {
	display: flex;
	margin-top: 30px;
	margin-left: auto; /* 左マージンを自動に */
	margin-right: auto; /* 右マージンを自動に */
	margin-bottom: 30px;
	padding: 10px 0 10px 0;
	width: auto;
	height: auto;
	border: 1.5px solid #fa531c;
	background-color: #fffeee;
	justify-content: space-around;
}

footer nav ul li {
	border-right: 2px solid #fa531c;
	font-size: 10px;
	padding-right: 30px;
	
}

.html_footer_top {
	padding-top: 4px;
}

footer nav ul li:last-child {
	border:0;
}

footer nav ul li a{
	text-decoration: none;
	color: #302622;
}

footer nav ul li a:hover {
	background-color: #70b8f2;
}

footer p {
	width: 100%;
	hight: 20px;
	text-align: center;
	padding-bottom: 40px;
}