@charset "UTF-8";
@font-face {
    /*フォントの名前*/
    font-family: "webfont";
    /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
    src: url("./webfont.woff2") format("woff2"),
         url("./webfont.woff") format("woff");
  }
a{  text-decoration: none;}
.center {
	text-align:center;
}

/*ヘッダーまわりはご自由に*/
body {

	display:inline;
    background:#d0d2d3;
    background-size: cover;
	font-family:webfont;
	font-size:90%;
	margin:0px;
}
body p{
  margin-top:3px;
  margin-bottom:4px;
  margin-left:10px;
}
body h2{
  font-weight: normal;
  font-size: 20px;
  margin-top:3px;
  margin-bottom:3px;
}
body h3{
  font-size: 18px;
  margin-top:4px;
  margin-bottom:4px;
  margin-left:10px;
  display: inline-block; /*改行させない*/
}
.hojyo{
  font-size: 12px;
  margin-left:3px;
  font-weight: normal;
  display: inline-block;
}
/*ヘッダーまわりはご自由に*/
header {
	display:inline;
    top: 0;
    z-index:10;
    width: 100%;
    position: fixed;
}
header a{
  color: #F8FBFD;
  text-decoration: none;
  font-size:16px;
  
}
header a:hover {
	color: #F8FBFD;
}
header h1 {
	color: #F8FBFD;
    font-size:16px;
    margin-left: -5px;
    margin-top: -20px;
    margin-bottom: 0px;
    padding: 0;
}
#header-icon-img {
	display:inline-block;
    vertical-align: middle;
    width: 22px;
    
}
#h-img {

}
/* ヘッダー部分のタイトル */
#header-title {
	font-family: "webfont";
	display:inline-block;
    font-weight:bold;
    color:#F8FBFD;
    margin-left:8px;
    white-space: nowrap;
}
/* ヘッダー横並び */
.header-flex-box {
    display: flex;              /* フレックスボックスにする */
}
.header-flex-item {
    padding-top: 5px;/* 内側の余白 */  
    padding-bottom: 0px;/* 内側の余白 */ 
    padding-right: 6px;/* 内側の余白 */ 
    padding-left: 6px;
}
/* ヘッダー横並びの要素 */
.header-flex-item:nth-child(1) {
    width: 25px;/*長さ*/
    margin-top: 2px;
    background: linear-gradient(#00bfff, #0000ff);/* 背景色指定 */
    border-radius:  5px;        /* 角丸指定 */
}
 
.header-flex-item:nth-child(2) {

}
 
.header-flex-item:nth-child(3) {
    margin-top: 4px;
}
.header-flex-item:nth-child(4) {
  vertical-align: middle;
  margin-top: 8px;
}
 
.header-flex-item:nth-child(5) {

    background: linear-gradient(#00bfff, #0000ff);/* 背景色指定 */
    /* background-color:  #00BCD4; 背景色指定 */
    margin-left: auto;
}

/*ヘッダーのバックグラウンド部分*/
#header-back-line {
        position: relative;
        background: linear-gradient(#00bfff, #0000ff);
      }


/*なびめにゅーすたーと*/
#nav-drawer {
    position: relative;
    background: linear-gradient(#54dc5c, #008000);
  }



/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
}  
/*リンク用BOX*/
#nav-box {
  display:inline-block;
  border-style: solid;
  border-radius: 10px;
  border-color: #3a93bd;
  background-color: #F8FBFD; 
  width: 96%;
  border-width: 2px;
  margin: 0px auto;
  font-family: "webfont";
  color: #000;
  cursor: pointer; /* マウスカーソルをポインターにする */
  overflow: hidden; /* overflowをhiddenにする */
  font-size: 18px;
}
#nav-box:hover { /* ホバー時のスタイル */
  color: #000;
  background-color: #42a4ce; /* 背景色を変える */
}
#nav-box:active { /* クリック時のスタイル */
  transform: translateY(3px); /* 少し下に移動する */
}

/*3本ラインのハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    margin-top: 1px;/* 内側の余白 */
    border-radius: 3px;
    background: #F8FBFD;
    display: block;
    content: '';
    cursor: pointer;
}

