@charset "UTF-8";
/* フォントとカラー*/
body{
	font-family: "M PLUS Rounded 1c", "arial", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	min-width: 1040px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-appearance: none;
}
@media screen and (max-width: 750px){/*画面サイズが750px未満の場合*/
  body {
    min-width: initial;
    min-width: auto;
  }
}
.keitai {
  color: #4b0082;/*携帯頁の色替え*/
  font-size: 80%;
}
.kousi{
  color: #660066;/*更新部分MEMOの色替え*/
    font-size: 90%;
}
.tobira {
  color: #006600;/*四角メニュー文字の色替え*/
}
.fre {
  color: #999999;/*リンクフリー文字の色替え*/
}
.syotyu {
  color: #ff0000;/*諸注意の色替え*/
}
a:hover{
  color : #FF6600;/*ロールオーバー時のリンク色替え*/
}
a:active{
  color : #004400;/*リンクの色替え*/
}
/* モバイルページへリンク*/
.mova {
text-align: left;
color: #66CCCC;
margin: 5px auto;
}
/* 英字*/
.rakuga {
text-align: center;
line-height:0;
color: #000000;/*rakugakiタイトル色替え*/
margin: 2px auto;
font-size: 70%;}
/* タイトル*/
.rakugaki h1{
text-align: center;
letter-spacing: 0.8em;
text-indent: 0.8em;
color: #996600;/*楽描きの家のタイトル色替え*/
margin: 2px auto;
font-size: 120%;
}
/* イラストまわり*/
.main {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-items: center;
  margin: 2px ;
}
.hini{margin: 0 10px 0 10px;}
.youkoso{
margin: 10px 0 0 10px;
font-size: 90%;
}
.omote {
 margin: 0 ;
}
/* Mobile */
@media (max-width: 599px) {/*画面サイズが599px以下の場合*/
.main {
  flex-wrap:wrap;
}
.omote{
   -webkit-box-ordinal-group:2;
   -ms-flex-order:1;
   order: 1;}
.hini{
   -webkit-box-ordinal-group:3;
   -ms-flex-order:2;
   order: 2;}
.youkoso{
   -webkit-box-ordinal-group:4;
   -ms-flex-order:3;
   order: 3;}
}
@media (max-width: 768px) {/*画面サイズが768px以下の場合*/
.hini{margin: 0 2px 0 4px;}
.youkoso{
 margin: 10px 0 0 10px;
 font-size: 85%;}
}
/* 半月の更新*/
.circle {	
  position: relative;
  display: inline-block;
  width: 150px;
  height:300px;
  border-radius: 240px 0 0 240px;
  background: #FFCC33;/*半月の色替え*/
  font-size: 19px;
  color: #660066;/*半月の文字色替え*/
  display:flex;
  justify-content:center; /*横中央*/
  align-items:center; /*縦中央*/
  text-align:center; /*行揃えを中央*/
  margin: 3px auto;
}
/* 画像*/
.hyousi {
  max-width : 100% ;
  height : auto ;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* あいさつ*/
.box4 {
  text-align: center;
  padding: 0.2rem 0.2rem;
  border-top: 5px dotted #33CC66;/*ドットの色替え*/
  border-bottom: 5px dotted #33CC66;/*ドットの色替え*/
}
/* このサイトの説明*/
.box5 p{
 text-align: center;
 color: #000000;
 font-size: 18px;
 margin: 10px auto;
}
/* メニュー*/
.sikaku {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
 .sikaku section {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  margin: 2px;
  border-radius: 10px;
  background: #FFFFCC;/*メニューの四角色替え1pc*/
  padding: 10px;
  -ms-flex-preferred-size: 31%;
  flex-basis: 31%;
} 
.sikaku p {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
} 
@media screen and (min-width:768px) {/*画面サイズが768px以上の場合*/
  .sikaku {
   justify-content: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
}
  .sikaku section {
  -webkit-box-flex:0;
  -ms-flex-positive:0;
  flex-grow:0;
  margin: 5px;
  border-radius: 10px;
  background:  #FFFFCC;/*メニューの四角色替え2keitai*/
  padding: 15px;
  -ms-flex-preferred-size: 19%;
  flex-basis: 19%;
}}
@media screen and (min-width:751px) {/*画面サイズが751px以上の場合*/
  .sikaku { 
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(180px, 200px));
  justify-content: center;
}}
@media screen and (max-width: 768px) {/*画面サイズが768px以下の場合*/
  .sikaku p {
  margin-top: 5px;
  text-align: center;
  font-size: 19px;
} 
  .point{
 letter-spacing: -0.2em;
}}
@media screen and (max-width: 300px) {/*画面サイズが300px以下の場合*/
.sikaku section {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}}
/* メール*/
.mailnokoto {
text-align: center;
}
/* 禁止*/
.kinshi {
text-align: center;
word-break: keep-all;
color: #000;
}
/* カウンター*/
.suuzi {
text-align: center;
}
/* 著作権*/
.tyosaku {
text-align: center;
}
/* スマホ画像用*/
@media screen and (max-width:736px){/*画面サイズが736px以下の場合*/
	img {
		max-width: 100%;
		height: auto;
		width: auto;
}}