@charset "UTF-8";



body    {margin: 0;
        font-family: 'Source Sans Pro','メイリオ', 'Hiragino Kaku Gothic Pro',sans-serif;
        word-wrap: break-word;
        overflow-wrap: break-word;
        background-color: #faf7f1;
   
}

top_body {
  /* 画像ファイルの指定 */
  background-image: url(./cmt.png);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #ceef8b;
}



/*#fce1f0*/
/*#E9DBCC*/
/*#e0ffc2*/
/*#E4EBF1*/



.boxA {z-index: 1; /*必ず必要*/
       background-color: #5da67f;}

/*#626e60*/
/*#97A750*/
/*#1fb900*/
/*#598501*/
/*#25A31D*/

/*BOX Aの下に罫線を挿入*/
.boxA{border-bottom: solid 0.1px #5da67f}

.box3 {margin-top: 0px;
z-index: 0; /*必ず必要*/}
.box1 {margin-bottom: -140px;
       margin-top: 0px}


/*フッダーを最下部に固定*/
body,
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* サイト名 */
.site h1 a	{color: #000000;
	text-decoration: none}

.site h1	{margin: 0;
	font-size: 30px}

.site img	{border: none}


/* ヘッダー画像 */
.topimg	{width: 100%;
	height: auto;
    vertical-align: bottom/*画像の下の余白をとる*/}

/* ヘッダー画像 推奨1900px×700px*/
.box3 .box16 .cover  {
    margin: 0;
    overflow: hidden;/* はみ出た部分を表示しない */
    width: 100%;/* トリミングしたい枠の幅 */
    height: 430px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    position: relative;/*imgの親要素としてrelativeを設定*/
    }


/* 記事内の投稿記事一覧 */
/* 縦幅に合わせてリサイズ、はみ出た分をトリミング */
.box3 .box16 .cover img {
  position: absolute;/*coverの子要素としてabsoluteを指定*/
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;/*×横幅に合わせてリサイズ*/
  height: 100%;/*縦幅に合わせてリサイズ*/}

/* キャッチコピー */
.catch	{margin: 0;
    padding: 8px;
    background-color: rgba(255,255,255,0.5);
    font-size: 20px;}

/*ヘッダー画像にキャッチコピーを重ねる*/
.top    {position: relative}

.catch  {position: absolute;
        bottom: 7%;
        right: 3%}

h1 {margin: 0px 0px 30px 100px;
	font-size: 50px;
    font-family: 'Kosugi Maru', sans-serif; 
	color: #575757}

.box1 h1 {margin: 0px 0px 5px 0px;
    padding-left: 0px;
    border-left:solid 0px #37BEF0;
	color: #575757}

h2	{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 28px;
    color: #5da67f;
    line-height: 1.0;/*行高*/
    font-weight: bold}

/*h2	{/*margin: 0px 0px 10px 5px;
    position: relative;/*相対位置*/
    /*padding-left: 1.5em;/*アイコン分のスペース*/
    /*line-height: 1.4;/*行高*/
	/*font-size: 25px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #575757}

h2:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  /*content: "\f111";/*アイコンのユニコード*/
  /*position: absolute;/*絶対位置*/
  /*font-size: 1.2em;/*サイズ*/
  /*color: #EEE8AA;    
  left: 0;/*アイコンの位置*/
  /*top: -0.07em;/*アイコンの位置*/
}


/*topのスクロールボックス等の各タイトル用*/
h3 {margin: 0px 0px 5px 5px;
	font-size: 23px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #43382B;
    text-align: center;}

h4 {margin: 10px 0px 15px 5px;
	font-size: 25px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #43382B}

/*topのスクロールボックス内のタイトル用*/
h5 {margin: 3px 4px 3px 3px;
	font-size: 19px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #5a635d}

/*団体リスト、イベントリストのスクロールボックス内のタイトル用*/
/*左側に画像130px分あるのでその分考慮して左側に余白150px*/
.box4-1 .toukousam h5 {margin: 0px 0px 0px 150px;
	font-size: 20px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #5a635d}

/*topのbox7のスクロールボックスのフォントは白で*/
.box7 h5 {color: #ffffff}

/*topのスクロールボックス内の日付用*/
h6 {text-align: right;
    margin: 1px 2px 1px 0px;
	font-size: 16px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #ffffff}

/*topのsite名の表示微調整*/
.box1 h1 {margin-left: -18px}

/*topのギャラリー用*/
h8 {margin: 3px 4px 1px 3px;
	font-size: 17px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #ffffff}

/*topの基本情報表示用*/
kihon {margin: 0px 0px 18px 5px;
	font-size: 16px;
    font-weight: bold;
    font-family: 'Kosugi Maru', sans-serif;
	color:#666666 }

p {margin: 0px 0px 18px 5px;
	font-size: 18px;
    font-family: 'Kosugi Maru', sans-serif;
	color:#43382B }

/*topのスクロールのpは余白調整*/
.scroll_news .text p{margin: 5px 0px 1px 5px;
	font-size: 17px;
}

/*indexのh1 h2 p*/
.box100 h1 {margin: 0px 0px 10px -5px;
	font-size: 30px;
    font-family: 'Noto Sans JP', sans-serif; 
	color: #ffffff}

.box100 h2	{margin: 0px 0px -9px 0px;
    position: relative;/*相対位置*/
    padding-left: 0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
	font-size: 20px;
    font-family: 'Noto Sans JP', sans-serif;
	color: #ffffff}

.box100 h2:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f111";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 0em;/*サイズ*/
  color: #EEE8AA;    
  left: 0;/*アイコンの位置*/
  top: -0.07em;/*アイコンの位置*/
}


.box100 p{
    font-family: 'Noto Sans JP', sans-serif;
    color: #ffffff;
    margin: 4px 0px -5px 5px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
    transform-origin: left;
}

/*topのスクロールのtimeは余白調整*/
.scroll_news .text .time p {margin: 7px 0px 1px 10px;
	font-size: 16px;
    color:#666666; 
} 

/*topのスクロールのtimeは余白調整*/
/*timeはdivとしpを使用したのでこれはいずれ消す*/
.scroll_news .text time{margin: 1px 0px 1px 10px;
	font-size: 16px;
    font-family: 'Kosugi Maru', sans-serif;
	color:#666666 
}


input, textarea{
    box-sizing: border-box
}
input[type="text"],input[type="tel"],input[type="email"],input[type="url"],input[type="password"]{
    margin: 0.5em 0;
    border: 1px solid #ccc;
    padding: 0.75em;
    width: 100%;
    font-size: 16px;
    font-family: 'Kosugi Maru', sans-serif;
    border-radius: 6px
} 

input[type="text"]:focus {
    background-color: #e2ecf6;
}

input[type="email"],input[type="url"]:focus {
    background-color: #e2ecf6;
}

input[type="tel"]:focus {
    background-color: #e2ecf6;
}

input[type="password"]:focus {
    background-color: #e2ecf6;
}

textarea:focus {
    background-color: #e2ecf6;
}

textarea{
    margin: 0.5em 0;
    border: 1px solid #ccc;
    padding: 0.75em;
    width: 100%;
    height: 12em;
    font-size: 16px;
    font-family: 'Kosugi Maru', sans-serif;
    border-radius: 6px
}

input[type="text"],input[type="tel"],input[type="email"],input[type="url"],input[type="password"], textarea {
    background-color: #E6E6E6;
}

ul {margin: 0;
	padding: 0;
	list-style: none}

a{text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  font-family: 'Kosugi Maru', sans-serif;    
  color: #666666}

.a_midori p{font-weight: normal;  
  color: #5da67f}

.a_midori p:hover{color: #E6E6E6}

.link a	{margin: 0px 0px 0px 10px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #666666}

/*TOPの基本表示用*/
kihon a{text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Kosugi Maru', sans-serif;    
  color: #666666}


.box1 a{font-size: 22px;
    color: #575757;
}

a:hover{background-color: #E6E6E6;
        border-radius: 1px;
        opacity: 0.95}



.news a	{display: block;
	padding: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 0px;
    border-bottom: dotted 2px #dddddd;
	color: #575757;
	font-size: 16px;
    font-family: 'Kosugi Maru', sans-serif;
    font-weight: normal;
	text-decoration: none;
    background-color: #ffffff;
    opacity: 1.0}

.news a:hover	{background-color: #F3F1ED;
                opacity: 0.8}

.news a:after	{content: "";
	display: block;
	clear: both;
    text-decoration: none}

.sidemenu {background-color: #ffffff;
           border-radius: 0px;}

.sidemenu li a {display: block;
                padding: 13px 5px;
                border-bottom: solid 5px #faf7f1;
                color: #5a635d;
                font-family: 'Kosugi Maru', sans-serif;
                font-weight: bold;
                font-size: 20px}

.sidemenu li no_border a {border-bottom: solid 0px #d4ffab;}

/*サイドメニューリンクの同じ表示のボタン*/
#buttonB {display: block;
          padding: 12px 5px;
          background-color: #ffffff;/*buttonで表示される背景を消す*/
          border: solid 0px ;/*buttonで表示される枠を消す*/
          color: #5a635d;
          font-family: 'Kosugi Maru', sans-serif;
          font-weight: bold;
          font-size: 20px}

#buttonB:hover {background-color: #E6E6E6;
}
/*buttonだと下線が短くなるので要素いっぱいに広がるよう別要素を指定してそこに下線*/
.sidemenu_line{border-bottom: solid 5px #faf7f1;
    
}
.box7 a {font-size: 16px;}



/* toukousamでサムネイルと投稿内容を囲んだので横並びにする */
.toukousam:after	{content: "";
	display: block;
	clear: both}
/* toukousamのボックス「cover」の分から200pxの幅を指定*/
.toukousam .cover	{float: left;
	width: 200px}

/*TOPのサムネイルは130px*/
.box4-1 .toukousam .cover	{width: 130px}
 
/* toukousamのボックス「text」の分左に余白10pxいれる*/
/* 画像を考慮し余白210pxとする。*/
.toukousam .text	{float: none;
	width: auto;
	margin-left: 210px;
	padding-left: 5px;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 16px;
    text-decoration: none}



/*TOPのサムネイルは130pxなので余白は135px*/
.box4-1 .toukousam .text	{margin-left: 150px;}


/*　トリミングする外側の枠　*/
.cover  {
    margin-top: 5px;
    overflow: hidden;
    width: 200px;/* トリミングしたい枠の幅 */
    height: 200px;/* トリミングしたい枠の高さ */
    border-radius: 10px;
    position: relative}


/*TOPのサムネイルは130px*/
.box4-1 .cover {
    width: 130px;/* トリミングしたい枠の幅 */
    height: 130px;/* トリミングしたい枠の高さ */
    border: 1px solid #EEEEEE;
    border-radius: 3%;
    }

.box4-1 .cover:hover {
    width: 126px;/* トリミングしたい枠の幅 */
    height: 126px;/* トリミングしたい枠の高さ */
    border: 2px solid #F75F6F;
}

/* hover時のサムネイルは120%*/
.box4-1 .cover img:hover {
  width: 120%;/*横幅に合わせてリサイズ*/}

/*TOPのギャラリーはbox9それぞれ1行3つあるので各widthは100％高さは180px*/
.box4-1 .box9 .cover  {width: 100%;/* トリミングしたい枠の幅 */
    height: 180px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    margin-top: 0px;
    }

/*フレーム02の１枚目は大きい写真widthは80％高さは300px*/
/*.box4 .box29:after {content: "";
	display: block;
	clear: both}*/

/*フレーム02の画像エリア*/
.box4 .box29 .cover29  {float: left;
    margin-top: 5px;/*上で5pxにしているので1pxに*/
    max-width: 100% ;/* トリミングしたい枠の幅 */
    /*height: 500px;/* トリミングしたい枠の高さ */
    border: 0px solid #E1D737;}

.box4 .box29 .text29 {float: right;
	width: 100%;
    /*margin-right: -83px;
	padding-right: 83px;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-decoration: none}


/*フレーム02のギャラリーはbox9それぞれ1行3つあるので各widthは100％高さは180px*/
.box4 .box9 .cover  {width: 100%;/* トリミングしたい枠の幅 */
    height: 180px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    margin-top: 0px;
    }

/* ########## サムネイル5枚横並びの設定 ########## */
.small:after {content: "";
              display: block;
              clear: both}

/*サムネイルギャラリーはbox12それぞれ1行5つあるので各widthは100％高さは104px*/
.box4-1 .box12 .cover  {width: 100%;/* トリミングしたい枠の幅 */
    height: 104px;/* トリミングしたい枠の高さ180*3/5 */
    border-radius: 0px;
    margin-top: 0px;
    }

/*ギャラリーの外枠*/
.box12 {position: relative;
       margin: 0px 0px 10px 0px;
       padding: 0px 0px 0px 0px;
       border-radius: 0px;
       background-color: #ffffff;
}

/*ギャラリー５枚の回り込み（浮かせる）設定*/
.box12 {float:  left;   /* 回り込み指定 */
       width: 19.0%;
       margin-left: 0.5%;
       margin-right: 0.5%;
}

/* ギャラリーのサムネイルは120%むしろ高さが少ないから*/
.box12 .cover img {
  width: 120%;/*横幅に合わせてリサイズ*/
  height: auto}

/* ５枚ギャラリーのサムネイルはカーソルあったら130%*/
.box12 .cover img:hover {width: 130%;/*横幅に合わせてリサイズ*/
}

/*TOPの外観写真はbox14で1つなのでwidthは100％高さは180px*/
.box4-2 .box14 .cover  {width: 95%;/* トリミングしたい枠の幅 */
    margin-left: 2.5%;
    height: 160px;/* トリミングしたい枠の高さ */
    border-radius: 1px;
    }

.box4-2 .box15 .cover  {width: 95%;/* トリミングしたい枠の幅 */
    margin-left: 2.5%;
    height: 100px;/* トリミングしたい枠の高さ */
    border-radius: 1px;
    }




.box9 {position: relative;
       margin: 0px 0px 10px 0px;
       padding: 0px 0px 0px 0px;
       border-radius: 0px;
}

/*テキストを重ねる*/
.box9 .text{position: absolute;
            bottom: 0;
            left: 0;
            width: 100.3%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 5px 10px;
            background-color: rgba(255,50,3,0.5)}



.scroll_news:after {content: "";
	display: block;
	clear: both}

.scroll_news .text	{float: left;
	width: 100%;
    margin-right: -83px;
	padding-right: 83px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-decoration: none}

/*TOPのスクロール内の画像は80px*/
.box4-1 .scroll_news .cover  {float: right;
    margin-top: 5px;/*上で5pxにしているので1pxに*/
    width: 80px;/* トリミングしたい枠の幅 */
    height: 80px;/* トリミングしたい枠の高さ */
    border: 0px solid #E1D737;
    border-radius: 50%;
    }

.box4-1 .scroll_news .cover:hover {
    border: 2px solid #F75F6F;
    width: 76px;/* トリミングしたい枠の幅 */
    height: 76px;/* トリミングしたい枠の高さ */
}

/* 横幅に合わせてリサイズ、はみ出た分をトリミング */
/* newsのサムネイルは150％で少々拡大*/
.cover img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;/*横幅に合わせてリサイズ*/
  height: auto}

/* ギャラリーのサムネイルは150%むしろ高さが少ないから*/
.box4-1 .scroll_news .cover img:hover {
  width: 120%;/*横幅に合わせてリサイズ*/}

/* ギャラリーのサムネイルは120%むしろ高さが少ないから*/
.box9 .cover img {
  width: 120%;/*横幅に合わせてリサイズ*/
  height: auto}

/* ギャラリーのサムネイルは120%むしろ高さが少ないから*/
.box29 .cover img {
  width: 120%;/*横幅に合わせてリサイズ*/
  height: auto}



/* 外観のサムネイルは100%*/
.box14 .cover img {
  width: 100%;/*横幅に合わせてリサイズ*/
  height: auto}

.box15 .cover img {
  width: 100%;/*横幅に合わせてリサイズ*/
  height: auto}

/* ギャラリーのサムネイルはカーソルあったら130%*/
.box9 .cover img:hover {width: 130%;/*横幅に合わせてリサイズ*/
}



/* 画像の幅を調整する */
.imageone img {margin: 10px 2px 10px 2px;
            max-width: 100%;
            height: auto}
.imagetwo img {margin: 10px 2px 10px 2px;
            max-width: 30%;
            height: auto}

/*切り替え画像*/
.imageone ul{display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.imageone li{flex: 1 1 auto;
    margin-right: 8px;
}
.imageone li:last-of-type{margin-right: 0;
}


/*topのタイトルエリア*/
#title {text-align: left;
        margin: 6px 0px;
        border-bottom: solid 5px #f6efe2; 
}

#title span {margin-left: 5px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 25px;
    color: #5da67f;
    font-weight: bold}

.maru {text-align: center;
        margin: 6px 0px;
}

.maru span {margin-right: 20px}

.maru i {font-size: 20px;
    color: #ffffff;}


/*画像添付ボタン*/
input[type="file"] {
   display: none;
}

label[for="file-input"] {
   border: 1px solid #A8BDBD;
   border-radius: 20px;
   padding: 10px 25px;
   margin: 0 0 10px 0;
   font-size: 16px;
   font-family: 'Kosugi Maru', sans-serif;
   background: linear-gradient(0deg, #696969, #A8BDBD);
   color: #ffffff;
   font-weight: bold;
   display: inline-block;
   position: relative;
}
label[for="file-input"]::after {
   content: "選択されていません";
   /*margin-left: 10px;*/
   font-size: 16px;
   font-weight: bold;
   color: #FFCC00;
   height: 20px;
   line-height: 20px;
   position: absolute;
   right: -160px;
   top: calc(50% - 10px);
}

label[for="file-input"].changed::after {
   content: "";       
}

.filename {
   font-size: 18px;
   font-weight: bold;
   color: #666666;
}

/*日付入力ボタン*/
label[for="date-field"] {position: relative;
  display: inline-block;
  width: 200px;
  height: 36px;
  border: 2px solid #ccc;
  border-radius: 15px;
}

input[type="date"] {
  position: relative;
  padding: 0 10px;
  top: -14px;
  right: 207px;    
  width: 200px;
  height: 36px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font-size: 16px;
  color: #999;
}

label[for="date-field"]::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0px;
  width: 36px;
  height: 36px;
  background-color: #06c;
  background-image: url("./image/icon_calendar.png");
  background-size:contain;/*縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する*/
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
}

input[type="date"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
}

input[type="date"]::-webkit-clear-button{
  -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}



/*ラジオボタン*/
.radio {
    margin:	0 0 15px 10px;
}

.radio li{
    display: inline;
    margin-right: 0.3em;
}


/*次へ戻る投稿ボタン*/
#buttonA{
  border: 1px solid #37BEF0;
  margin: 10px 10px 10px 0px;    
  padding: 10px 30px;
  font-size: 18px;
  font-family: 'Kosugi Maru', sans-serif;
  background-color: #37BEF0;
  color: #ffffff;
  border-radius: 3px;
  font-weight: bold;
}

#buttonA:hover {
    background-color: #888888;
}


#buttonA:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

/*topの次へ戻る投稿ボタン*/
#buttonT{
  border: 2px solid #ffffff;
  margin: 10px 10px 10px 0px;    
  padding: 3px 20px;
  font-size: 25px;
  font-family: 'Noto Sans JP', sans-serif; 
  color: #ffffff;
  background-color: transparent;
  border-radius: 3px;
  font-weight: bold;
}

#buttonT:hover {
    background-color: #888888;
}


#buttonT:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.scroll {
  overflow-y: scroll;
  /*縦方向はスクロール可*/
  overflow-x: hidden;
  /*横方向はスクロール不可*/
  width:100%; 
  height:300px; 
  background-color: #ffffff;
  border: 0.5px solid #ffffff;
  border-radius: 0px;
}

/*スクロールバー全体*/
::-webkit-scrollbar{
  width: 15px;
}

/*スクロールバーの起動*/
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}

/* コピーライト */
.copyright p	{margin: 0;
	color: #ffffff;
	font-size: 16px}


/* ボックスの左右 */
.boxA, .box4, .box5
	{padding-left: 15px;
	padding-right: 15px}

/* BOX5をフッターとしてバーの形にする */
.box5	{padding-top: 10px;
	padding-bottom: 10px;
	background-color: #5da67f}

/* ボックスの上下 */
.boxA	{padding-top: 1px;
	padding-bottom: 0px}

.box4	{padding-top: 20px;
	padding-bottom: 20px}

.box4-1	{padding-bottom: 20px}


.box4-2-in {/*background-color: #626e60;
            border-radius: 5px;
            padding: 3px 0px 0px 0px;*/}    
    
.box4-2-inner {background-color: #ffffff;
               border-radius: 5px;
               padding: 10px 5px 10px 5px}

.box4-2_kihon {margin: 10px 0px 0px 0px;
               background-color: #ffffff;
               border-radius: 5px;
               padding: 10px 5px 10px 5px}
/*基本情報のアイコンと文字を横並びにする（改行しても）*/
.box4-2_kihon00:after {content: "";
                    display: block;
                    clear:both} 
.box4-2_kihon_A  {float: left;
                width: 13%}
.box4-2_kihon_B  {float: left;
                width: 87%}

.box6	{padding-top: 0px}

.box6-1, .box6-2, .box6-3
	{padding-bottom: 10px}

.box6-1-inner {padding: 5px 10px 10px 10px;
               background-color: #ffffff;
               border-radius: 0px;}

.box6-2-inner {padding: 5px 10px 10px 10px;
               background-color: #ffffff;
               border-radius: 0px;}

.box7 {padding: 5px 10px 10px 10px;
       overflow:auto;/*float時でも親要素内に子要素を含有*/
       margin-right: 1%;
       background-color: #ffffff;
       border-radius: 0px;
}

.box7-inner {overflow:auto;/*float時でも親要素内に子要素を含有*/
            padding: 2% 0% 2% 3%;
            background-color: #ffffff;
            border-radius: 0px;*/
}

/*入力フォームのbox*/
.box10 {margin: -10px 5px 0px 5px;
        padding: 50px 10px 0px 10px;
        background-color: #ffffff;
        border-radius: 10px;
}

/*入力フォームのbox*/

.box000 {margin: 70vh auto 0;
        transform: translateY(-30%);
        padding: 0% 25% 0px 25%;
        border-radius: 10px;
}

.box100 {margin: -80vh 5px 0px 5px;
        padding: 10% 25% 0px 25%;
        border-radius: 10px;
}

.box200 {margin: 10vh 15% 0px 15%;
        padding: 50px 10px 0px 10px;
        background-color:rgba(255,255,255,0.8);
        border-radius: 10px;
}

/* 編集・削除・戻る 中央に */
.box8 {
    text-align: center;}
/* 編集・削除・戻る 横並び設定 */
.box8 form{
    display: inline-block;
}

/*入力フォームのbox*/
.box100 .box8 {margin-top: 20px;}


/* 新規登録ボタン*/
.box11 {text-align: center;}
.box11 form{display: inline-block;}


#buttonC{
  border: 1px solid #888888;
  margin: 10px 10px 10px 0px;    
  padding: 10px 30px;
  font-size: 18px;
  font-family: 'Kosugi Maru', sans-serif;
  background-color: #888888;
  color: #ffffff;
  border-radius: 3px;
  font-weight: bold;
}

#buttonC:hover {
    border: 1px solid #37BEF0;
    background-color: #37BEF0;
}


#buttonC:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

#buttonD{
  border: 2px solid #ffffff;
  margin: 10px 10px 10px 0px;    
  padding: 3px 15px;
  font-size: 25px;
  font-family: 'Jaldi', sans-serif;
  font-weight: bold;
  color: #ffffff;
  border-radius: 1px;
  opacity: 0.8; 
}

#buttonD:hover {
    background-color: #ffffff;
    color: #000000;
    border-radius: 1px;
    opacity: 0.7; 
}


#buttonD:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

#buttonE{
  border: 0px solid #888888;
  margin: 0px 0px 0px 0px;    
  padding: 5px 10px;
  font-size: 16px;
  font-family: 'Kosugi Maru', sans-serif;
  background-color: #ffffff;
  color: #888888;
  border-radius: 3  2px;
  font-weight: bold;
}

#buttonE:hover {
    border: 0px solid #37BEF0;
    background-color: #ffffff;
    opacity: 0.7;
}


#buttonE:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}


/*ページネーション*/
.pagenation {margin-top: 20px;
            text-align:center}

.pagenation ul {display: inline-block;
                list-style: none;
                }

.pagenation ul :after {content: "";
                    display: block;
                    clear:both} 

.pagenation li {float: left;
                width: auto}

.pagenation input[type="submit"] {
    border-radius: 0px;
    border: solid 0.5px #666666;
    padding: 3px 10px;
    font-size: 16px;
    font-family: 'Kosugi Maru', sans-serif;
    margin-left: 2px;
}

.pagenation strong input[type="submit"] {
    background-color: #666666;
    color: #ffffff;
}

/* トップのトグルボタン */    
#menubtn_top	{padding: 0px 0px;
	border: solid 0px #aaaaaa;
	border-radius: 5px;
	position: absolute;
	top: 5px;
	right: 6px;
	cursor: pointer} 

#menubtn_top:focus	{outline: none}
    
#menubtn_top i	{
    position: absolute;
    top: 5px;
	right: 6px;
    color: #ffffff;
    cursor: pointer;
	font-size: 30px}
    
#menubtn_top i:hover  {color: #ffffff;
        opacity: 0.8;}    

#menubtn_top span	{display: inline-block;
	text-indent: -9999px}

/* トップのナビゲーションメニュー（縦並び） */
.menu_top	{display: none}

.menu_top ul	{margin: 0;
    margin-top: 10px;
    background-color:rgba(0,0,0,0.4);
	padding: 0;
	list-style: none}

.menu_top li a	{display: block;
	padding: 5px 5px 2px 5px;
    margin-left: 0px;
	color: #ffffff;
	font-size: 20px;
    font-family: 'Jaldi', sans-serif;
    border-bottom: solid 0.5px #ffffff;
	text-decoration: none}

.menu_top li a:hover	{background-color: #eeeeee}


    
/* ########### 359px以下 ########### */
@media (max-width: 359px) {
/* サイト名 */
.site img	{width: 225px;
	height: auto}    
    
.box1 .toukousam .text h1	{padding-top:3px;
    margin-left: -20px;
    margin-right: -30px;
    font-size: 16px;
    transform: scale(0.82);
    transform-origin: left;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff;
}     
    
}

/* ########### 599px 以下 ########### */
@media (max-width: 599px) {
    
/* キャッチコピー */
.catch  {padding:5px;
        font-size: 16px}    
    
input[type="text"],input[type="tel"],input[type="email"],input[type="password"]{
    margin: 0.3em 0;
    padding: 0.3em;
    font-size: 16px;
    border-radius: 4px
} 

textarea{
    margin: 0.3em 0;
    padding: 0.3em;
    width: 100%;
    height: 12em;
    font-size: 16px;
    border-radius: 4px
}     
    
}



/* ########### 767px以下 ########### */
@media (max-width: 767px) {

/*TOPの基本情報*/    
.box4-2_kihon_A  {float: left;
                margin-right: 5px;
                width: 16px}
.box4-2_kihon_B  {float: left;
                width: auto}    
    
h1 {margin: -30px 0px 10px 55px;
	font-size: 30px;
    font-family: 'Kosugi Maru', sans-serif; 
	color: #575757} 

h2	{margin: 0px 0px 10px 5px;
    position: relative;/*相対位置*/
    padding-left: 1.5em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
	font-size: 20px;
    font-family: 'Kosugi Maru', sans-serif;
	color: #575757}

h2:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f111";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  color: #EEE8AA;    
  left: 0;/*アイコンの位置*/
  top: -0.07em;/*アイコンの位置*/
}    
    
/*topのスクロールボックス内のタイトル用*/
h5 {margin: 3px 4px 1px 3px;
	font-size: 17px;
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);
    transform-origin: left}    
    
p {margin: 0px 0px 18px 5px;
　　font-size: 17px;
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);
    transform-origin: left;} 
    
.link a	{margin: 0px 0px 0px 7px;
    padding-left: 1.5em;/*アイコン分のスペース*/
    line-height: 1.5;/*行高*/
	font-size: 19px}

.link a:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f111";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  color: #666666;    
  left: 0;/*アイコンの位置*/
  top: -0.3em;/*アイコンの位置*/
}    
    
/*topのスクロールのpは余白調整*/
.scroll_news .text p{margin: 3px 0px 1px 5px;
	font-size: 16px;
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9);
    -o-transform:scale(0.9);
    transform:scale(0.9);
    transform-origin: left;
}

/*topのスクロールのtimeは余白調整*/
.scroll_news .text .time p {margin: 3px 0px 1px 10px;
	font-size: 16px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
    transform-origin: left;
    color:#666666; 
}    
    
    
/*トリミングする外側の枠 */
.box1 .toukousam .cover  {
    width: 58px;/* トリミングしたい枠の幅 */
    height: 58px;/* トリミングしたい枠の高さ */
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-left: -7px;
    margin-top: 29px;
    margin-bottom: -00px;
    margin-right: -60px;
    }
.box1 .cover img {width: 100%;/*横幅に合わせてリサイズ*/
    height: auto   
    }    
    
/*TOPのタイトルアイコンは160pxなので余白は10+70=80px*/
.box1 .toukousam .text h1	{padding-top:3px;
    margin-left: -220px;
    font-size: 17.5px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff;
}     

/*listのサムネイルは80px*/
.box4-1 .toukousam .cover	{width: 80px}
    
/*listのサムネイルは80pxなので余白は85px*/
.box4-1 .toukousam .text	{margin-left: 85px;}


/*listのサムネイルは80px*/
.box4-1 .cover  {
    width: 80px;/* トリミングしたい枠の幅 */
    height: 80px;/* トリミングしたい枠の高さ */
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    }    
    
    
    
    
/* トグルボタン */
    
#menubtn	{padding: 0px 0px;
	border: solid 0px #aaaaaa;
	border-radius: 5px;
	background-color: #5da67f;
    opacity: 0.95; 
	position: absolute;
	top: 5px;
	right: 6px;
	cursor: pointer}    