#nav-open span:before {
    bottom: -8px;
}
#nav-open span:after {
    bottom: -16px;
}

/*inputは隠す*/
input[type="checkbox"].nav-unshown {
    display:none;
}
  
/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
    cursor: pointer;
}

/*スライド画面*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;/*最前面に*/
    width: 90%;/*右側に隙間を作る*/
    max-width: 380px;/*最大幅*/
    height: 100%;
    background: linear-gradient(#00bfff, #0000ff);
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


#main-content {
    padding-top: 48px;
    width: 100%;

      }



article {

}

.thread-list {
  margin: 5px;
  font-size: 18px;
  }


/*フッター*/
footer {
	display:inline;
    bottom: 0;
    z-index:10;
    width: 100%;
    
    position: fixed;
}
/*フッターのバックグラウンド部分*/
#footer-back-line {
    position: relative;
    background: linear-gradient(#00bfff, #0000ff);
    height: 50px;
  }

/* フッター横並び */
.footer-flex-box {
    display: flex;              /* フレックスボックスにする */
}
.footer-flex-item {
    padding-top: 4px;/* 内側の余白 */  
    padding-bottom: 6px;/* 内側の余白 */ 
    padding-right: 6px;/* 内側の余白 */ 
    padding-left: 6px;
}
/* フッター横並びの要素 */
.footer-flex-item:nth-child(1) {

}
 
.footer-flex-item:nth-child(2) {

}
/* フッターの余白。隠れた部分を作らない為のもの */
.footer_yohaku {
    height: 56px; /* 余白の高さを指定する。 */
  }







/*検索Form*/
.search_container {
    box-sizing: border-box;
    position: relative;
    border: 1px solid #999;
    padding-left: 10px;
    border-radius: 20px;
    height: 28px;
    overflow: hidden;
    width:300px;
    background:#F8FBFD;

    margin-left: auto;
    margin-right: auto;
}
.search_container input[type="text"] {
    width:88%;
    border: none;
}
.search_container input[type="text"]:focus {
    width:88%;
    outline: 0;
}
.search_container input[type="image"] {
    vertical-align: middle;
    margin-top: -2px;
    margin-left: auto;
    height:16px;
}


.serch_site{
    margin-top: 4px;
}


/*ログインボタン*/
.buttonlogin {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #F8FBFD;
	background: #fd9535;/*色*/
	border-radius: 4px;/*角の丸み*/
	border: solid 2px #d27d00;/*線色*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
	font-weight: bold;
	cursor: pointer;
}
.buttonlogin:active {
	/*押したとき*/
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/*ポップアップ*/
.popup {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: .6s;

}
.popup.is-show {
	opacity: 1;
	visibility: visible;
}
.popup-inner {
	position: relative;
	width: 80%;
	margin:0 auto;
	padding:30px;
	max-width: 600px;
	top:10%;
	background-color: #F8FBFD;
	border-radius: 20px;
	text-align:center;
	z-index: 2;
}
.popup-inner img {
	width: 80%;
}
.close-area {
	display:inline-block;
	cursor: pointer;
	width:100%;
	
}
.black-background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
	z-index: 1;
	cursor: pointer;
}
/*アンカーポップアップ*/
.buttonanchor {

  cursor: pointer; /* カーソルをポインターにする */
  background-image: url("../IMG/static_img/anchor.png"); /* ボタンの背景画像を設定する */
  background-size: 100% 100%; /* 背景画像をボタンの横幅と縦幅に合わせる */
  border: none; /* ボタンの枠線を消す */
  width: 25px; /* ボタンの横幅を指定する */
  height: 25px; /* ボタンの縦幅を指定する */
}
.buttonanchor:active {
  transform: translateY(2px);
}
.popup-main {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: .6s;
}
.popup-main.anchor-is-show {
	opacity: 1;
	visibility: visible;
}
.anchor-popup-inner-box{
	top:8%;
	margin:0 auto;
	position: relative;
	overflow-y: auto;
 	scrollbar-width: none;
	width:fit-content;
	min-width: 32%;
	max-width: 88%;
	max-height: 85%;
	z-index: 9996;
}
.anchor-popup-inner {
	position: sticky;
	word-wrap: normal;
	margin:0 auto;
	padding: 16px;
	background-color: #fbfbfb;
	border-radius: 16px;
	z-index: 9997;
}

