body {
	margin: 0px;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; 
}

.style_bg0 {
	text-align: center;
	background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
	color:lightcyan;
	font-size: 1.4em;
}
.style_secret_head {
	text-align: center;
	background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
	color:lightcyan;
	font-size: 1.4em;
	width:80%;
}	
.style_bg1 {
	text-align: center;
	color:blue;
	font-size: 1.0em;
}
	
.style_bg2 {
	text-align: center;
	color:blue;
	font-size: 2.0em;
}

.style_bg3 {
	text-align: right;
	color:black;
	font-size: 1.0em;
}
	
.style_bg4 {
	text-align: left;
	color:black;
	font-size: 1.2em;
}

.style_bg5 {
	text-align: left;
	color:black;
	padding : 20px ;
	font-weight:700;
	font-size: 1.0em;
}

.style_bg6 {
	text-align: left;
	background: linear-gradient(90deg, rgb(0, 135, 0), rgb(0, 55, 0));
	color:lightcyan;
	font-size: 1.2em;
}

#------------------------記事表示用

.style_bg7 {
	text-align: left;
	background-color: lightyellow;
	color:darkblue;
	font-weight:700;
	font-size: 1.0em;
}


.style_bg8 {
	text-align: left;
	color:darkred;
	font-weight:700;
	font-size: 1.0em;
}


.style_bg9 {
	text-align: left;
	color:darkgreen;
	font-weight:700;
	font-size: 1.0em;
}


.style_bg10 {
	text-align: left;
	background-color: black;
	color:lightpink;
	font-weight:700;
	font-size: 1.0em;
}

.style_bg11 {
	text-align: left;
	color:black;
	font-weight:700;
	font-size: 1.0em;
}

.style_secret {
	text-align: left;
	background-color: white;
	color:black;
	font-size: 1.2em;
	width:80%;
	overflow-wrap: break-word;
}
	
.style_bg_main {
	text-align: left;
	color:black;
	font-size: 1.5em;
}
	
.style_bg_big {
	text-align: center;
	virtical-align:middle;
	color:black;
	font-weight:600;
	font-size: 2.0em;
}

.style_bg12 {
	text-align: left;
	background: linear-gradient(90deg, rgb(85,100,27), rgb(85, 100, 75));
	color:white;
	font-size: 1.2em;
}

.style_bg13 {
	text-align: left;
	background: linear-gradient(90deg, rgb(255, 255, 255), rgb(200,200,200));
	color:black;
	margin : 30px ;
	padding : 0px 15px 0px; ;
	font-weight:600;
	font-size: 1.2em;
}

.style_bg14 {
	text-align: right;
	color:black;
	font-size: 0.8em;
	background-color:#b4dede;
	border:1px solid blue;
}

.style_bg15 {
	text-align: center;
	background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
	color:lightcyan;
	font-size: 1.2em;
}


.style_bg16 {
	text-align: center;
	color:black;
	font-weight:700;
	font-size: 1.2em;
	overflow-wrap: break-word;
}


.style_bg17 {
	text-align: left;
	color:black;
	font-weight:700;
	font-size: 0.9em;
}

.style_bg18 {
	text-align: left;
	background-color: lightyellow;
	color:black;
	font-weight:700;
	font-size: 0.9em;
}

.style_bg19 {
	text-align: left;
	background-color: navy;
	color:lightcyan;
	font-weight:700;
	font-size: 0.9em;
}

