@charset "UTF-8";
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　TAG初期値設定　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
p{
  margin: 20px 0px 20px 0px;
}

hr{
  margin: 10px 0px 10px 0px;
}


h1{
  line-height: 150%;
  font-size: 22px;
  color: #00f;
  margin: 20px 0px 5px 0px;
  border-bottom: solid 2px #f0f;
}

h2{
  line-height: 120%;
  font-size: 18px;
  color: #336;
  margin: 10px 0px 3px 0px;
  border-bottom: solid 2px #300;
}
@media only screen and (min-width:651px) {
  h1{
  font-size: 27px;
  margin-top: 30px;
}
h2{
  font-size: 23px;
  margin-top: 30px;
}
}


h3{
  font-size : 18px;
  color : white;
  background-color : navy;
  font-weight : bold;
  line-height : 200%;
  margin: 20px 0px 15px 0px;
  padding: 0px 20px 0px 20px;
}
@media only screen and (min-width:651px) {
  h3{
  font-size : 23px;
  line-height : 200%;
}
}

h4{
  font-size : 18px;
  color : white;
  background-color : red;
  font-weight : bold;
  line-height : 200%;
  margin: 20px 0px 15px 0px;
  padding: 0px 20px 0px 20px;
}
@media only screen and (min-width:651px) {
  h4{
  font-size : 23px;
  line-height : 200%;
}
}


h5{
  font-size : 18px;
  color : white;
  background-color : blue;
  font-weight : bold;
  line-height : 200%;
  margin: 20px 0px 15px 0px;
  padding: 0px 20px 0px 20px;
}
@media only screen and (min-width:651px) {
  h5{
  font-size : 23px;
  line-height : 200%;
}
}


b{
  color : blue;
  font-weight : bold;
  font-size : 16px;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  b{
  font-size: 18px;
  line-height: 200%;
}
}

/* ＝＝＝＝＝　文字スタイル　＝＝＝＝＝ */

.base-fontsize{
  font-size: 16px;
  line-height: 180%;
  font-weight: normal;
  color: black;
}
@media only screen and (min-width:651px) {
  .base-fontsize{
  font-size: 18px;
  line-height: 200%;
}
}

.blue_25p{
  font-weight : bold;
  font-size : 18px;
  color : blue;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .blue_25p{
  font-size : 25px;
  line-height : 180%;
}
}

.blue_30p{
  font-weight : bold;
  font-size : 20px;
  color : blue;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .blue_30p{
  font-size : 30px;
  line-height : 180%;
}
}

.blue_35p{
  font-weight : bold;
  font-size : 25px;
  color : blue;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .blue_35p{
  font-size : 35px;
  line-height : 180%;
}
}


.navy-bold{
  font-size : 16px;
  color : navy;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .navy-bold{
  font-size : 18px;
  line-height : 200%;
}
}

.navy_25p{
  font-weight : bold;
  font-size : 18px;
  color : navy;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .navy_25p{
  font-size : 25px;
  line-height : 180%;
}
}

.navy_30p{
  font-weight : bold;
  font-size : 20px;
  color : navy;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .navy_30p{
  font-size : 30px;
  line-height : 180%;
}
}

.navy_35p{
  font-weight : bold;
  font-size : 25px;
  color : navy;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .navy_35p{
  font-size : 35px;
  line-height : 180%;
}
}


.red-bold{
  font-size : 16px;
  color : red;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .red-bold{
  font-size : 18px;
  line-height : 200%;
}
}

.red_25p{
  font-weight : bold;
  font-size : 18px;
  color : red;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .red_25p{
  font-size : 25px;
  line-height : 180%;
}
}

.red_30p{
  font-weight : bold;
  font-size : 20px;
  color : red;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .red_30p{
  font-size : 30px;
  line-height : 180%;
}
}

.red_35p{
  font-weight : bold;
  font-size : 25px;
  color : red;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .red_35p{
  font-size : 35px;
  line-height : 180%;
}
}


.black-bold{
  font-size : 16px;
  color : black;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .black-bold{
  font-size : 18px;
  line-height : 200%;
}
}

.black_25p{
  font-weight : bold;
  font-size : 18px;
  color : black;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .black_25p{
  font-size : 25px;
  line-height : 180%;
}
}

