/* ===== Webサイト全体のスタイル ===== */
/* html */
html {
  height: 100%;
  scroll-behavior: smooth;
}

/* body */
body {
  font-family:  TsukuARdGothic-Regular;
  height: 100%;
  margin: 0;
}

/* h1見出し */
h1 {
  color: #000000;/* フォントの色 */
  font-size: 60px;/* フォントの大きさ */
  font-family:  TsukuARdGothic-Regular;/* フォントの種類 */
  border-style: none;/* 線の種類 */
  border-color: Blue;/* 線の色 */
  border-width: 0px;/* 線の太さ */
  text-align: center;/* 文字・画像を中央にそろえる */
  border-radius: 0px;/* 枠線の角丸 */
  padding: 20px;/* 内側の余白 */
  margin: 30px;/* 外側の余白 */
  background-position:top center;
  height: 100px;
  
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダーの箱 */
header {
  background-image: url(img/動物.jpg);/* 背景画像 */
  background-size: cover;
  height: 300px;/* 高さ */
  padding-top:100px;/* 上がわの余白 */
  font-family:  TsukuARdGothic-Regular;
}

nav{
  background-color:#ffefd5;
  padding-top:5px;
  padding-bottom:5px;
}

nav li{
  margin-top:0px;
  margin-bottom:0px;
  text-align: center;
}

nav li{
  display: inline-block;
  margin-right: 50px;
}

nav a{
  color:#000000;
  text-decoration:none;
}

nav a:hober{
  color:#000000;
  font-family:  TsukuARdGothic-Regular;
}

/* ===== お店紹介のスタイル ===== */
/* セクション */
.a {
  background-color: #ffffff;/* 背景の色 */
  color: #000000;
  padding: 100px;
  font-size:20px;
  font-family:  TsukuARdGothic-Regular;
}

/* h2見出し */
.title {
  font-size: 40px;
  border-left-style:solid;
  border-color:#ffb6c1;
  border-left-width: 10px;
  margin-bottom: 50px;
  padding-left: 15px;
  font-family:  TsukuARdGothic-Regular;
}

/* 段落 */
.b {
  font-size: 20px;
  background-color: #fdf5e6;
  padding: 100px;
  border-radius: 0px;
  height: 450px;
  font-family:  TsukuARdGothic-Regular;
}

.Photo{
  font-size:25px;
  text-align: center;/* 文字・画像を中央にそろえる */
  border-style: solid;/* 線の種類 */
  width: 100%;
  font-family:  TsukuARdGothic-Regular;
}

table th{/*thに対して*/
  color: #ffffff;/*文字色*/
  background: #808080;/*背景色*/
  font-family:  TsukuARdGothic-Regular;
}

table td{/*tdに対して*/
  color:#000000;/*文字色*/
  background:#faf0e6;/*背景色*/
  font-family:  TsukuARdGothic-Regular;
}

.c{
  font-size:20px;
  background-color:#ffffff;
  padding:100px;
  font-family:  TsukuARdGothic-Regular;
}

.d{
  font-size:20px;
  background-color:#ffe4e1;
  padding:100px;
  border-radius: 30px;
  font-family:  TsukuARdGothic-Regular;
}

.d img{
  float: right;
}

.e{
  font-size:20px;
  background-color:#fff8dc;
  padding:100px;
  border-radius: 30px;
  font-family:  TsukuARdGothic-Regular;
}

.e img{
   float: right;
   height: 200px;
}

h3{
  font-size:25px;
  font-family:  TsukuARdGothic-Regular;
}

.d img{
  float: right;
}

.e img{
  float:right;
}
.syoukai{
  padding:100px;
  background-color:#faf0e6;
  height:550px;
}

.syokai p{
  clear: left;
}

.syoukai div{
  background-color:#ffffff;
  width: 160px;
  padding: 30px;
  float: left;
  margin: 10px;
  box-shadow: 10px 10px 20px #a9a9a9;
  height:350px;
}


.f{
  font-size:13px;
  background-color:#fff0f5;
  padding:100px;
  font-family:  TsukuARdGothic-Regular;
}

.g{
  background-color:#ffffff;
  padding:60px;
  font-family:  TsukuARdGothic-Regular;
}

.keyword{
  background-color:#ffe4e1;
  padding:10px;
  border-radius:30px;
}

.word{
  font-size:20px;
}

footer{
  text-align:center;
  background-color:#ffefd5;
  font-family:  TsukuARdGothic-Regular;
}

/* 画像 */
.shop img {
  float: right;/* 画像や箱の回り込み */
}

/* 上に戻るボタン */
.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #ed702b;
	text-decoration: none;
}
/*＝＝＝＝＝ 検索機能全体 ＝＝＝＝＝＝ */
.searchBox h1 {
  color: black;
  font-size: 60px;
  font-family: TsukuARdGothic-Regular;
  margin: 0;
}


.hiragana{
  font-size:18px;
  color:#ff6347;
}

.searchBox h2 {
  font-size: 20px;
}

.searchBox {
 font-size: 15px;
  padding:100px;
  background-color: #fff0f5;
}

/* 入力欄 */
.inputBox {
  margin-bottom: 30px;
  font-family: TsukuARdGothic-Regular;
}

.inputText {
  height: 26px;
  width: 200px;
  font-family:TsukuARdGothic-Regular;
}

.inputButton {
  background: #E91E63;
  color: #fff;
  padding: 5px 20px;
  border: none;
  border-radius: 5px;
  font-family: TsukuARdGothic-Regular;
}


/* 出力欄 */
.outputBox table {
  background-color: #fff0f5;
  border-collapse: collapse;
  width: 100%;
  font-family: TsukuARdGothic-Regular;
}

.outputBox td {
  border: 1px solid #000000;
  padding: 10px;
  font-family: TsukuARdGothic-Regular;
}

.outputBox th {
  width: 130px;
  border: 1px solid #000000;
  padding: 10px;
  background-color: #ffc0cb;
  text-align: left;
  font-family: TsukuARdGothic-Regular;
  color: #000000;
}