/* WWW極地のレスポンシブ用外部スタイルシート */

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

.imres01{max-width: 100%;}

.imsz01{width: 620px; height: 2; border: 0;}

/* コンテナ */
div.frcon{
  width: 600px; 
  margin-left: auto; 
  margin-right: auto; 
  display: flex; 
  flex-direction:row; 
  justify-content:space-between;
}

div.frconj{
  width: 640px; 
  border: solid 10px #CCCC99; 
  background-color: #ffffff;
}

div.frconjc{
  width: 100%; 
  display: flex; 
  flex-direction:row; 
  justify-content:flex-start; 
  border-bottom: solid 1px #000000;
}

div.frcon-m{
  display: flex; 
  flex-wrap:wrap; 
  justify-content: center;
}

div.frconp{
  width: 930px;
  display: flex;
  flex-wrap:wrap;
  justify-content:flex-start;
}

/* アイテム */
.fr01{width: 480px;}

.fr02{
  width: 270px; 
  margin: 10px; 
  padding: 0px 10px 10px 10px; 
  margin-left: auto; 
  margin-right: auto;
}

.fr03{width: 500px;}

.fr04{width: 640px;}

.fr05{width: 450px;}

.frj{
  width: 160px; 
  padding:5px; 
  text-align:left; 
  background-color: #ffffff; 
  border: dashed 1px #CCCC99;
}

.fr-p{}

.test{
  margin:0 auto;
}


/* タブレット用スタイルシート */

@media screen and (max-width: 1000px) 
{
div.frconp{width: 620px;}
}

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

.fr01{width: 70%;}
.fr02{width: 300px; margin: 3px; padding: 0px 10px 10px 10px; margin-left: auto; margin-right: auto;}
.fr03{width: 70%;}
.fr04{width: 90%;}
.frj{width: 200px;}
div.frcon{width: 100%; flex-direction: column;}
div.frconj{width: 100%; border: solid 5px #CCCC99;}
div.frconjc{width: 100%;}
.imsz01{width: 90%; height: 2; border: 0;}

}

/* 中間用のスタイルシート1 */

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

.fr05{width: 100%;}

}

/* 中間用のスタイルシート2 */

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

.frj{width: 100%; padding: 0px; border: none}
div.frconj{width: 100%; border: solid 3px #CCCC99;}
div.frconjc{width: 100%; flex-flow: column wrap;}

}

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

@media screen and (max-width: 700px) 
{
div.frconp{width: 310px;}
}

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

.fr01{width: 100%;}
.fr02{width: 200px; margin: 3px; padding: 0px 10px 10px 10px; margin-left: auto; margin-right: auto;}
.fr03{width: 100%;}
.imsz01{width: 100%; height: 2; border: 0;}

}