.close-anchor {
	display:inline-block;
	cursor: pointer;
	text-align:center;
}
.anchor-background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
	z-index: 1;
	cursor: pointer;
}
/*アンカーポップアップ 2 */

.buttonanchorframe {

	cursor: pointer; /* カーソルをポインターにする */
	background-image: url("../IMG/static_img/anchorframe.png"); /* ボタンの背景画像を設定する */
	background-size: 100% 100%; /* 背景画像をボタンの横幅と縦幅に合わせる */
	border: none; /* ボタンの枠線を消す */
	width: 25px; /* ボタンの横幅を指定する */
	height: 25px; /* ボタンの縦幅を指定する */
  }
  .buttonanchorframe:active {
	transform: translateY(2px);
  }
  .popup-anchorframe {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
  }
  .popup-anchorframe.anchorframe-is-show {
	  opacity: 1;
	  visibility: visible;
  }
  .anchorframe-popup-inner-box {
	top:8%;
	margin:0 auto;
	position: relative;
	overflow-y: auto;
 	scrollbar-width: none;
	width:fit-content;
	min-width: 32%;
	max-width: 88%;
	max-height: 85%;
	z-index: 9996;
  }
  .anchorframe-popup-inner {
	position: sticky;
	word-wrap: normal;
	margin:0 auto;
	padding: 16px;
	background-color: #fbfbfb;
	border-radius: 16px;
	z-index: 9997;
  }
  .anchorframe-popup-inner div{
    display: inline;
  }
  
  .close-anchorframe {
	  display:inline-block;
	  cursor: pointer;
	  text-align:center;
  }
  .anchorframe-background {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,.8);
	  z-index: 1;
	  cursor: pointer;
  }
/*レポートーポップアップ 2 */
.popup-report {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup-report.report-is-show {
  opacity: 1;
  visibility: visible;
}
.report-popup-inner {
  position: relative;
  width: 80%;
  margin:0 auto;
  padding:30px;
  max-width: 600px;
  top:10%;
  background-color: #F8FBFD;
  border-radius: 20px;
  z-index: 2;
}
.report-popup-inner div{
  display: inline;
}

.close-report {
  display:inline-block;
  cursor: pointer;
  text-align:center;
}
.report-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}
.report_text_post{
  border-radius: 10px;
  width: 96%;
  height: 100px;
  padding: 8px; /*テキストエリアの余白 */
}

  


/*×ボタン(とりあえず非表示中)*/
.batsu{
	display:none;
	position:absolute;
	font-size:32px;
    font-weight: bold;
    padding-left:7px;
	padding-bottom:4px;
    border: 1px solid #999;
    color: #999;
    border-radius: 100%;
    cursor: pointer;
    transition: .2s;
    z-index: 3;
}
    
.batsu:hover{
    background: #333;
    color: #F8FBFD;
}

 /*ローディング*/
@keyframes spin
{
    0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
    50%  { transform: rotate(180deg); opacity: 1.0; } /*50%の時は透明度なし*/
    100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/
 
}
.loader
{
	animation: spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
    position: absolute;
   top: 45%;
   left: 50%;
	margin-left:-24px;
    width: 30px; /*ローディングアイコンの横サイズ*/
    height: 30px; /*ローディングアイコンの縦サイズ*/
    border-radius: 50%;  /*CSS3で円を書く*/
    border: 8px solid #aaa;  /*円に○の白枠をつける*/
    border-right-color: transparent; /*円の右にC状の空きをつける*/
}


/* メインカラムとサイドカラム */
.container_flex {
    display: flex; /* Flexboxを有効にする */
    flex-wrap: wrap; /* 要素が折り返せるようにする */
  }
  
  @media screen and (min-width: 769px) { /* 画面幅が769px以上の場合 */
    .main_column {
        width: 76%;
      }
      
    .side_column {
        position: fixed; /* 追加 */
        width: 24%; /* サイドバーの幅を固定する */
        right: 0; /* 追加 */
    }
  }
  
  @media screen and (max-width: 768px) { /* 画面幅が768px以下の場合 */
    .main_column {
        flex: 1;
        width: 100%;
      }
    .side_column {
      width: 100%;
      order: 1;
    }
  }


