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

/* body */
body{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* h1見出し */
h1 {
  color: #ccffff;/* フォントの色 */
  font-size: 90px;/* フォントの大きさ */
  font-family: cursive;/* フォントの種類 */
  border-style: ridge;/* 線の種類 */
  border-color: #808080;/* 線の色 */
  border-width: 10px;/* 線の太さ */
  text-align: center;/* 文字・画像を中央にそろえる */
  border-radius: 90px;/* 枠線の角丸 */
  padding: 20px;/* 内側の余白 */
  margin: 30px;/* 外側の余白 */
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダーの箱 */
header {
  background-image: url(img/bg_kinnkaku.jpg);/* 背景画像 */
  height: 450px;/* 高さ */
  padding-top: 150px;/* 上がわの余白 */
  background-size:cover;
}
nav{
  background-color: #666666;
  padding-top:10px;
  padding-bottom:10px;
}
nav a{
  color: #ccffff;
  text-decoration:none;
}
nav a:hover{
  color: #00bfff;
}
nav ul{
  margin-top:0px;
  margin-bottom: 0px;
  text-align:center;
}
nav li{
  display: inline-block;
  margin-right:40px;
}
/* ===== お店紹介のスタイル ===== */
/* セクション */
.shop {
  background-color: #008000;/* 背景の色 */
  color: black;
  padding: 30px;
}

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

/* 段落 */
.shop p {
  font-size: 20px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
}

/* 画像 */
.shop img {
  float: right;/* 画像や箱の回り込み */
  height:230px;
  
}
.general{
  background-color:#008000;
padding:30px;
  overflow:auto;
}
.general div{
  float:left;
  margin:5px;
  box-shadow:10px 10px 20px #000000;
}
.brother{
  background-color:white;
  border-style:solid;
  border-radius:30px;
  width:400px;
  padding:5px;
}
  

.family{
  background:white;
  border-style:solid;
  border-radius:30px;
  width:400px;
  padding:5px;
}
.fortune{
  background-color:white;
 border-style:solid;
 border-radius:30px;
 width:400px;
 padding:5px;
}
.years{
  background-color:#008000;
  padding:30px;
}
.years table{
  background-color:#ffffff;
  border-collapse:collapse;
  width:100%;
}
.years th{
 border: 1px solid #000000; 
 padding:10px;
 text-align:left;
 background-color:#ffff66;
}

.years td{
  border:1px solid #000000;
  padding:10px;
}
.support{
  background-color:#008000;
  margin:0px;
}
.support div{
  font-size:20px;
  background-color:#ffffff;
  padding:20px;
  border-radius:30px;
}
.support img{
  float:right;
  padding:10px;
}
footer{
text-align:center;
background-color:#666666;
margin-bottom:0px;
color:#ccffff;
}
.content{
  flex:1;
}

/*＝＝＝＝＝ 検索セクション ＝＝＝＝＝＝ */

.search{
  min-height:100%;
  display:flex;
  flex-direction:column;
background-image:url(bg_Sessyu.png);
background-size:cover;
}

/*＝＝＝＝＝ 検索機能全体 ＝＝＝＝＝＝ */
.searchBox h3 {
  color: black;
  font-size: 35px;
  font-family: MS P明朝;
  margin: 0;
}

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

.searchBox {
  background: #008000;
  width: 80%;
  padding: 30px;
  border: 10px solid #556b2f;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

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

.inputText {
  height: 26px;
  width: 200px;
}

.inputButton {
  background: #666666;
  color: #ccffff;
  padding: 5px 20px;
  border: none;
  border-radius: 5px;
}


/* 出力欄 */
.outputBox table {
  background-color: white;
  border-collapse: collapse;
  width: 100%;
  color:black;
}

.outputBox td {
  border: 1px solid #000000;
  padding: 10px;
}

.outputBox th {
  width: 130px;
  border: 1px solid #000000;
  padding: 10px;
  background-color: #666666;
  color:#ccffff;
  text-align: left;
}