.video-wrap {
  position: relative;
}
p {
  font-family: serif;          
  color: #fff;
  font-size: 400%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.radius-percent-30 { 
  border-radius: 10%;
  vertical-align: middle;
}

.radius-percent-30-c22image{
  border-radius: 10%;
  vertical-align: middle;
	width:200px;
}

.btnstyle-big { 
  border-radius: 10%;
  vertical-align: middle;
  height:34px;
  font-size:1.5em;
  font-weight:700;
  color:red;
}

.radius-percent-80 { 
  border-radius: 5%;
  vertical-align: left;
  width: 160px;
}
	
.radius-percent-90 { 
  border-radius: 5%;
  vertical-align: left;
  font-size:1.0em;
}
	
.radius-percent-100 { 
  border-radius: 5%;
  vertical-align: left;
  font-size:1em;
  width:210px;
}

.radius-percent-10 { 
  border-radius: 5%;
  vertical-align: left;
  font-size:0.8em;
}

.style_bg20251004 {
    text-align: center;
	background: linear-gradient(90deg, rgb(2, 107, 39), rgb(114, 144, 135));
	color:lightcyan;
	font-size: 1.4em;
}

/* db_handbook 用 */
.cgi-top{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top:2.0em;
}

.cgi-page{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0.8em;
}

.cgi-block-all{
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: start;
	margin-top:10px;
	gap:12px;
}

.cgi-block-left{
	display:flex;
	flex-direction: row;
	/* width:400px; */
	justify-content: center;
	align-items: start;
}

.cgi-block-right{
	display:flex;
	flex-direction: row;
	/* justify-content: center; */
	/* align-items: start; */
	/* URL表示は、以下をコメント化が必要  */
	/* max-width:650px; */
	/* width:100%; */
}

.cgi-block-search{
	display:flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: start;	 */
}

.cgi-search-box{
	display:flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: start; */
}
.cgi-sort-box{
	display:flex;
	flex-direction: row;
	justify-content: center;
	/* align-items: start; */
}
.cgi-list-box{
	display:flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: start; */
}
.cgi-list-box table{
	border:0px solid magenta;
	background-color:darkgreen;
}

.cgi-list-box table td{
	border:0px solid magenta;
}


.cgi-list-box-prod{
	display:flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: start; */
}
.cgi-list-box-prod table{
	border:1px solid magenta;
}

.cgi-list-box-prod table td{
	border:1px solid magenta;
}


.cgi-calendar{
	display:flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: start; */
}
.cgi-gallery-box{
	display:flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: start; */
}
.cgi-button{
	display:block;
	/* flex-direction: column; */
}
.cgi-button img{
	/* width:80px; */
	/* min-width: 120px; */
}

/* ギャラリー　一覧表示 */
.cgi-gallery{
	display:block;
	flex-direction: column;
	background-color:#cccccc90;
	justify-content:center;
	/* align-items:start; */
	padding-top: 10px;
	width:880px;
}
.cgi-gallery table{
	max-width: 650px;
	min-width:120px;
	height:auto;
	/* width:40px; */
	border-collapse: collapse;
	padding:0;
	/* spacing:0; */
	border: 1px solid green;
	width:100%;
}

.cgi-gallery table th{
	background-color: #00000075;
	/* width:auto; */
	color:#fff375;
    border: 1px solid blue; /* セルにも罫線を適用 */
}
.cgi-gallery table td{
	background-color: #55667725;
	width:auto;
	/* justify-content: center; */
	/* align-items:center; */
    border: 1px solid blue; /* セルにも罫線を適用 */
}
/* .cgi-gallery table img{
	width:100%;
	max-width:650px;
} */

.gallery-table{
	display:flex;
	flex-direction: column;
	justify-content: center;	
	border: 1px solid silver;
	background-color: #55555580;
	color:#000000;
}
.item-name{
	display:flex;
	flex-direction: column;
	border: 1px solid silver;
	background-color: #022f2750;
	color:#e5f904;
}

/* ギャラリー　詳細表示 */
.cgi-gallery-prof{
	display:flex;
	flex-direction:column;		
	align-items:center;
	justify-content: center;
	background-color: #b06c0750; 
}
.cgi-gallery-prof table{
	max-width: 800px;
	min-width:270px;
	height:auto;
	border-collapse: collapse;
	padding:0;
	border: 1px solid blue;
	width:100%;
}
.cgi-gallery-prof table th{
	background-color: #00000075;
	/* width:auto; */
	color:#fff375;
    border: 1x solid blue; /* セルにも罫線を適用 */
}

.cgi-gallery-prof table td{
	background-color: #55667725;
	width:auto;
	/* justify-content: center; */
	/* align-items:center; */
	padding:0px 2px;
    border: 1px solid blue; /* セルにも罫線を適用 */
}

.slide-block-cgi{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
	background-color: #ffff1150; 
}
/* 2025/12/14 移動 */
.info-head{
	width:80%;
	/* border-weight:1px; */
	border:1px solid blue;
}
.info-box{
	width:80%;
	/* border-weight:1px; */
	border:1px solid blue;
}
.info-box table td{
	/* width:80%; */
	/* border-weight:1px; */
	border:1px solid blue;
}

.size-80{
	width:80px;
}
.gallery-button{
	width:auto;
	height:32px;
}
.search-btn{
	display:none;
}

.thumb_music_tab{
	display:flex;
}
.thumb_music_tab table{
	max-width: 350px;
	min-width:120px;
	height:auto;
	width:40px;
	border-collapse: collapse;
	padding:0;
	/* spacing:0; */
	border: 1px solid blue;
}

.profile-date{
	display:flex;
	flex-direction:row;
	width:90%;
}
.profile-title {
    display: flex;
    flex-direction: row;
    padding: 5px;
    width: 80%;
}
.profile-share-box{
    display: flex;
    flex-direction: column;
	border:1px solid blue;
	gap:7px;
	padding:2px;
	background-color:#d4d4d4;
}

.profile-date-box{
    display: flex;
    flex-direction: row;
	border:1px solid blue;
	gap:7px;
	padding:2px;
	background-color:#d4d4d4;
}

.style_prof_title {
    text-align: left;
    background: linear-gradient(90deg, rgb(20 151 20), rgb(56 207 56));
    color: lightcyan;
    font-size: 1.2em;
    padding: 12px;
	border:2px solid darkgreen;
	width:85%;
}
.song_douga_row{
	display:flex;
	flex-direction:row;
	justify-content: center;	
}

/* blog */
.cgi-chart-box{
  display:flex;
  width:650px;
  height:400px;
  margin-top:1em;
}
.cgi-chart-box-sp{
  display:none;
  width:400px;
  height:320px;
}

.cgi-chart-container {
  display: flex;
  justify-content: center; /* 中央寄せ */
  padding: 1rem 0;
}
/* アスペクト比維持（横:縦 = 1024:320 = 約 3.2:1） */
.cgi-chart-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  padding-top: calc(320 / 500 * 100%); /* 高さを比率で決定 */
}
.cgi-chart-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
  border: none; /* frameborder="0" 相当 */
  overflow: hidden;  /* ← これが scrolling="no" 相当 */
}
.blog-image-width{
	display:flex;
}
.blog-image-width img{
	max-width:650px;
	width:100%;
}