/* スライドメニューの中身 */
  .slide_menu_head {
    color: #F8FBFD;
  
    text-align:center;
    padding-right: 10px;
    font-size:20px;
    font-weight: bold;
  
    margin-top:12px;
  }
  .fullbox-simple {
	display:block;
	width:90%;
	border:1px solid #f5f5f5;
	background-color:#F8FBFD;
	border-radius: 20px;
	overflow: hidden;
	margin:20px auto;
}
.fullbox-margin {
	width:95%;
	text-align:center;
	padding-bottom:20px;
	word-wrap: break-word;
}
.fullbox-text {
	width:95%;
	text-align:left;
	padding-bottom:20px;
	word-wrap: break-word;
    margin-left: 8px;
}
.slidebar_bottun {
	text-align: center;
	background: #F8FBFD;
	border-radius: 5px;
	left:  50%;
	color: #000;
	bottom: 0;
	width:90%;
	margin: auto;
  font-weight: bold;
}
.slidebar_bottun a{
	color: #000;
	text-decoration: none;
	display: block;
	border-radius: 5px;
	padding: 8px;
}
.slidebar_bottun a:hover {
	color: #F8FBFD;
	background-color: #dcdcdc;
	border-radius: 5px;
}


.menu_bottun {
	text-align: center;
	background: #F8FBFD;
	border-radius: 5px;
  font-size: 20px;
	left:  50%;
	color: #000;
	bottom: 0;
	width:95%;
	margin: auto;
}
.menu_bottun a{
	color: #000;
	text-decoration: none;
	display: block;
	border-radius: 5px;
	padding: 8px;
}
.menu_bottun a:hover {
	color: #F8FBFD;
	background-color: #dcdcdc;
	border-radius: 5px;
}


/* プライバシーポリシーの枠とかコンテンツ内系 */
.simple-box {
	border:1px solid #f5f5f5;
	background-color:#F8FBFD;
	border-radius: 20px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 8px;
    padding-left: 10px;
    padding-top: 5px;

}
.simple-box p{
  font-size: 16px;
  margin-bottom: 0px;
  
}
.simple-box h1{
  font-size: 24px;
  margin-top: 2px;
  margin-left: 5px;
  margin-bottom: 0px;
}
.simple-box h1 a{
  color: #000;
  text-decoration: none;
}
.simple-box h1 a:hover{
  color: #6d6c6c;
}
/* プライバシーポリシーの枠とかコンテンツ内系 */
.simple-box-text-area {
    font-size: 16px;
    margin-right: 6px;
    margin-bottom: 8px;
    line-height: 1.3;
    overflow-wrap: break-word; 

}
/* シンプルボックスをリンクに */
.box-link a{
    border:1px solid #f5f5f5;
	background-color:#F8FBFD;
	border-radius: 20px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 8px;
    padding-left: 10px;
	color: #0059ff;
	text-decoration: none;
	display: block;

}
.box-link a:hover {
	color: #F8FBFD;
  border:1px solid #018dff;
	background-color: #018dff;
}


/* ユーザーセッティングのチェックボックス */
/* チェックボックスのサイズと色を変更 */
.simple-box-text-area input[type="checkbox"] {
  width: 25px;
  height: 25px;
  border: 2px solid #42a4ce;
}

/* チェックボックスのラベルの位置を調整 */
.simple-box-text-area label {
  margin-left: 10px;
}

/* チェックしたときにチェックマークを表示 */
.simple-box-text-area input[type="checkbox"]:checked + label::before {
  content: "\2713";
  color: white;
  font-size: 20px;
  position: absolute;
  left: 5px;
}

/* チェックしたときにアニメーションを付ける */
.simple-box-text-area input[type="checkbox"]:checked {
  background-color: #42a4ce;
  transform: scale(1.2);
  transition: all .3s ease-in-out;
}


/* 問題報告のチェックボックス */
/* チェックボックスのサイズと色を変更 */
.report-popup-inner input[type="radio"] {
  width: 25px;
  height: 25px;
  border: 2px solid #42a4ce;
  vertical-align: middle;
  margin-bottom: 5px;
}