.black_30p{
  font-weight : bold;
  font-size : 20px;
  color : black;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .black_30p{
  font-size : 30px;
  line-height : 180%;
}
}

.black_35p{
  font-weight : bold;
  font-size : 25px;
  color : black;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .black_35p{
  font-size : 35px;
  line-height : 180%;
}
}


.white-bold{
  font-size : 16px;
  color : white;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .white-bold{
  font-size : 18px;
  line-height : 200%;
}
}

.white_25p{
  font-weight : bold;
  font-size : 18px;
  color : white;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .white_25p{
  font-size : 25px;
  line-height : 180%;
}
}

.white_30p{
  font-weight : bold;
  font-size : 20px;
  color : white;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .white_30p{
  font-size : 30px;
  line-height : 180%;
}
}

.white_35p{
  font-weight : bold;
  font-size : 25px;
  color : white;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .white_35p{
  font-size : 35px;
  line-height : 180%;
}
}


.yellow-bold{
  font-size : 16px;
  color : yellow;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .yellow-bold{
  font-size : 18px;
  line-height : 200%;
}
}

.yellow_25p{
  font-weight : bold;
  font-size : 18px;
  color : yellow;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .yellow_25p{
  font-size : 25px;
  line-height : 180%;
}
}

.yellow_30p{
  font-weight : bold;
  font-size : 20px;
  color : yellow;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .yellow_30p{
  font-size : 30px;
  line-height : 180%;
}
}

.yellow_35p{
  font-weight : bold;
  font-size : 25px;
  color : yellow;
  line-height : 160%;
}
@media only screen and (min-width:651px) {
  .yellow_35p{
  font-size : 35px;
  line-height : 180%;
}
}


.yellowbold-navyback{
  font-size : 16px;
  color : yellow;
  background-color : navy;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .yellowbold-navyback{
  font-size : 18px;
  line-height : 200%;
}
}

.whitebold-navyback{
  font-size : 16px;
  color : white;
  background-color : navy;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .whitebold-navyback{
  font-size : 18px;
  line-height : 200%;
}
}

.whitebold-blueback{
  font-size : 16px;
  color : white;
  background-color : #0000ff;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .whitebold-blueback{
  font-size : 18px;
  line-height : 200%;
}
}

.whitebold-redback{
  font-size : 16px;
  color : white;
  background-color : #ff0000;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .whitebold-redback{
  font-size : 18px;
  line-height : 200%;
}
}

.yellowbold-blackback{
  font-size : 16px;
  color : yellow;
  background-color : #000000;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .yellowbold-blackback{
  font-size : 18px;
  line-height : 200%;
}
}

.navybold-yellowback{
  font-size : 16px;
  color : navy;
  background-color : #ffff88;
  font-weight : bold;
  line-height : 180%;
}
@media only screen and (min-width:651px) {
  .navybold-yellowback{
  font-size : 18px;
  line-height : 200%;
}
}


.black_small{
  font-size : 12px;
  font-weight : normal;
  color : black;
  line-height : 130%;
}
@media only screen and (min-width:651px) {
  .black_small{
  font-size : 14px;
}
}

.black_small_b{
  font-size : 12px;
  font-weight : bold;
  color : black;
  line-height : 150%;
}
@media only screen and (min-width:651px) {
  .black_small_b{
  font-size : 14px;
}
}

.blue_small{
  font-size : 12px;
  font-weight : normal;
  color : blue;
  line-height : 130%;
}
@media only screen and (min-width:651px) {
  .blue_small{
  font-size : 14px;
}
}

.blue_small_b{
  font-size : 12px;
  font-weight : bold;
  color : blue;
  line-height : 150%;
}
@media only screen and (min-width:651px) {
  .blue_small_b{
  font-size : 14px;
}
}

.navy_small{
  font-size : 12px;
  font-weight : normal;
  color : navy;
  line-height : 130%;
}
@media only screen and (min-width:651px) {
  .navy_small{
  font-size : 14px;
}
}

.navy-small-b{
  font-size : 12px;
  font-weight : bold;
  color : black;
  line-height : 150%;
}
@media only screen and (min-width:651px) {
  .navy-small-b{
  font-size : 14px;
}
}