@media (max-width: 1280px) {
	.cgi-page,
	.cgi-button,
	.cgi-block-search,
	.cgi-list-box,
	.cgi-calendar{
		display:none;
	}
	.slide-block-cgi{
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	background-color: #ffff1150; 
	}
	.radius-percent-30-c22image{
		width:150px;
	}
}

.cgi-gallery-box{
	/* width:850px; */
}

.cgi-button-box{
	display:flex;
}

.prof-thumb-pc	{
	display:flex;

}
.prof-thumb-sp	{
	display:none;
	justify-content: center;	
}
.prof-table{
	/* width:850px */
}

.tab-hd{
		width:25%;
}
.tab-dt1{
		width:50%;
}
.tab-dt2{
		width:25px;
}	
.songword{
	display:flex;
	flex-direction: column;
}
.song_youtube250{
	display:none;
	justify-content:center;
}	
.song_youtube480{
	display:flex;
	justify-content:center;
}	

.song_douga_rireki{
	display:flex;
	flex-direction: row;
	justify-content:center;		
}

/* 固定ヘッダー */
.cgi-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 10px 20px;
  z-index: 1000;
}

.cgi-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cgi-logo {
  font-size: 20px;
  font-weight: bold;
	padding:0em 2em;
}

.cgi-nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.cgi-nav-links a {
  color: white;
  text-decoration: none;
}
.cgi-nav-toggle{
  display:none;
}

.nav-category{
	display:flex;
	flex-direction: row;
}