/* チェックボックスのラベルの位置を調整 */
.report-popup-inner label{
  font-size: 18px;
}

/* チェックしたときにチェックマークを表示 */
.report-popup-inner input[type="radio"]:checked + label::before {
  content: "\2713";
  color: white;
  font-size: 20px;
  position: absolute;
  left: 5px;
}

/* チェックしたときにアニメーションを付ける */
.report-popup-inner input[type="radio"]:checked {
  background-color: #42a4ce;
  transform: scale(1.2);
  transition: all .3s ease-in-out;
}





.crevice{
  margin-top: 5px;
}

.debug-text{
margin-bottom: 8px;
}
.waku-anchor { /* 安価の枠 */
  border-radius: 10px;
  border-color: #3a93bd;
  border-width: 2px;
  padding: 8px;
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: bold;
}
.waku-anchor:active {
  background-color: #42a4ce;
  transform: translateY(3px);
}



  .flex-right {
    display: flex;
    justify-content: space-between; /* 左右の要素を端に寄せる */
  }
  .left-anchor { /* 追加した要素のクラス */
    align-self: center;
    font-size: 14px;
  }
  .left-anchor-res { /* 返信表示用 */
    align-self: center;
    font-size: 14px;
    margin-right: auto; /* 右側に余白を作る */
  }
  .right-command {
    align-self: center;
    font-size: 12px;
  }
  
  .right-1day-id {
    align-self: center;
    font-size: 13px;
  }
  .right-1day-color {
    font-size: 15px;
    color: #42a4ce;
  }
  .right-command-color {
    font-size: 15px;
    color: #42a4ce;
  }
  
/* flex row アイテムは左から右へ（ltr）水平方向に配置されます。 */
  .flex-bbs_write {
    flex-direction: row;
    margin: 5px;
    align-items: center;
  }
.bbs-open-name{
  font-size: 15px;
  margin-left: -10px;
  color: rgb(43, 116, 43);
  font-weight: bold;
  
  }
  .bbs-open-day{
    font-size: 11px;
  
  }
.thread_post{
    border-radius: 10px;
    width: 75%;
    height: 20px;
    padding: 8px;
  }
.bbs_name_post{
    border-radius: 10px;
    max-width: 37%;
    height: 20px;
    padding: 8px;
    
  }
.bbs_cmd_post{
    border-radius: 10px;
    max-width: 17%;
    margin-left: 5px;
    height: 20px;
    padding: 8px;
  }
 .bbs_text_post{
    border-radius: 10px;
    width: 96%;
    height: 200px;
    padding: 8px; /*テキストエリアの余白 */
  }
  .bbs_img_post{
    border-radius: 10px;
    width: 60%;
    padding: 4px;
  }

 /* 画像選択フォーム */
 .upload_file {
    display: none;  /* 本来のファイル選択フォームは非表示に */
 }
 #previewbox {
    display: inline-block;     /* プレビュー領域をボタンと横並びに配置する */
    vertical-align: middle;    /* プレビュー画像の垂直方向の配置 */
 }

.hidden {
  display: none;  /* 本来のファイル選択フォームは非表示に */
}
.reply_button {
  display: inline-block;
  background-color: #42a4ce;
  color: white;
  margin-left: 6px;
  margin-bottom: 2px;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

 .bbs_button {
  display: inline-block;
  background-color: #42a4ce;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: initial;
}
.bbs_button a{
  color: white;
}
.bbs_button a:hover{
  color: white;

}
.bbs_button:hover {
  background-color: #398caf;
}

.bbs_button:active {
  background-color: #398caf;
  transform: translateY(2px);
}


/*タブ*/
.tab-area {
  width: 400px;
  margin: 0 auto;
}

.tab-area input[type="radio"] {
  display: none;
}

.tab-area label {
  display: inline-block;
  width: 120px;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #eee;
}

.tab-area input[type="radio"]:checked + label {
  background-color: #F8FBFD;
}

.tab-area input[type="radio"]:checked + label + input[type="radio"] + label + input[type="radio"] + label + .content {
  display: block;
}

.popupcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}
.popupcontent p{
  display: none;
  margin: 50px;
  border: 1px solid #ccc;
}