.red_small{
  font-size : 12px;
  font-weight : normal;
  color : red;
  line-height : 130%;
}
@media only screen and (min-width:651px) {
  .red_small{
  font-size : 14px;
}
}

.red_small_b{
  font-size : 12px;
  font-weight : bold;
  color : red;
  line-height : 150%;
}
@media only screen and (min-width:651px) {
  .red_small_b{
  font-size : 14px;
}
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　背景スタイル　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.blackback{
  padding: 0px 10px 0px 10px;
  margin: 5px 0px 5px 0px;
  background-color : black;
  color : yellow;
}
@media only screen and (min-width:651px) {
  .blackback{
  padding: 5px 20px 5px 20px;
  margin: 10px 0px 10px 0px;
}
}

.navyback{
  padding: 0px 10px 0px 10px;
  margin: 5px 0px 5px 0px;
  background-color : navy;
  color : white;
}
@media only screen and (min-width:651px) {
  .navyback{
  padding: 5px 20px 5px 20px;
  margin: 10px 0px 10px 0px;
}
}

.redback{
  padding: 0px 10px 0px 10px;
  margin: 5px 0px 5px 0px;
  background-color : red;
  color : white;
}
@media only screen and (min-width:651px) {
  .redback{
  padding: 5px 20px 5px 20px;
  margin: 10px 0px 10px 0px;
}
}

.double-line{
  border: 3px double #000000; 
  padding: 0px 10px 0px 10px;
  margin: 5px 0px 5px 0px;
}
@media only screen and (min-width:651px) {
 .double-line{
  padding: 5px 20px 5px 20px;
  margin: 10px 0px 10px 0px;
}
}

.kokuban{
  width: 100%;
  border: 8px solid #990000;
  background-color: #006666;
  padding: 0px 10px;
  margin: 5px 0px;
  color : white;
}
@media only screen and (min-width:651px) {
 .kokuban{
  width: 650px;
  border: 10px solid #990000;
  padding: 5px 20px;
  margin: 10px 0px;
}
}

.navy-board{
  border-radius: 15px;
  width: 100%;
  border: 10px solid #66FFFF; 
  background-color: navy;
  padding: 5px 10px;
  margin: 10px 0px;
  color : white;
}
@media only screen and (min-width:651px) {
  .navy-board{
   width: 100%;
   border: 10px solid #66FFFF; 
   padding: 10px 10px;
}
}

.cork-board{
  width: 100%;
  border: 7px solid #cc6600; 
  background-image: url('image/cork.jpg');
  padding: 5px 10px;
  color : white;
}
@media only screen and (min-width:651px) {
 .cork-board{
  width: 650px;
  border: 10px solid #cc6600; 
  padding: 10px 10px;
}
}


a{
  color : blue;
  font-size : 16px;
  font-weight : bold;
  line-height : 180%;
  text-decoration : underline;
}
@media only screen and (min-width:651px) {
  a{
  font-size : 18px;
  line-height : 200%;
}
}
a:hover{
  color : fuchsia;
  text-decoration : underline;
}


.disc-list{
  list-style-type: disc;
  margin: 10px 0px 10px 20px;
}
@media only screen and (min-width:651px) {
  .disc-list{
  margin: 15px 0px 15px 50px;
}
}

.circle-list{
  list-style-type: circle;
  margin: 10px 0px 10px 20px;
}
@media only screen and (min-width:651px) {
  .circle-list{
  margin: 15px 0px 15px 50px;
}
}

.square-list{
  list-style-type: square;
  margin: 10px 0px 10px 20px;
}
@media only screen and (min-width:651px) {
  .square-list{
  margin: 15px 0px 15px 50px;
}
}

.number-list{
  list-style-type: decimal;
  margin: 10px 0px 10px 20px;
}
@media only screen and (min-width:651px) {
  .number-list{
  margin: 15px 0px 15px 50px;
}
}

.alphabet-list{
  list-style-type: upper-alpha;
  margin: 10px 0px 10px 20px;
}
@media only screen and (min-width:651px) {
  .alphabet-list{
  margin: 15px 0px 15px 50px;
}
}