@media (max-width: 768px) {
	.cgi-top{
		display:none;
	}	

	.cgi-gallery-prof{
		display:flex;
		flex-direction:column;		
		align-items:center;
		justify-content: center;
		background-color: #b06c0750; 
	}

	.cgi-button-box{
		display:flex;
		align-items:center;
		justify-content: center;
		background-color: #ffff1150;
		padding-top:2em;
	}
	.cgi-gallery-box{
		/* width:450px; */
		justify-content: center;
	}

	.cgi-gallery{
		max-width:450px;
		min-width:320px;
		height:auto;
		width:400px;
	}
	.cgi-block-all {
		/* display: flex; */
		/* flex-direction: row; */
		/* justify-content: center; */
		/* align-items: start; */
		margin-top: 30px;
	}
	/* .cgi-gallery th{
		white-space: normal;
		word-break: break-word;
		width:150px;
		height:4em;
	}
	.cgi-gallery table{
		max-width: 250px;
		min-width:120px;
		height:auto;
		width:100%;
	} */
	/* .cgi-gallery-prof table{
		max-width: 250px;
		min-width:120px;
		height:auto;
		width:100%;
	} */

	.tab-hd{
		 width:30%;
	}
	.tab-dt1{
		 width:70%;
	}
	.tab-dt2{
		 width:1%;
	}	
	.banner-box-1 {
		width: 220px;
		height: 400px;
	}
	.banner-box-2 {
		width: 360px;
		height: 220px;
	}
	.prof-thumb-pc	{
		display:none;
	}
	.prof-thumb-sp	{
		display:flex;
	}
	.prof-thumb-sp	img{
		width:200px;
		height:auto;
	}	
	.prof-table{
	width:300px
	}
	.logo{
		font-size:16px;
	}
	.radius-percent-30-c22image{
		width:180px;
	}
	.thumb_music_tab{
		display:none;
	}
	.songword{
		display:none;		
	}
	.song_youtube480{
		display:none;
	}	
	.song_youtube250{
		display:flex;
	}	
	.profile-date{
		flex-direction:column;
		width:90%;
	}
	.profile-share-box{
		flex-direction: row;
	}	
	.profile-title {
		flex-direction: column-reverse;
	}
	.song_douga_rireki{
		flex-direction: column;		
	}
  .cgi-chart-box{
    /* display:none; */
    max-width: 400px;
    height:220px;
  }
  .cgi-chart-box-sp{
    display:flex;
    width:400px;
    height:320px;
  }
  /* .cgi-chart-box{
    display:none;
    width: 300px;
    height:220px;
  }
  .cgi-chart-box-sp{
    display:flex;
    width:400px;
    height:320px;
  } */
  /* .cgi-chart-box {
    display:flex;
      width: 450px;
      height: 300px;
     margin-top: 0em;
   }  */
  .cgi-chart-frame {
      position: absolute;
      top: 100px;
      left: 50px;
      width: 280px;
      height: 140px;
      border: none;
      overflow: hidden;
  }
 /* .chart-box {
    width: 300px;
    height: 140px;
}  */
  .cgi-nav-links {
    display: none;
    flex-direction: column;
    margin-top: 10px;
    background: #444;
    padding: 10px;
    border-radius: 8px;
  }

  .cgi-navbar.open .cgi-nav-links {
    display: flex;
    flex-direction: column;  
  }

  .cgi-nav-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    cursor: pointer;
  }

  /* ボタンを×に切り替え */
  .cgi-navbar.open .cgi-nav-toggle::before {
    content: "✖";
    font-size: 26px;
  }

  /* デフォルトは☰ */
  .cgi-nav-toggle::before {
    content: "☰";
  }  
}

@media (max-width: 564px) {
	.radius-percent-30-c22image{
		width:100px;
	}	
}

@media (max-width: 312px) {
	.cgi-top{
		display:none;
	}
	.cgi-button-box{
		display:none;
	}
	.thumb_music_tab{
		display:none;
	}
	.songword{
		display:none;		
	}
	.radius-percent-30-c22image{
		width:90px;
	}	
}