.textzone{
 width: 220px;
 border-radius: 20px;
 padding: 5px;
 margin: 5px;
}
.profname-textzone{
  width: 180px;
  border-radius: 20px;
  padding: 5px;
  margin: 5px;
 }

.prof-textzone{
  border: 2px solid;
  width: 80%;
  height: 220px;
  border-radius: 20px;
  padding: 10px;
 }

.tab-panel{
  margin: auto;
}
.tab-group{
  display: flex;
  justify-content: center;
  margin: auto;
  

}
.tab{
  flex-grow: 1;
  padding:5px;
  list-style:none;
  border:solid 1px #CCC;
  text-align:center;
  cursor:pointer;
  flex: 1;
  border-radius: 8px;
}
.panel-group{
  border-top:none;
  text-align:center;
  margin: 20px;
}
.panel-group p{
  font-size: 18px;
  text-align:center;
}
.panel{
  display:none;
}
.tab.is-tabactive{
  background:#42a4ce;
  color:#F8FBFD;
  transition: all 0.2s ease-out;
}
.panel.is-tabshow{
  display:block;
}







.paging {
  display: flex;
  flex-wrap: wrap;
  width: 96%;;
  margin: auto;
  padding: 8px;
  text-align: center;
  align-items: center;
}

.paging a, .paging span {
  flex-grow: 1;
  flex-basis: 0;
}
.paging a, .paging span {
  border: 2px solid #ccc;
  padding: 5px 8px;
  border-radius: 10px; /* 追加 */
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1); /* 追加 */
}

.paging a {
  text-decoration: none;
  background-color: #eeeeee;
  border-color: #42a4ce;
  color: #018dff;
}

.paging a:hover {
  background-color: #eeeeee;
}

.paging a:active { /* 追加 */
  background-color: #eeeeee;
  border-color: #912c1a;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
  color: #912c1a;
}

.paging span {
  background-color: #eeeeee;
  border-color: #912c1a;
  color: #912c1a;

}


.site-register-last{
  border-radius: 10px;
  border-width: 1em;
  border: 2px dashed #e0e0e0;
  text-align: center;
}

.prof-text-waku{
  border-radius: 10px;
  border-width: 1em;
  border: 2px dashed #e0e0e0;
}
.prof-text{
  margin: 10px;
}

.url-center-text{
  text-align: center;
}
.url_post{
  border-radius: 10px;
  width: 75%;
  height: 20px;
  padding: 8px;
}
.user-tag{
  border-radius: 10px;
  width: 70px;
  height: 20px;
  padding: 8px;
}
.user-review {
  border-radius: 10px;
  width: 75%;
  height: 200px;
  padding: 8px;
}
.url-regster{
  padding: 8px;
  text-align: center;
}
.child {
  margin: 15px; /* 上下左右に10pxのmargin */
}
.child:nth-child(n+2):nth-child(-n+3) {
  margin-bottom: 20px; /* 最初と最後以外は下に20pxのmargin */
}


/*画像を丸く切り取る*/
.profimg {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow:hidden;
  background-color:#ebf6f7;
  object-fit: cover;
  object-position: left top;
}
.profimg img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  
}
/*画像を丸く切り取る*/
.profimg-midiam {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow:hidden;
  background-color:#ebf6f7;
  object-fit: cover;
  object-position: left top;
}
.profimg-midiam img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  
}

/*画像を丸く切り取る*/
.profimg-small {
  display:inline-block;
  vertical-align: middle;
  margin-top: -8px;
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow:hidden;
  background-color:#ebf6f7;
  overflow-wrap: normal; /* 追加 */
  object-fit: cover;
  object-position: left top;
}
.profimg-small img {

  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  margin-top: -10px;
}

.url-txt{
  display: flex;
  justify-content: flex-end;
}

.bold{
  padding-top: 6px;
  font-weight: bold;
  display: inline-block;
}
.bold h1{
  font-size: 15px;
}