#menubtn:focus	{outline: none}
    
#menubtn i	{color: #ffffff;
	font-size: 23px}
    
#menubtn i:hover  {color: #ffffff;
        opacity: 0.8;}    

#menubtn span	{display: inline-block;
	text-indent: -9999px}

/* ナビゲーションメニュー（縦並び） */
.menu	{display: none}

.menu ul	{margin: 0;
    margin-top: 10px;
    background-color: #5da67f;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 5px 5px 2px 5px;
    margin-left: 0px;
	color: #ffffff;
	font-size: 16px;
    font-family: 'Jaldi', sans-serif;
    border-bottom: solid 1px #ffffff;
	text-decoration: none}

.menu li a:hover	{background-color: #eeeeee}

/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: auto}

.box2	{padding-top: 32px;
    float: right;
	width: auto}    
    
/* ログインボタン非表示 */
#login	{display: none}
    
top_body {
  /* 画像ファイルの指定 */
  background-image: url(./cmtmin.png);
}    
    
    
    
/*indexのh1 h2 p*/
.box100 h1 {margin: 0px 0px 5px -5px;
	font-size: 30px;
    font-family: 'Noto Sans JP', sans-serif; 
	color: #ffffff}

.box100 h2	{margin: 0px 0px -6px -2px;
    position: relative;/*相対位置*/
    padding-left: 0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
	font-size: 20px;
    font-family: 'Noto Sans JP', sans-serif;
	color: #ffffff}

.box100 p{
    font-family: 'Noto Sans JP', sans-serif;
    color: #ffffff;
    margin: 0px 0px -7px 0px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
    transform-origin: left;
}

/*入力フォームのbox*/
.box100 {margin: -43vh 5px 0px 5px;
        padding: 20% 5% 0px 5%;
        border-radius: 10px;
}    

.box000 {margin: 70vh auto 0;
        transform: translateY(-30%);
        padding: 0% 10% 0px 10%;
        border-radius: 10px;
}    

.box200 {margin: 10vh 5% 0px 5%;
        padding: 50px 10px 0px 10px;
        background-color:rgba(255,255,255,0.8);
        border-radius: 10px;
}    
    
}

/* ########### 768px以上 ########### */
@media (min-width: 768px) {   
    
/*サイドメニューの文字サイズ*/
.sidemenu li a {font-size: 17px}    
#buttonB {font-size: 17px}    
    
/*トリミングする外側の枠 */
.box1 .toukousam .cover  {
    width: 100px;/* トリミングしたい枠の幅 */
    height: 100px;/* トリミングしたい枠の高さ */
    border: 3px solid #ffffff;
    border-radius: 50%;
    margin-left: -7px;
    margin-top: 45px;
    margin-right: -100px;
    }
.box1 .cover img {width:  100%;/*横幅に合わせてリサイズ*/
    height: auto   
    }    
    
/*TOPのタイトルアイコンは160pxなので余白は10+70=80px*/
.box1 .toukousam .text h1	{padding-top:3px;
    margin-left: -120px;
    font-size: 25px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff;
}     
    
/* トグルボタン非表示 */
#menubtn {display: none }    

/* メニュー非表示*/
.menu	{display: none}    
    
/* ログインボタン表示 */
#login	{display: block;
         margin-top: -25px}
    
.login a  {color: #ffffff;
	font-size: 20px;
    font-family: 'Kosugi Maru', sans-serif}
    
.login i  {margin-right: 5px; 
           font-size: 20px}    
       
/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: auto}

