/* ほしのいえ外部スタイルシートB */
/* TABLEレイアウト変換用 */

/* 全体共通のスタイルシート */

body {
  color: #008040;
  background-color: #ffff66;
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
  text-align: center; 
}

a:link{color: #ff8000;}
a:active{color: #80ff80;}
a:visited{color: #7dbbff;}

/* －ヘッダー */

header{
}

#hosizora{
width: 100%;
background-image:  url(img/ani_hoshizora3.gif);
text-align:center;
}

#hosizora img{
width: 224px;
height: 33px;
border: 0;
}

/* －メニュー */

nav {
}

#soranav{
  width: 500px;
  margin:auto;
  padding:20px;
}

.f-container-n{
  display:flex;
  justify-content:space-between;
}

#soramenu a{
  font-size: small; 
  font-weight: bold; 
}

/* －コンテンツ全体 */

#omo-m-b{
  width: 800px;
  margin:auto;
}

.f-container-m{
  display:flex;
  justify-content: center;
}

/* －メイン */

.mainb{

}

.hidari{
  text-align:left;
}

#omo1{
  width:364px;
}

#omo1 img{
  width:319px;
  height:228px;
  border:0;
}

#omo2{
  text-align:left;
  width:426px;
  padding:5px;
  background-color: #ffe3d7;
}

#omo3{
  text-align:left;
  width:800px;
  padding:5px;
  background-color: #ffffc1;
  margin: 0 0 20px 0;
}

.mojis{
  font-size: small; 
}

#linklist{
  margin:auto;
  width: 784px;
  background-color: #ffffb9;
  border-color: #000;
  border-style: solid;
  border-width: 2px;
}

#linklist .l-name{
  width: 173px;
  text-align:left;
  border-color: #000;
  border-style: solid;
  border-width: 2px;
}

#linklist .l-prf{
  width: 611px;
  text-align:left;
  border-color: #000;
  border-style: solid;
  border-width: 2px;
}

.botmsps{height:1em;}

footer div{
  width:100%;
  background-image:  url(img/ani_hoshizora3.gif);
  color:#ffffff;
  font-weight: bold; 
}

/* ◆スマホ用スタイルシート */

@media screen and (max-width: 800px) {

#soranav{
  width: 90%;
}

#soramenu a{
  margin:10px;
}

.f-container-n{
  flex-wrap: wrap;
  justify-content: center;
}

#omo-m-b{
  width: 100%;
}

.f-container-m{
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.mainb{
}

#omo2{
  width:80%;
}

#omo3{
  width:80%;
}

.mojis{
  font-size: medium;
}

#linklist{
  margin:auto;
  width: 90%;
}

#linklist .l-name{
  width: 100%;
  border-width: 2px 2px 0 2px;
}

#linklist .l-prf{
  width: 100%;
  border-top-style: dotted;
}

}

/* ◆スマホ用スタイルシート2 */

@media screen and (max-width: 370px) {

#omo1{
  width:100%;
}

#omo1 img{
  width:100%;
}

}