.site-name{
  font-size: 19px;
  margin-left: 10px;
  margin-top: 5px;
  font-weight: bold;
}
.site-name a{
  color: #629cdf;
}
.site-name a :hover{
  color: #629cdf;
}
.site-text{
  font-size: 16px;
  margin-left: 6px;
  margin-top: 5px;
}
.site-review-text{
  font-size: 15px;
  margin-left: 6px;
  margin-top: 8px;
}
.site-right-flex {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.site-right-flex a{
  color: #629cdf;
}
.site-right-flex a:hover{
  color: #629cdf;
}
.site-flex {
  display: flex;
  justify-content: space-between;
}

.site-flex-item {

}

.site-flex-item:first-child {
  margin-right: auto;
  margin-top: 14px;;
}

.waku-tag { /* 安価の枠 */
  display:inline-block;
  border-style: solid;
  border-radius: 10px;
  border-color: #3a93bd;
  background-color: #f0f4f6; 
  border-width: 2px;
  left:  50%;
  padding: 8px;
  font-size: 14px;
  margin-bottom: 2px;
  margin-top: 2px;
  margin-left: 1px;
  font-family: "webfont";
  color: #000;
  cursor: pointer; /* マウスカーソルをポインターにする */
}
.waku-tag:hover { /* ホバー時のスタイル */
  color: #000;
  background-color: #42a4ce; /* 背景色を変える */
}
.waku-tag:active { /* クリック時のスタイル */
  transform: translateY(3px); /* 少し下に移動する */
}


.waku-full-parent{
  text-align: center;
}
.waku-full { /* 安価の枠 */
  display:inline-block;
  border-style: solid;
  border-radius: 10px;
  border-color: #3a93bd;
  background-color: #F8FBFD; 
  width: 96%;
  border-width: 2px;
  margin: 0px auto;
  font-family: "webfont";
  color: #000;
  cursor: pointer; /* マウスカーソルをポインターにする */
  overflow: hidden; /* overflowをhiddenにする */
  font-size: 18px;
}
.waku-full p{
  margin: 5px auto;
}
.waku-full:hover { /* ホバー時のスタイル */
  color: #000;
  background-color: #42a4ce; /* 背景色を変える */
}
.waku-full:active { /* クリック時のスタイル */
  transform: translateY(3px); /* 少し下に移動する */
}

.iine-waku{
  border-style: solid;
  border-radius: 10px;
  border-color: #3a93bd;
  border-width: 2px;
  padding: 8px;
  font-size: 14px;
  margin-left: 6px;
  margin-bottom: 4px;
  margin-top: 8px;
  font-family: "webfont";
}
.iine-waku img {
  width: 20px;
  height: 20px;
  vertical-align: middle; /*画像とテキストを中央揃え*/
}

.iine-waku span {
  margin-left: 0px; /*画像とテキストの間隔*/
}
.iine-waku:active {
  background-color: #42a4ce;
  transform: translateY(3px);
}



summary {
  display: inline-block;
  background-color: #42a4ce;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: initial;
}
details {

}
select {
  border: 1px solid black; /* 枠線を黒にする */
  border-radius: 5px; /* 枠線を丸くする */
  background-color: white; /* 背景を白にする */
  appearance: none; /* ブラウザの既定のスタイルを削除する */
  padding: 5px 10px;
}
.mini_button {
  background-color: #42a4ce;
  color: white;
  padding: 5px 10px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.inline{/* div要素をインライン要素にする */
  display: inline; 
}

.kaisekikun-waku{
  border-radius: 10px;
  border-width: 1em;
  border: 2px dashed #e0e0e0;
}
.kaisekikun-text{
  margin: 10px;
}
.img90{
  max-width: 90%;
  height: auto;
}

.msg_p{
font-size: 22px;
display: inline;
}
.msg_px{
  font-size: 18px;
  display: inline;
}
.msg_pi{
  font-size: 16px;
  display: inline;
}
.msg_name_post{
  border-radius: 10px;
  width: 28%;
  height: 14px;
  padding: 8px;
  
}
.msg_title_post{
  border-radius: 10px;
  width: 68%;
  height: 20px;
  padding: 8px;
  
}
.msg_text_post{
  border-radius: 10px;
  width: 96%;
  height: 320px;
  padding: 8px; /*テキストエリアの余白 */
}
.msg_signal{
  color: #000000;
  font-size: 17px;
  display: inline;
}
.msg_prof{
  font-size: 12px;
  display: inline;
}
.msg_prof_midiam{
  font-size: 18px;
  display: inline;
}
.msg_single_title{
  font-size: 16px;
}
.msg_single_main{
  font-size: 16px;
}
.msg_single_day{
  color: #0b7218;
  font-size: 14px;
  display: inline;
}
.msg_day{
  color: #0b7218;
  font-size: 12px;
  display: inline;
}
/*ログインボタン*/
.buttonMsgDel {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #F8FBFD;
	background: #47a3f9;/*色*/
	border-radius: 4px;/*角の丸み*/
	border: solid 2px #3b91e1;/*線色*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
	font-weight: bold;
	cursor: pointer;
}
.buttonMsgDel:active {
	/*押したとき*/
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.youtube-waku {
  border-radius: 10px;
  border: 2px dashed #999999;
  margin-top: 6px;
  background-color: #f1f1f1;
}
.youtube-waku:hover { /* :hoverセレクタを追加する */
  background-color: #d9f9ff; /* 背景色を変更する */
}

.youtube-box {
  display: flex; /* displayをflexにする */
  flex-direction: row; /* flex-directionをrowにする */
}

.youtube-title-box {
  display: flex; /* displayをflexにする */
  align-items: center; /* align-itemsをcenterにする */
}

.youtube-title {
  font-size: 16px;
  margin-top: 3px;
  margin-left: 6px;
  color: #0059ff;
  word-wrap: break-word;
  overflow: hidden; /* overflowをhiddenにする */
  font-weight: bold;
}

.youtube-img {
  width: 160px;
  height: 120px;
  margin: 6px;
  border-radius: 10px;
}

.youtube-text {
  display: flex; /* displayをflexにする */
  align-items: center; /* align-itemsをcenterにする */
  margin-left: 5px;
  font-size: 12px;
  overflow: hidden; /* overflowをhiddenにする */
  color: #000;
}

.bbs_mark{
  width: 15px;
  margin-right: 5px;
}

.accessrank-waku{
  margin-left: 5px;
  padding-bottom:5px;
  margin-top:5px;
}
.accessrank-line {
    padding-bottom:2px;
    display:inline;
    border-bottom: dotted  2px rgb(120, 117, 117); /* 実線 太さ 色 */
}
.kokoku_img img{
  max-width: 89%;
  text-align:center;
}
.space_box{
  padding:5px;
}
 /* --- タブ（ラジオボタン）のエリア ------------------------ */
 #tabArea{
  line-height    : 1;                   /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  height: 320px;
}
 
 /* --- ラジオボタン ---------------------------------------- */
#tabArea input[type="radio"] {
  display        : none;                /* ラジオボタン非表示 */
}
 
 /* --- ラジオボタン直後のlabel ----------------------------- */
#tabArea input[type="radio"] + label {
  display        : inline-block;
  position       : relative;
  padding        : 6px 6px;            /* labelの余白 */
  font-size      : 12pt;                /* タブの文字サイズ   */
  font-weight    : bold;                /* タブは太文字       */
  margin         : 0 1px;               /* タブ間隔           */
  background     : #F8FBFD;                /* 未選択タブの背景色 */
  color          : #666;                /* 未選択タブの文字色 */
}
 
 /* --- 選択されたラジオボタン直後のlabel ------------------- */
#tabArea input[type="radio"]:checked + label {
  border-color   : #4682B4;             /* 選択タブの枠線     */
  color          : #4682B4;             /* 選択タブの文字色   */
  cursor         : default;             /* デフォルトカーソル */
  z-index        : 2;                   /* 重なりを最前面へ   */
}
 
 /* --- 未選択ラジオボタン直後のlabelにマウスが乗った ------- */
#tabArea input[type="radio"]:not(:checked) + label:hover {
  background     : #b4cee2;             /* カーソルタブの背景 */
  cursor         : pointer;             /* リンクカーソル     */
}
 
 /* --- タブ下の本体エリア ---------------------------------- */
.tabBody{
  position       : relative;
  z-index        : 1;                   /* 未選択タブより全面 */
}