.box2	{padding-top: 40px;
    float: right;
	width: auto}

/* BOX4-1とBOX4-2を横に並べる設定 */
.box4:after	{content: "";
	display: block;
	clear: both}

.box4-1	{float: left;
	width: 80%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    word-wrap:break-word}

.box4-2	{float: left;
	width: 20%}


    
/* BOX6-1、BOX6-2を横に並べる設定 */
.box6:after	{content: "";
	display: block;
	clear: both}

.box6-1	{float: left;
	width: 49.2%;
    /*background-color: aqua;*/
	margin-right: 0.8%}
.box6-2	{float: right;
	width: 49.2%;
   /* background-color: aqua;*/
	margin-right: 0.8%}
     
/*TOPのみんなからの情報欄の回り込み（浮かせる）設定*/
.box9 {float:  left;   /* 回り込み指定 */
       width: 30%;
       margin-right: 3.2%;
}    
       
}


/* ########### 830px以上 ########### */
@media (min-width: 830px) {
/*サイドメニューの文字サイズ*/
.sidemenu li a {font-size: 20px}    
#buttonB {font-size: 20px}
}

/* ########### 1190px 以上 ########### */
@media (min-width: 1190px) {
/* 全体の横幅を固定 */
.box3, .box4, .boxA-inner, .box5-inner
	{width: 1140px;
	margin-left: auto;
	margin-right: auto}
    
/*h1の大きさは3段階で調整している*/
h1 {margin: 0px 0px 30px 160px;
	font-size: 60px;
    font-family: 'Kosugi Maru', sans-serif; 
	color: #575757}
    
/*TOPのタイトルアイコンは160pxなので余白は20+160=180px*/
.box1 .toukousam .text h1	{padding-top:0px;
    margin-left: -40px;
    font-size: 25px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff;
}
/*TOPのアイコン画像は160px*/
/*大きさを3段階で調整している*/    
.box1 .toukousam .cover  {
    width: 160px;/* トリミングしたい枠の幅 */
    height: 160px;/* トリミングしたい枠の高さ */
    border: 3px solid #ffffff;
    border-radius: 50%;
    margin-left: 10px;
    margin-top: 10px;
    }        
}

/* ########### ～768px ########### */
@media (max-width: 768px) {    
.box3 .box16 .cover  {
    height: 282.947px;/* トリミングしたい枠の高さ */
    }
    }
    
/* ########### ～600px（Amazon Fire 7用 600 ） ########### */
@media (max-width: 600px) { 
/* ヘッダー画像 推奨1900px×700px*/
.box3 .box16 .cover  {
    overflow: hidden;/* はみ出た部分を表示しない */
    width: 100%;/* トリミングしたい枠の幅 */
    height: 317.647px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    position: relative;/*imgの親要素としてrelativeを設定*/
    }    
}

/* ########### ～414px（iphone 6 Plus用 414 ） ########### */
@media (max-width: 414px) { 
/* ヘッダー画像 推奨1900px×700px*/
.box3 .box16 .cover  {
    overflow: hidden;/* はみ出た部分を表示しない */
    width: 100%;/* トリミングしたい枠の幅 */
    height: 152.526px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    position: relative;/*imgの親要素としてrelativeを設定*/
    }
}
    
/* ########### ～375px（iphone 6用 375） ########### */
@media (max-width: 375px) {    
    
/* ヘッダー画像 推奨1900px×700px*/
.box3 .box16 .cover  {
    overflow: hidden;/* はみ出た部分を表示しない */
    width: 100%;/* トリミングしたい枠の幅 */
    height: 140px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    position: relative;/*imgの親要素としてrelativeを設定*/
    }
}
    
/* ########### ～350px（iPhone SE用 320） ########### */
@media (max-width: 350px) {
    
/* ヘッダー画像 推奨1900px×700px*/
.box3 .box16 .cover  {
    overflow: hidden;/* はみ出た部分を表示しない */
    width: 100%;/* トリミングしたい枠の幅 */
    height: 117.89px;/* トリミングしたい枠の高さ */
    border-radius: 0px;
    position: relative;/*imgの親要素としてrelativeを設定*/
    }
}