@charset "UTF-8"; 

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================

11px		0.6875rem
12px		0.750rem
13px		0.8125rem
14px		0.875rem
15px		0.9375rem
16px		1rem
18px		1.125rem
20px		1.25rem
21px		1.3125rem
22px		1.375rem
24px		1.5rem

 *  一般・共通設定
 ================================================*/
html {
  scroll-padding-top: 70px; /* ヘッダーの高さ */


	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}


body {
	font-size: 0.875rem;
	color: #222;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	line-height: 1.6;
	background: #fff;
}

input, button, select, textarea {
	font-family: inherit;
}


.inner {
	position:relative;
	width:980px;
	margin:0 auto;
}

header {
	box-sizing:border-box;
	position:relative;
	width:100%;
	background:#fcfcfc;
}

nav {
	width:100%;
	background:#fff;
	box-shadow:0 1px 2px #d0d8dc;
	?zoom:1;
}
nav:after {
	content:'';
	display:block;
	clear:both;
}

#contents {
	overflow:hidden;
	width:980px;
	margin:5px auto;
	background:#fff;
}

#main {
	box-sizing:border-box;
	overflow:hidden;
	float:left;
	width:100%;
	padding: 0 30px 0 30px;
}

#sub {
	box-sizing:border-box;
	overflow:hidden;
	float:left;
	width:100%;
	padding: 0 30px 0 30px;
}

footer {
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
}

a {
	color:#000;
	text-decoration:none;	
	
	/*ios*/
	touch-action: manipulation;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	
}






h3 {
	font-size:1rem;	
	font-weight:bold;
}


h4 {

	display: block;
 	width: 90%;
	margin : 0px auto 0px auto;
    text-decoration: none;
    background: #E3E8FF;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 0px #aaa;
    
	padding : 10px 10px 10px 10px;
	
    border-radius: 5px;
	font-size:1rem;	
 
}


	
h5 {

	display: block;
	margin : 0px auto 30px auto;
    text-decoration: none;
    background: #e8e8e8;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #aaa;
    border-radius: 10px;
	font-size:1rem;	
}

h5 a {
    display: block; 
    padding: 0.2em 0.3em;
}



h6 {
    display: block;
 	width: 45%;
	margin : 0px auto 10px auto;
    padding: 0.1em 0.2em;
    text-decoration: none;
    background: #fcfcfc; /* 明るく清潔感のあるグレー */
    color: #333;        /* 文字を真っ黒から少し和らげると馴染みます */
    font-weight: bold;
    border: solid 1px #aaa;
    border-radius: 8px;
    
    /* 影を弱め、かつ騒音の「響き」をわずかに表現 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08), 0 0 8px rgba(0,0,0,0.05);
}

h6 a {
    display: block; 
    padding: 0.1em 0.3em;
}











p {
	margin:0 0.5em 0 1em;
}

img {
	vertical-align:bottom;
}

em {
	font-weight:bold;
	font-style:normal;
}

strong {
	font-weight:bold;
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}

ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:none;
}
ol li {
	list-style:decimal;
}
li {
	margin-left:2em;
}



dt {
	font-size:0.9375rem;
	font-weight:bold;
	text-align:left;
	margin-bottom:0.2em;
}
dt:before {
	content:"";
}



dd {
	margin-top:5px;
	padding-left : 10px;
	padding-right : 10px;
}


input{
	text-align : right;
	border-width : 1px ;
	border-style : solid ;
	border-color : silver ;
	
	pointer-events: auto;
	
	font-size: 16px;
}

/*============================
  ボタン（button）および音量スライダー用の一括指定
   ==================================== */
   
button{
	font-family: "Hiragino Sans", "Meiryo", sans-serif;

	/*ios*/
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation !important; 
	pointer-events: auto !important;
}

input[type="range"] {
	touch-action: none !important;
	pointer-events: auto !important;
}

select {
	-webkit-appearance: none;
	appearance: none;
	/* 【iOS地雷対策】 */
	font-size: 16px !important;
	/* 【iOS地雷対策】 */
	touch-action: manipulation !important;
	/* 【iOS地雷対策】 */
	pointer-events: auto !important;
}	


/*================================================
 *  ヘッダー
 ================================================*/
header {
	padding:5px 10px 4px 10px;
}

.summary {
	position:absolute;
	top:21px;
	right:230px;
	margin:0;
	font-size:0.875rem;	
	font-weight:bold;
}

/*================================================
 *  グローバルナビゲーション
 ================================================*/
@media print, screen and (min-width:768px) {
	nav {
		background:#FCFCFC;
		box-shadow:0px 0px 0px 0px #999;
		z-index:13;
	}

	/* 共通 */
	nav ul { 
		margin:0;
		padding:0;
	}

	nav ul li {
		position:relative;
		margin:0;
		padding:0;
		list-style:none;
	}

	nav ul li a {
		display:block;
		margin:0;
		border-top:1px solid #C8C8C3;
		border-bottom:3px solid #FFD159;
		padding:6px 0 7px 0;
		background:#EDEDE6;
		color:#000000;
		font-size:0.875rem;
		font-weight:bold;
		line-height:1;
		text-decoration:none;
	}

	nav ul li:hover > a {
		color:#000000;
		background:#C0C6E8;
	}

	/* 1段目 */
	nav ul.gnav > li {
		position:relative;
		width:42%;
		float:left;
		margin:0;
		padding:0;
		text-align:center;
		list-style:none;
	}

	nav ul.gnav > li:first-child {
		width:15%;
	}

	nav ul.gnav > li.subnav a {
		padding-right:20px;
	}

	nav ul.gnav > li.subnav > a:after {
		position:absolute;
		content:"";
		top:20px;
		width:0;
		height:0;
		margin-left:10px;
		border:5px solid transparent;
		border-top-color:#fff;
	}

	/* 2段目 */
	nav ul li ul {
		position:absolute;
		z-index:13;
		top:100%;
		left:0;
		width:100%;
		margin:0;
		padding:0;
	}

	nav ul li ul li {
		overflow:hidden;
		width:150%;
		height:0;
		color:#fff;
		transition:.2s;
	}

	nav ul li ul li a {
		padding:13px 15px;
		text-align:left;
		background:#FFFFFF;
		font-weight:normal;
	}

	nav ul li:hover > ul > li {
		overflow:visible;
		height:40px;
		border-bottom:1px solid #C0C6E8;
	}

	nav ul li:hover ul li:last-child {
		border-bottom:none;
	}

	nav ul.gnav > li:last-child > ul {
		left:-50%;
	}

	nav ul li ul li ul:before {
		position:absolute;
		content:"";
		top:13px;
		left:-20px;
		width:0;
		height:0;
		border:5px solid transparent;
		border-left-color:#fff;
	}

	nav ul.gnav > li:last-child ul li ul:before {
		position:absolute;
		content:"";
		top:13px;
		left:200%;
		margin-left:-20px;
		border:5px solid transparent;
		border-right-color:#fff;
	}

	/* 3段目 */
	nav ul li ul li ul {
		top:0;
		left:100%;
	}

	nav ul li ul li ul li {
		width:100%;
	}

	nav ul li ul li:hover > ul > li {
		border-bottom:1px solid #C8C8C3;
	}

	nav ul.gnav > li:last-child > ul li ul {
		left:-100%;
	}

	nav ul li ul li ul li a {
		background:#FFFFFF;
	}

	nav ul li ul li ul li a:hover {
		background:#C0C6E8;
	}

	.gnav {
		display:block !important;
	}

	#spMenu {
		display:none;
	}

	.fixed {
		position:fixed;
		top:0;
		left:0;
	}
}

/*================================================
 *  トピックパス（パンくずリスト）
 ================================================*/
#topicpath {
	font-size:0.750rem;
	margin-bottom:20px;
	margin-left:10px;
	padding:1px;
	background:#fcfcfc;
}

/*================================================
 *  サブコンテンツ
 ================================================*/
.submenu li {
	margin:0;
	padding:0;
	list-style:none;
}
.submenu li a:before {
	content:"・";
	color:#777;
}
.submenu li a {
	display:block;
	padding:6px 0px 6px 28px;
	border-bottom:1px dotted #ddd;
	font-size:0.8125rem;	
	color:#777;	
	text-decoration:none;
}
.submenu li a:hover {
	color:#222;
	background:#eee;
}
.subfont {
	font-size :0.8125rem;
	color:#777;	
	padding-left : 30px;
	border-bottom-width : 1px;
	border-bottom-style : solid;
	border-bottom-color :#ccc;
}
.subtpl {
	font-size:0.8125rem;	
	color:#777;	
	padding-left : 30px;
	border-top-width : 1px;
	border-top-style : solid;
	border-top-color :#eee;
	border-bottom-width : 1px;
	border-bottom-style : solid;
	border-bottom-color :#ddd;
}
.bnr {
	overflow:hidden;
}
.bnr ul {
	overflow:hidden;
}
.bnr li {
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}
.bnr li a:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter:"alpha( opacity=80 )";
}
.bnr img {
	width:100%;
}

/*================================================
 *  フッター
 ================================================*/
footer {
	clear:both;
}

.footmenu {
	width:100%;
	padding:20px 0;
	overflow:hidden;
	background:#f2f2f2;
}
.footmenu ul {
	position:relative;
	float:left;
	left:50%;
	margin:0;
	padding:0;
}
.footmenu li {
	position:relative;
	left:-50%;
	float:left;
	list-style:none;
	margin:0;
	padding:0 15px;
	font-size:0.750rem;
	text-align:center;
}
.footmenu a {
	color:#333;
	text-decoration:none;
}
.footmenu_a {
	width:100%;
	margin:10px 0 0 0;
	padding:0px 0 5px 0;
	overflow:hidden;
	background:#fdfdfd;
}
.footmenu_a ul {
	position:relative;
	float:left;
	left:50%;
	margin:0;
	padding:0;
}
.footmenu_a li {
	position:relative;
	left:-50%;
	float:left;
	list-style:none;
	margin:0;
	padding:0 35px;
	font-size:0.875rem;
	text-align:center;
}
.footmenu_a a {
	color:#111;
	text-decoration:none;
}

.copyright {
	border-top:2px solid #FFD159;
	clear:both;
	padding:10px 0;
	font-size:0.6875rem;
	text-align:center;
	color:#222;
	background:#ddd;
}



/*================================================
 *  追加↓ footmenu
 ================================================*/



.footmenu_b {
	width:100%;
	margin:0px 0 0 0;
	padding:0px 0 5px 0;
	overflow:hidden;
	background:#F8F8F8;
}
.footmenu_b ul {
	position:relative;
	float:left;
	left:50%;
	margin:0;
	padding:0;
}
.footmenu_b li {
	position:relative;
	left:-50%;
	float:left;
	list-style:none;
	margin:0;
	padding:0 45px;
	font-size:0.8125rem;
	text-align:center;
}
.footmenu_b a {
	color:#111;
	text-decoration:none;
}

/*================================================
 *  追加↑ footmenu
 ================================================*/


/*=================================
 *  ページトップへの戻り
 ========================================*/
.totop {
	position: fixed;
	bottom: 15px;
	right: 15px;
	opacity: 0.6;  
	z-index: 3;  

}
.totop a {
	display: block;
	text-decoration: none;
}
.totop img {
	background: #D1D1CD;
	width: 44px;      
	height: auto;   
}

/*================================================
 *  クラス
 ================================================*/
.list {
	padding:0 0 0 0.5em;
}
.list li {
	margin:0;
	padding:0 0 0 15px;
	list-style:none;
	background:url(../images/check.png) 0 5px no-repeat;
}

.info dt {
	border-bottom:none;
}
.info dd {
	padding-bottom:1em;
	border-bottom:1px dotted #ddd;
}
.center5 {
	width:500px;
	border-bottom:4px solid #623A01;
	text-align:center;
    color: #000;
	padding :25px 0px 5px 0px;
	margin:0 auto 20px auto;
}

.center {
	text-align:center;
}
.center6 {
	padding :15px 0px 0px 0px;
	line-height:1.3;
	text-align:center;
}
.center_bb {
	font-weight:bold;
	text-align:center;
}
.center_b {
	padding : 15px 0px 15px 0px;
	text-align:center;
}
.center_h3 {
	text-align:center;
	padding:15px 30px 20px 0px;
}
.center_h3:after {
	content:"\0025a0";
	color:#444;
	margin-left:1em;
}
.center_h3:before {
	content:"\0025a0";
	color:#444;
	margin-right:1em;
}
.center_h3a {
	border-top: 2px solid #bbb;
	margin : 8px 0 5px 0px;
	padding : 25px 0px 15px 0px;
	text-align:center;
}
.center_h3a:after {
	content:"\0025a0";
	color:#444;
	margin-left:1em;
}
.center_h3a:before {
	content:"\0025a0";
	color:#444;
	margin-right:1em;
}
.center_h4 {
	padding:5px 0px 10px 0px;
	text-align:center;
	letter-spacing: 0.1em;
}
.center_h4:before {
	content:"《";
	color:#444;
	margin-right:0.2em;
}
.center_h4:after {
	content:"》";
	color:#444;
	margin-left:0.5em;
}
.center_h5 {
	padding:10px 0px 5px 0px;
	text-align:center;
}
.center_h5:before {
	content:"《";
	color:#444;
	margin-right:0.2em;
}
.center_h5:after {
	content:"》";
	color:#444;
	margin-left:0.5em;
}
.center_h6 {
	padding:20px 0px 10px 0px;
	text-align:center;
}
.center_h6:before {
	content:"《";
	color:#444;
	margin-right:0.2em;
}
.center_h6:after {
	content:"》";
	color:#444;
	margin-left:0.5em;
}

/*============================
 *  col_one_one
 =============================*/
 
.col_one_one {
	overflow:hidden;
}
.col_one_one ul {
	overflow:hidden;
	margin:0 0 0 0;
}
.col_one_one li {
	list-style:none;
	float:left;
	width:98%;
	margin:0 0% 2% 0;
}
.col_one_one li:nth-child(2n+1) {
	clear:both;
}
.col_one_one li img {
	width:400px;
	margin:0 0 2.5% 0px;
}
/*============================
 *  col_two_one
 =============================*/

 .col_two_one {
	overflow:hidden;
}

.col_two_one ul {
	overflow:hidden;
	margin:0.4% -1% 0 0;
}
.col_two_one li {
	list-style:none;
	float:right;
	width:45%;
	margin:0 0 2% 5%;
}
.col_two_one li:nth-child(2n+1) {
	clear:both;
}
.col_two_one li img {
	width:100%;
	margin-bottom:2.5%;
}
/*============================
 *  col_twl_one
 =============================*/

 .col_twl_one {
	overflow:hidden;
}

.col_twl_one ul {
	overflow:hidden;
	margin:0.4% -1% 0 0;
}
.col_twl_one li {
	list-style:none;
	float:left;
	width:45%;
	margin:0 1% 2% 3%;
}
.col_twl_one li:nth-child(2n+1) {
	clear:both;
}
.col_twl_one li img {
	width:95%;
	margin:0 0 0 0px;
}
/*============================
 *  col_three_one
 =============================*/

 .col_three_one {
	overflow:hidden;
	text-align : center;
}

.col_three_one ul {
	overflow:hidden;
    border-top: solid 0px #bbb;
    border-bottom: solid 0px #bbb;
	padding : 20px 0px 0px 8px;
	margin:0% 0% 0 0%;
}
.col_three_one li {
	list-style:none;
	float:left;
	width:30%;
	padding : 5px 0px 0px 5px;
	margin:0px 0% 0% 2%;
	
	
}
.col_three_one li:nth-child(3n+1) {
	clear:both;
}
.col_three_one li img {
	width:100%;
	margin-bottom:0%;
}
/*============================*/

.blt {
	font-weight:bold;
}

.br_t {
	border-top:1px solid #aaa;
	padding-top:10px;
	margin-top:10px;
}
.br_b {
	padding:10px 2% 10px 2% ;
	margin-bottom:10px;
}
.blue {
	color:#1858E8;
}
.caution {
	padding : 8px 7px 8px 15px;
	font-size : 0.8125rem;
	background-color : #F2EDE3;
	text-decoration : none;
}
.caution_a {
	padding : 10px 20px 10px 30px;
	font-size : 0.8125rem;
	background-color : #F2EDE3;
	margin-bottom:15px;
}
.c_1 {
	padding : 0px 3px 0px 10px;
	font-size : 23px;
	font-weight:bold;
	color:#A4D370;
}
.c_2 {
	padding : 0px 1px 0px 10px;
	font-size : 33px;
	font-weight:bold;
	color:#539BE0;
}
.c_3 {
	padding : 0px 1px 0px 10px;
	font-size : 18px;
	font-weight:bold;
	color:#FBD5DF;
}
.c_4 {
	padding : 0px 1px 0px 10px;
	font-size : 18px;
	font-weight:bold;
	color:#F8EA9E;
}

.divlink {
	padding : 6px 18px 6px 18px;
	font-size : 0.8125rem;
	background-color : #f9f9f9;
	text-decoration : none;
	text-align : center;
	float : left;
	margin-right : 3px;
	margin-left : 15px;
}
.divlink_le {
	padding : 0 10% 0 30%;
	background-color : #fff;
	float :left;
	margin-right : 0px;
	margin-left : 0px;
}
.h_two {
	padding : 3px 7px 3px 6px;
	font-size : 1rem;
	font-weight:bold;
}
.h_three {
	margin : 20px 0 0 30px;
	padding : 0 0 0 0;
	font-size : 1rem;
	font-weight:bold;
}

.h_three:before {
	content:"\0025a0";
	color:#111;
}

.h_three_a {
	margin : 0 0 0px 0px;
	padding : 10px 0 0 30px;
	font-size : 1rem;
	font-weight:bold;
}

.h_three_b {
	margin : 0 0 0 20px;
	padding : 25px 0 0 0;
	font-size : 1rem;
	font-weight:bold;
}

.h_three_b:before {
	content:"■";
	color:#111;
}
.h_three_bb {
	margin : 0 0 0 30px;
	padding : 3px 0 0 0;
	font-size : 0.9375rem;
	font-weight:bold;
}

.h_three_bb:before {
	content:"■";
	color:#111;
}
.h_four {
	margin : 5px 0 0px 0px;
	padding : 0 0 0 0;
	font-size : 1rem;
	font-weight:bold;
}

.h_four:before {
	content:"・ ";
	color:#111;
}
.h_four_a {
	margin : 20px 0 5px 0;
	padding : 20px 0 0 1.5%;
	border-top:2px solid #aaa;
	font-size : 1rem;
	font-weight:bold;
}

.h_four_a:before {
	content:"■ ";
	color:#111;
}
/*============================*/
.h_fiv {
	margin: 20px 0px 0px 0px;
	padding : 10px 15px 10px 10px;
	text-align : center;
	font-weight:bold;
	font-size : 0.875rem;
	text-decoration:underline;
	background-color : #F3F3F0;
}
.h_fiva {
	padding : 5px 15px 20px 15px;
	font-size : 0.875rem;
	background-color : #f9f9f6;
}
.pd_gsa {
	margin: 0px 0px 0px 0px;
	padding : 5px 0px 8px 0px ;
}
.pd_gsb {
	border-top:1px solid #222;
	margin: 8px 0px 0px 0px;
	padding : 10px 0px 8px 0px ;
}
.pd_gsc {
	border-top:1px solid #222;
	margin: 8px 0px 0px 0px;
	padding : 10px 0px 15px 0px ;
}
.pd_gsd {
	margin: 0px 0px 0px 0px;
	padding : 10px 0px 8px 0px ;
}
.under_oooo {
	padding : 10px 10px 10px 10px;
	font-size : 0.875rem;
	text-decoration:underline;
	background-color : #F3F3F0;
}

/*============================*/

.motlink {
	background-color : #F3F3F0;
	margin :10px 3px 0px 35px;
	padding : 5px 25px 5px 25px;
	font-size : 0.875rem;
	font-weight:bold;
	text-decoration:underline;
	text-align : center;
	float : left;
}
.footlink {
	padding : 5px 3px 3px 5px;
	margin :5px 0px 5px 0px;
	text-align : center;
	float : left;
}

.line_top {
	padding : 5px 0px 0px 0px;
	border-top:2px solid #333;
}
.line_top_a {
	padding : 8px 0px 0px 0px;
	border-top:1px solid #333;
}
.line_top_b {
	border-top:4px solid #555;
	border-bottom:1px dotted #555;
}
.line_top_b5 {
	border-top:4px solid #555;
}

.line_top_bb {
	padding : 10px 0px 0px 0px;
	border-top:4px solid #aaa;
}
.line_top_bb5 {
	margin :15px 0px 0px 0px;
	padding : 10px 0px 0px 0px;
	border-top:4px solid #aaa;
}

.m_a {
	margin : 50px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
}
.sp_a {
	padding : 5px 25px 0px 25px;
	font-weight: bold;
}
.sp_b {
	color : #ccc;
}
.p_a {
	font-size : 1rem;
	font-weight: bold;
}
.p_b {
	border-bottom: 1px solid #bbb;
	width:260px;
	margin : 2px 0 0 30px;
	padding : 10px 0px 0px 20px;
	font-size : 0.9375rem;
	font-weight: bold;
}
.p_bbb_oo {
	margin : 20px 0 20px 0;
	padding : 0px 0px 0px 5%;
}
.under_ooo {
	padding : 10px 10px 10px 10px;
	font-size : 0.875rem;
	text-decoration:underline;
	background-color : #F3F3F0;
}
.p_d {
	border-bottom: 2px solid #666;
	width:260px;
	margin : 2px 0 15px 30px;
	padding : 10px 0px 0px 20px;
	font-size : 0.9375rem;
	font-weight: bold;
}
.p_c {
	border-bottom: 1px solid #666;
	width:90px;
	margin : 5px 0 5px 30px;
	padding : 0px 0px 0px 20px;
	font-size : 0.875rem;
	font-weight: nomal;
}

.p_e {
	border-bottom: 1px solid #ddd;
	width:265px;
	margin : 0px 0 12px 30px;
	padding : 20px 0px 0px 10px;
	font-size : 0.875rem;
	font-weight: nomal;
	float : left;
}
.p_e :before {
	content:"\0025a0";
	color:#111;
}
.p_f {
	border-bottom: 1px solid #111;
	width:265px;
	margin : 2px 0 15px 30px;
	padding : 0px 0px 0px 10px;
	font-size : 0.750rem;
	font-weight: nomal;
}
.p_f :before {
	content:"\0025a0";
	color:#111;
}
.p_ff {
	padding : 3px 0px 3px 2%;
}
.p_ff :before {
	content:"・";
}
/*============================*/
.p_g {
	padding : 0px 12% 0px 3%;
	font-size : 1rem;
	font-weight: bold;
}
.p_h {
	margin-top:10px;
	padding : 10px 0px 0px 10px;
	color:#000;
	background-color : #F2EDE3;
	font-weight: bold;
}
.p_i {
	padding : 43px 0 0 10px;
	color:#000;
}
.p_j {
	border-top: 1px dotted #bbb;
	border-bottom: 1px dotted #bbb;
	margin : 8px 0 5px 0px;
	padding : 5px 0px 5px 14px;
	font-size : 0.875rem;
}
.p_k {
	border-top: 1px solid #888;
	margin : 0px 0 5px 0px;
	padding : 15px 0px 5px 14px;
}
.pd_a {
	padding : 10px 0px 0px 0px;
	text-align : center;
	font-size : 0.9375rem;
	font-weight: bold;
}
.pd_aa {
	text-align : right;
}
.pd_aaa {
	padding : 13px 0px 0px 0px;
	font-weight: bold;
	font-size : 0.875rem;
}
.pd_b {
	padding : 0px 0px 20px 30px;
}
.pd_bb {
	padding : 8px 0px 0px 0px;
}
.pd_c {
	padding : 10px 0px 5px 0px;
	color:#0E3587;	
}
.pd_cz {
	padding : 10px 0px 5px 0px;
	color:#0E3587;	
	border-bottom:2px solid #fff;
}
.pd_cc {
	padding : 15px;
}
.pd_cc5 {
	width:290px;
    border-radius: 17px;
	margin: 0px auto 0px auto;
	padding : 20px;
}
.pd_cc8 {
	padding : 20px 0px 30px 30px;
}
.pd_cca {
	padding : 0px 0px 15px 0px;
	border-bottom:2px solid #ccc;
}
.pd_ccb {
	padding : 35px 0px 5px 0px;
}
.pd_ccb_b {
	font-weight:bold;
	padding : 35px 0px 5px 0px;
}
.pd_ccb_b7 {
	width:290px;
	margin: 20px auto 0px auto;
    border-radius: 17px;
	font-weight:bold;
	padding : 20px 10px 5px 0px;
}
.pd_ccx {
	border-top:3px solid #000;
}
.pd_ccxa {
	border-top:3px solid #888;
	padding : 15px 0px 30px 0px;
}
.pd_ccbb {
	padding : 55px 0px 15px 0px;
}
.pd_d {
	padding : 12px 0px 0px 0px;
}

.pd_e {
	padding : 10px 0px 45px 0px;
	letter-spacing: 0.2em;
	color:#162EBC;
	text-align:center;
}
.pd_f {
	font-weight:bold;
	padding : 30px 0px 5px 1%;
}
.pd_g {
	padding : 8px 0px 5px 0px;
}
.pd_gg {
	padding : 5px 0px 5px 0px;
}
.pd_gr {
	padding : 25px 0px 1px 2%;
	margin-bottom:1.5em;
	font-weight:bold;
	color:#B91A05;
	border-bottom:2px solid #ccc;
}
.pd_gs {
	padding : 5px 0% 8px 2% ;
}
.pd_gt {
	padding : 0px 0% 10px 2.5% ;
}
.pd_h {
	padding : 25px 0px 5px 0px;
	font-weight:bold;
}
.pd_i {
	font-weight:bold;
	margin: 0px 0px 0.5em 0px;
	padding : 10px 0px 10px 4%;
	border-bottom:1px dotted #555;
}
.pd_ia {
	padding : 5px 0px 5px 0px;
}
.pd_iar {
	padding : 5px 0px 20px 0px;
	color:#9A1D0C;
}
.pd_iab {
	padding : 5px 0px 20px 0px;
}
.pd_ib {
	padding : 10px 0px 20px 0px;
}
.pd_ic {
	padding : 15px 0px 0px 0px;
}
.pd_id {
	font-weight:bold;
	margin: 10px 0px 0px 0px;
	padding : 20px 0px 3px 4%;
	border-top:1px dotted #555;
}
.pd_ii {
	margin: 10px 0px 0.5em 0px;
	padding : 0px 0px 10px 4%;
	border-bottom:1px dotted #555;
}

.pd_j {
	margin: 20px 0px 0px 0px;
	padding : 10px 0px 8px 0px;
	border-top:2px solid #555;
	border-bottom:1px dotted #aaa;
	text-align:center;
	font-weight:bold;
	color:#9A1D0C;
}
.pd_jj {
	margin: 10px 0px 20px 0px;
	padding : 10px 0px 8px 0px;
	border-top:2px solid #555;
	border-bottom:2px solid #555;
	text-align:center;
	font-weight:bold;
	color:#9A1D0C;
}
.pd_k {
	margin: 15px 0px 10px 0px;
	padding : 0px 0px 8px 15px;
}
.pd_kk {
	text-align : center;
	padding :0.5em 0 1em 0;
	color:#9A1D0C;
}
.pd_l {
	font-size:0.750rem;	
	padding :0 0 10px 120px;
}
.pd_m {
	padding :1em 0 1em 0;
}
.pd_mm {
	padding :1em 0 1em 0;
	font-size : 0.875rem;
}
.pd_o {
	margin: 5px 0px 0.5em 0px;
	padding : 0px 0px 10px 2%;
}
.pd_op {
	padding : 10px 10px 0px 0px;
	text-align : center;
	font-size:0.9375rem;	
}
.pos_aa {
	padding : 100px 0px 0px 0px;
}
.pos_a {
	position:relative; top:20px; left:-30px
}
.pos_bb {
	padding : 0px 0px 0px 100px;
	position:relative; top:-120px; left:30px
}
.pos_b {
	position:relative; top:0px; left:0px
}
.hid{
	visibility : hidden;
	height:50px
}
.hid_a{
	visibility : hidden;
}
.btn {
	border-width : 3px;
	border-style : outset;
}
.stg {
	font-weight:bold;
	color:#126ECC;
}
.img_p_a {
	padding : 15px 0px 5px 0px;
	font-size : 0.9375rem;
	font-weight:bold;
}
.td_a {
	vertical-align:middle
}
.td_b {
	padding:0px 0px 0px 0px;
	background:#F8F8F7;
}
.td_c {
	font-weight:bold;
	vertical-align:middle;
}
.td_d {
	margin-bottom:0.3em;
	background:#F3F3F0;
}
.under {
	text-decoration:underline;
	text-underline-offset: 3px;
}
.under_s {
	text-decoration:underline;
	text-underline-offset: 3px;
	font-weight:bold;
}




.cor_a {
	color:#5E1107;
	margin-bottom:1.5em;
}
.ri {
	border-bottom:1px dotted #aaa;
	margin-bottom:1em;
	padding:5px 0px 5px 2%;
}


.stg0 {
	font-weight:bold;
}

.stg0_o {
	text-decoration:underline;
	font-weight:bold;
}

.footlink_b {
	font-weight:bold;
	padding : 5px 3px 3px 5px;
	margin :5px 0px 5px 0px;
	text-align : center;
	float : left;
}






















.lr {
	border-right:1px solid #eee ;

}

.lrx {
	border-right:3px solid #eee ;
	padding-right : 15px ;

}

.lrr {
	border-right:0px solid #eee ;
}





.lt1 {
	border-top:1px solid ;
}
.lt1x {
	border-top:1px solid ;
}
.lt2 {
	border-top:2px solid ;
}
.lt3 {
	border-top:3px solid ;
}
.lt4 {
	border-top:4px solid ;
}
.lt4a {
	border-top:4px solid ;
}

.lt5 {
	border-top:5px solid #ccc;
}



.lb1 {
	border-bottom:1px solid ;
}


.lb1x {
	border-bottom:1px solid ;
}

.lb2 {
	border-bottom:2px solid ;
}
.lb3 {
	border-bottom:3px solid ;
}
.lb4 {
	border-bottom:4px solid ;
}

.lt1d {
	border-top:1px dotted ;
}
.lt2d {
	border-top:2px dotted ;
}
.lt3d {
	border-top:3px dotted ;
}
.lt4d {
	border-top:4px dotted ;
}
.lb1d {
	border-bottom:1px dotted ;
}
.lb2d {
	border-bottom:2px dotted ;
}
.lb3d {
	border-bottom:3px dotted ;
}
.lb4d {
	border-bottom:4px dotted ;
}


.lt1a {
	border-top:1px solid ;
	padding : 20px 0px 0px 0px;
}
.lt1a8 {
	border-bottom:1px solid ;
}
.lt1a1 {
	border-top:1px solid ;
	margin: 20px 0px 0px  0px;
	padding : 20px 0px 0px 0px;
}
.lt1b {
	border-top:1px solid ;
	background:#EAF3FE;
	padding : 5px 0px 5px 0px;
}
.lt1bz {
	border-top:1px solid ;
	background:#FBF8EA;
	padding : 5px 0px 5px 0px;
}
.lt1bza {
	border-top:1px solid ;
	background:#EAF3FE;
	padding : 5px 0px 5px 0px;
}
.lt1bza5 {
	border-top:1px solid #555;
	background:#EADDFB;
	padding : 5px 0px 5px 0px;
}
.lt1d {
	border-top:1px dotted #555;
}
.lt1z {
	margin : 20px 0px 20px 0px;
	text-align:center;
	font-size : 0.9375rem;
	border-bottom:2px solid #9F260A;
	border-top:2px solid #9F260A;
}
.lt1zt {
	margin : 30px 0px 5px 0px;
	text-align:center;
	font-size : 0.9375rem;
	border-top:2px solid #9F260A;
}
.lt1zt2 {
	margin : 0px 0px 0px 0px;
	font-size : 0.875rem;
	border-top:2px solid #9F260A;
}
.lt2d {
	border-top:3px dotted ;
}
.lb1d {
	border-bottom:1px dotted ;
}
.lb1da {
	border-bottom:0px dotted ;
}


 
/*============================
          ボーダーカラー↓
 =============================*/
 
 .bc3 {
	border-color:#333;
}
 .bc5 {
	border-color:#555;
}
 .bc8 {
	border-color:#888;
}

 .bca {
	border-color:#aaa;
}
  
 .bcb {
	border-color:#623A01;
}
 
 .bcc {
	border-color:#043C91;
}
 
 .bcd {
	border-color:#1A5C03;
}
 
 .bce {
	border-color:#720A02;
}
 
 .bcf {
	border-color:#70074F;
}
 
 .bcg {
	border-color:#51076F;
}
 
 
 .bch {
	border-color:#244B97;
}
 .bci {
	border-color:#993300;
}
 
 /*=======================================
      ↑ボーダーカラー
 ========================================*/




















/*============================
          バディング↓
 =============================*/
.pt3 {
	padding-top : 3px;
}
.pt5 {
	padding-top : 5px;
}
.pt10 {
	padding-top : 10px;
}
.pt10x {
	padding-top : 0px;
}
.pt15 {
	padding-top : 15px;
}
.pt15a {
	padding-top : 15px;
}
.pt20 {
	padding-top : 20px;
}
.pt25 {
	padding-top : 25px;
}
.pt30 {
	padding-top : 30px;
}

.pt30a {
	padding-top : 30px;
}

.pt40 {
	padding-top : 40px;
}
.pt40a {
	padding-top : 40px;
}
.pt40b {
	padding-top : 40px;
}

.pt45 {
	padding-top : 45px;
}

.pt45a {
	padding-top : 45px;
}

.pt50 {
	padding-top : 50px;
}
.pt60 {
	padding-top : 60px;
}
.pt70 {
	padding-top : 70px;
}
.pt50a {
	padding-top : 110px;
}
.pt50b {
	padding-top : 50px;
}
.pt_xa {
	padding-top : 120px;
}

.pb3 {
	padding-bottom : 3px;
}
.pb5 {
	padding-bottom : 5px;
}
.pb10 {
	padding-bottom : 10px;
}
.pb15 {
	padding-bottom : 15px;
}
.pb20 {
	padding-bottom : 20px;
}

.pb30 {
	padding-bottom : 30px;
}
.pb40 {
	padding-bottom : 40px;
}
.pb50 {
	padding-bottom : 50px;
}


.pr5 {
	padding-right : 5px;
}
.pr10 {
	padding-right : 10px;
}
.pr15 {
	padding-right : 15px;
}
.pr20 {
	padding-right : 20px;
}
.pr30 {
	padding-right : 30px;
}

.pr30a {
	padding-right : 0px;
}
.pr30aa {
	padding-right : 0px;
	margin-right : 0px;
}


.pl5 {
	padding-left : 5px;
}
.pl10 {
	padding-left : 10px;
}
.pl10a {
	padding-left : 10px;
}
.pl10b {
	padding-left : 10px;
}
.pl15 {
	padding-left : 15px;
}
.pl15a {
	padding-left : 15px;
}
.pl20 {
	padding-left : 20px;
}
.pl25 {
	padding-left : 25px;
}
.pl25a {
	padding-left : 0px;
}
.pl30 {
	padding-left : 30px;
}
.pl35 {
	padding-left : 35px;
}
.pl35a {
	padding-left : 35px;
}
.pl45 {
	padding-left : 45px;
}
.pl45a {
	padding-left : 45px;
}
.pl55 {
	padding-left : 55px;
}
.pl65 {
	padding-left : 65px;
}
.pl75 {
	padding-left : 45px;
}
.pl75a {
	padding-left : 45px;
}
.pl85 {
	padding-left : 85px;
}
.pl95 {
	padding-left : 95px;
}
.pl105 {
	padding-left : 105px;
}
.pl115 {
	padding-left : 115px;
}
.pl125 {
	padding-left : 125px;
}
.pl135 {
	padding-left : 135px;
}

.pl145 {
	padding-left : 145px;
}

.pl155 {
	padding-left : 37%;
}

.plssa {
	padding-left : 160px;
}
.plss {
	padding-left : 150px;
}

/*============================
          バディング↑
 =============================*/
.blt {
	font-weight:bold;
}

/*============================
          マージン↓
 =============================*/

.mt5 {
	margin-top : 5px;
}
.mt10 {
	margin-top : 10px;
}
.mt15 {
	margin-top : 15px;
}
.mt20 {
	margin-top : 20px;
}
.mt25 {
	margin-top : 25px;
}
.mt30 {
	margin-top : 30px;
}
.mt35 {
	margin-top : 35px;
}
.mt40 {
	margin-top : 40px;
}
.mt45 {
	margin-top : 45px;
}
.mt50 {
	margin-top : 50px;
}
.mt55 {
	margin-top : 55px;
}
.mt60 {
	margin-top : 60px;
}

.mt15a {
	margin-top : 15px;
}
.mt20a {
	margin-top : 20px;
}
.mt25a {
	margin-top : 25px;
}
.mt30a {
	margin-top : 30px;
}
.mt35a {
	margin-top : 35px;
}
.mt40a {
	margin-top : 40px;
}
.mt45a {
	margin-top : 45px;
}
.mt50a {
	margin-top : 50px;
}
.mt55a {
	margin-top : 55px;
}
.mt60a {
	margin-top : 60px;
}

.mt80a {
	margin-top : 10px;
}


.mt0 {
	margin-top : 0px;
}

.mb0 {
	margin-bottom : 0px;
}
.mb5 {
	margin-bottom : 5px;
}
.mb10 {
	margin-bottom : 10px;
}
.mb15 {
	margin-bottom : 15px;
}
.mb20 {
	margin-bottom : 20px;
}

.mb25 {
	margin-bottom : 25px;
}
.mb30 {
	margin-bottom : 30px;
}
.mb40 {
	margin-bottom : 40px;
}
.mb50 {
	margin-bottom : 50px;
}


.mr5 {
	margin-right : 5px;
}
.mr10 {
	margin-right : 10px;
}
.mr15 {
	margin-right : 15px;
}
.mr20 {
	margin-right : 20px;
}


.ml5 {
	margin-left : 5px;
}
.ml10 {
	margin-left : 10px;
}
.ml15 {
	margin-left : 15px;
}
.ml20 {
	margin-left : 20px;
}



.w350{
	width : 350px;
}
.w400{
	width : 100px;
	margin : 0px auto 20px auto;


}
.w450{
	width : 450px;
}
.w500{
	width : 500px;
}
.w550{
	width : 550px;
}
.w600{
	width : 600px;
}
.w650{
	width : 650px;
}
.w700{
	width : 700px;
}
.w750{
	width : 750px;
}
.w800{
	width : 800px;
}
.w850{
	width : 850px;
}
.ma {
	margin-left:auto;
	margin-right:auto;
}

/*============================
          マージン↑
 =============================*/
/*============================
          フォント↓
 =============================*/
.f9 {
	font-size : 0.6875rem;
}
.f10 {
	font-size : 0.6875rem;
}
.f11 {
	font-size : 0.7875rem;
	line-height:1.3;
}
.f12 {
	font-size : 0.8rem;
	line-height:1.3;
}
.f13 {
	font-size : 0.875rem;
	line-height:1.4;
}
.f13x {
	font-size : 0.875rem;
	line-height:1.3;
}
.f14 {
	font-size : 0.875rem;
	line-height:1.5;
}
.f15 {
	font-size : 0.9375rem;
	line-height:1.5;
}
.f15a {
	font-size : 0.9375rem;
	line-height:1.5;
	padding-left : 7%;
	padding-top : 3%;

}

.f15d {
	font-size : 0.8125rem;
	font-weight:bold;
	line-height:1.2;
}
.f16 {
	font-size : 1rem;
	line-height:1.6;
}
.f17 {
	font-size : 17px;
	line-height:1.6;
}
.f18 {
	font-size : 18px;
	line-height:1.6;
}
.f19 {
	font-size : 19px;
	line-height:1.6;
}
.f20 {
	font-size : 20px;
	line-height:1.6;
}
.f25 {
	font-size : 25px;
	line-height:1.6;
}
.f30 {
	font-size : 30px;
	line-height:1.6;
}
.f40 {
	font-size : 40px;
	line-height:1.6;
}

.f11b {
	font-weight:bold;
	font-size : 0.6875rem;
	line-height:1.3;
}
.f12b {
	font-weight:bold;
	font-size : 0.750rem;
	line-height:1.3;
}
.f13b {
	font-weight:bold;
	font-size : 0.8125rem;
	line-height:1.4;
}
.f14b {
	font-weight:bold;
	font-size : 0.875rem;
	line-height:1.6;
}
.f15b {
	font-weight:bold;
	font-size : 0.9375rem;
	line-height:1.6;
}
.f16b {
	font-weight:bold;
	font-size : 1rem;
	line-height:1.6;
}
.f18b {
	font-weight:bold;
	font-size : 18px;
}
.f20b {
	font-weight:bold;
	font-size : 20px;
}
.f32b {
	font-weight:bold;
	color:#ccc;
	font-size : 32px;
}


/*============================
          フォント↑
 =============================*/


/*============================
      テキストアライン
 =============================*/

.tac {
	text-align:center;
}
.tacx {
	text-align:center;
}
.tar {
	text-align:right;
}
.tal {
	text-align:left;
}
.tarx {
	text-align:right;
}
.talx {
	text-align:left;
	padding-left : 50px;

}
.bg3 {
	background:#FDF9F2;
}

.bg6a {
	background:#EDEFFD;
}
.bg7a {
	background:#EBF7E4;
}


.bg7 {
	background:#E5ECF7;
}
.bg60 {
	background:#F3F2EF;
}

.bg4 {
	background:#EEEBF1;
}

.bg8a {
	background:#D2E7D5;
}

/*============================
      カラー
 =============================*/


.bgw {
	background:#FFF;
}




.cor {
	color:#993300;
}

.cor2 {
	color:#7a2800;
}



.und {
	text-decoration:underline;
	text-underline-offset: 4px;

}

.unb {
	font-weight:bold;
	text-underline-offset: 3px;
	text-decoration:underline;
}

.aut {
	margin : 10px auto 10px auto;
}

.pal1 {
	padding : 15px 15px;
}
.pal2 {
	padding : 5px 10px;
}

.hogo {
	line-height:1.8;
	font-weight:bold;
	padding : 15px 35px;
}



/*=======================================
      テキストアライン↑@@@@@@@@@@@@@@@
 ========================================*/




.bor{
    border-radius: 12px;

}


.square_btnz{
    display: inline-block;
	margin : 10px 5px 10px 15px;
    padding: 0.5em 0.8em;
	font-size:0.875rem;
    text-decoration: none;
    background: #FFF;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #623A01;
}


.square_btny{
    display: inline-block;
	margin : 10px 5px 10px 15px;
    padding: 0.5em 0.8em;
	font-size:0.875rem;
    text-decoration: none;
    background: #623A01;/*ボタン色*/
    color: #fff;
	font-weight:bold;
    border: solid 1px #222;
}






/*=======================================
      @@@@@@@@@@@@@@@
 ========================================*/


.square_btn{
    display: inline-block;
	margin : 10px 0 10px 25px;
    padding: 0.2em 0.5em;
    text-decoration: none;
    background: #FFF;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #bbb;
    border-radius: 17px;
}
.square_btnx{
    display: inline-block;
	margin : 10px 5px 10px 5px;
    padding: 0.2em 1em;
    text-decoration: none;
    background: #FFF;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #bbb;
    border-radius: 17px;
}

/*=======================================
      //////@@@@@@@@@@@@@@@
 ========================================*/


.under_s{
    display: inline-block;
    padding: 0.8em 1em;
    text-decoration: none;
    background: #FAF0E1;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border-top: solid 1px #993300;
    border-left: solid 1px #993300;
    border-right: solid 1px #7E3510;
    border-bottom: solid 2px #7E3510;
    border-radius: 3px;
}

.lin5 {
	border-top:4px solid #623A01;
    margin: 10px 0 0 0;
    padding: 20px 0 0 0;
}

.lin5b {
	border-bottom:4px solid #623A01;
    margin: 0px 0 20px 0;
    padding: 10px 0 20px 20px;
}



.div5 {
	width : 720px;
    margin: 10px auto 0 auto;
    padding: 20px;
	border-top:4px solid #623A01;
	border-bottom:4px solid #623A01;
}


.lha {
	line-height:1.8;
}


.divxx{
	width:70% ;
	border-top:solid 2px #111;
	border-bottom:solid 0px #888;
	line-height:2.7;
	margin:35px auto 5px auto;
	padding:5px 10% 20px 16% ;
}

.divxx p{
  display:inline;
}

.lint {
    text-decoration: underline;
	text-underline-offset: 3px;
	font-size:0.875rem;
	color:#777 !important;
}





.gyou{
    display: inline-block;
	padding : 9px 0px 0px 0px;
}
.gyou1{
    display: inline-block;
	padding : 5px 0px 0px 0px;
}


.px {
	margin:20px 15px 5px 0 !important;
}
.pxx {
	margin:0px 15px 0 0 !important;
}



.bdx{
    border: solid 2px #88A8E4;
    border-radius: 17px;

}
.bdxx{
    border: solid 2px #DAC18D;
    border-radius: 17px;

}
.bddt{
    border-radius: 17px;

}



.pic01{
	width:400px !important;
}

.pic01a{
	width:45% !important;
	opacity: 1; 
    height: auto;
}

.pic01aa{
	width:80px !important;
    height: auto;
}

.pic01b{
	width:10% !important;
	aspect-ratio: 500/697;
    height: auto;
}

.pic01bb{
	width:83% !important;
	aspect-ratio: 640/241;
    height: auto;
    border-radius: 17px;
}


.pic01bbb{
	width:80% !important;
	aspect-ratio: 397/153;
    height: auto;
    border-radius: 17px;
}

.pic02{
	width:275px !important;
}

.pic02a{
	width:350px !important;
	margin-right:10%;
    height: auto;
}

.pic02aa{
	width:490px !important;
 	margin-right:5%;
   height: auto;
}

.pic02b{
	width:200px !important;
	margin-right:10%;
    height: auto;
}

.pic02bb{
	width:90px !important;
	margin-right:10%;
    height: auto;
}

.pic02c{
	width:90% !important;
    height: auto;
}

.pic03{
	width:300px !important;
}


.bdr{
    border-radius: 7px;
}


.pic02d{
	width:75% !important;
    height: auto;
}


.bbr{
	font-style:normal;

}
.brr{
	font-style:normal;

}
.bbb{
	font-style:normal;
}


.bbr br{
  display:none;

}
.brr br{
  display:inline;

}
.bbb br{
  display:inline;

}

.fa1{
  display:inline;
}

.square_btn5{
    display: inline-block;
	margin : 5px 0px 0px 0px;
    padding: 3px 10px 2px 10px;
    text-decoration: none !important;
    background: #FEFEFA;/*ボタン色*/
    color: #000;
    border: solid 1px #CBB6AD;
    border-radius: 14px;
}

.square_btn6{
    display: inline-block;
	margin : 0px 0px 0px 0px;
    padding: 3px 15px 3px 15px;
    text-decoration: none !important;
    background: #f7f7f7;/*ボタン色*/
    color: #000;
    border: solid 1px #555;
    border-radius: 16px;
}
.square_btn5t{
    display: inline-block;
    padding: 3px 10px 2px 10px;
	margin : 0px 0px 0px 0px;
    text-decoration: none !important;
    background: #fcf7ff;/*ボタン色*/
    color: #000;
    border: solid 1px #a07cb2;
    border-radius: 14px;
}
.square_btn5tt{
    display: inline-block;
    padding: 3px 10px 2px 10px;
	margin : 0px 0px 0px 0px;
    text-decoration: none !important;
    background: #f2f2f2;/*ボタン色*/
    color: #000;
    border: solid 2px #777;
    border-radius: 14px;
}
.square_btn5ttt{
    display: inline-block;
    padding: 3px 10px 2px 10px;
	margin : 0px 0px 0px 0px;
    text-decoration: none !important;
    background: #efefef;/*ボタン色*/
    color: #000;
    border: solid 2px #777;
    border-radius: 14px;
}

.square_btn5j{
    display: inline-block;
	margin : 10px 0px 0px 0px;
    padding: 3px 10px 2px 10px;
    text-decoration: none !important;
    background: #f7f7f7;/*ボタン色*/
    color: #000;
    border: solid 2px #777;
    border-radius: 14px;
}

.square_btn5s{
    display: inline-block;
	margin : 5px 0px 10px 0px;
    padding: 3px 15px 2px 15px;
    text-decoration: none !important;
    background: #fff;/*ボタン色*/
    color: #000;
    border: solid 1px #999;
    border-radius: 14px;
}

.square_btn5a{
    display: inline-block;
	margin : 10px 12px 10px 0px;
    padding: 0.1em 0.4em;
    text-decoration: none !important;
    background: #FEFEFA;/*ボタン色*/
    color: #000;
    border: solid 1px #ccc;
    border-radius: 17px;
}

.square_btn5b{
    display: inline-block;
	margin : 0px 12px 0px 0px;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;
    padding: 0.1em 0.4em;
    text-decoration: none !important;
    background: #E8F1FE;/*ボタン色*/
    color: #000;
    border: solid 1px #ccc;
    border-radius: 17px;
}

.square_btn5c{
    display: inline-block;
	margin : 0px 12px 0px 0px;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;
    padding: 0.1em 0.4em;
    text-decoration: none !important;
    background: #E8F1FE;/*ボタン色*/
    color: #000;
    border: solid 1px #ccc;
    border-radius: 17px;
}


.square_btn7{
    display: inline-block;
	margin : 0px 0 0px 0px;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #FFF;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #bbb;
    border-radius: 12px;
}

.lb4a {
	border-bottom:5px solid #eee;
}


.square_btn9{
    display: inline-block;
	margin : 10px 0 10px 18px;
    padding: 0.4em 0.4em;
    text-decoration: none;
    background: #fff;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #bbb;
    border-radius: 10px;
}

.square_btn10{
	display: block;
 	width: 800px;
	margin : 10px auto 10px auto;
    padding: 0.4em 0.4em;
    text-decoration: none;
    background: #E3E8FF;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #bbb;
    border-radius: 10px;
}

.square_btn10a{
	display: block;
 	width: 90%;
	margin : 0px auto 10px auto;
    padding: 0.8em 0.4em;
    text-decoration: none;
    background: #eee;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 0px #bbb;
    border-radius: 10px;
}




.square_btn11 {
    display: inline-block;
    margin : 10px 0 10px 18px;
    padding: 0.2em 2.8em;
    text-decoration: none;
    background: #fcfcfc; /* 明るく清潔感のあるグレー */
    color: #333;        /* 文字を真っ黒から少し和らげると馴染みます */
    font-weight: bold;
    border-top: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    border-right: solid 0px #aaa;
    border-left: solid 0px #aaa;
    border-radius: 0px;
    
    /* 影を弱め、かつ騒音の「響き」をわずかに表現 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08), 0 0 8px rgba(0,0,0,0.05);
}


.lt1xx {
	border-top:0px solid ;
}

.lt5a {
	border-top:5px solid #ccc;
}

.lb5a {
	border-bottom:5px solid #ccc;
}





.lha1 {
	line-height:1.0;
}

.lha2 {
	line-height:1.0;
}

.lha3 {
	line-height:1.4;
}

.dn {
  display:none;
}

.wi1 {width: 35%;	
}
.wi2 {width: 11%;	
}
.wi3 {width: 11%;	
}
.wi4 {width: 43%;	
}

.i01 {
  width: 80%;
  aspect-ratio: 400/157;
  object-fit: cover;
}


dfn {
	font-weight:bold;
	font-size:0.9375rem;
	font-style:  normal;
}


table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #fff;
	background:#fff;
}
th {
	padding:5px 0px 5px 0px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #fff;
	background:#F0F0F0;
	letter-spacing:1px;
	
}
td {
	padding:0px 0px 0px 0px;
	text-align:center;
	line-height:1.1;
	border:1px solid #fff;
  border-bottom: 2px solid #222;

}

.bor {
  border-radius: 5% / 20%;

}








audio {
width: 95%;
height:30px;
margin-bottom : 20px;

}


audio::-webkit-media-controls-enclosure {
    background-color: #;
}


audio::-webkit-media-controls-mute-button {
  background-color: #B5A171;
  border-radius: 0%;
}
audio::-webkit-media-controls-time-remaining-display {
  color: #000;
}

audio::-webkit-media-controls-play-button {
        transform: scale(1.2, 1.2);
    }


.au {
width: 50%;
height:20px;
}


.wac{
    color: #2252C9;
}

.mpc{
    color: #896402;
}


.o_b {
 	color:#000;
	margin : 10px 30px 0px 0px;
	width : 18px;
	height :18px;
}

.o_b1 {
	width : 20px;
	height : 20px;
}






.pl135a {
	padding-left : 35px;
}





.bga { 

 background-image:url("../mask/img/bga.jpg");
 background-repeat:no-repeat;
background-size: 100% 65%; 
 background-position:center;

 }

.bgb { 

 background-image:url("../mask/img/bgb.jpg");
 background-repeat:no-repeat;
background-size: 100% 65%; 
 background-position:center;

 }

.bgw { 

 background-image:url("../mask/img/bgw.jpg");
 background-repeat:no-repeat;
background-size: 100% 65%; 
 background-position:center;

 }

.bg8 { 

 background-image:url("../mask/img/bg8.jpg");
 background-repeat:no-repeat;
 background-size: 90% 65%; 
 background-position:center;

 }
 
.bg35 { 

 background-image:url("../mask/img/bg35.jpg");
 background-repeat:no-repeat;
 background-size: 90% 65%; 
 background-position:center;

 }

.bg6 { 

 background-image:url("../mask/img/bg6.jpg");
 background-repeat:no-repeat;
 background-size: 90% 65%; 
 background-position:center;

 }

.bg2 { 

 background-image:url("../mask/img/bg2.jpg");
 background-repeat:no-repeat;
 background-size: 90% 65%; 
 background-position:center;

 }

.bg5 { 

 background-image:url("../mask/img/bg5.jpg");
 background-repeat:no-repeat;
 background-size: 90% 65%; 
 background-position:center;

 }

.bg1 { 

 background-image:url("../mask/img/bg1.jpg");
 background-repeat:no-repeat;
 background-size: 90% 65%; 
 background-position:center;

 }



.bg10 {
	background:#F4FAF3;
 }
.bg20 {
	background:#EEF5FD;
 }
 
 
 
 
 
  
.bg29 {

 background: linear-gradient(135deg, #e3e8ff 0%, #dbe0f4 100%);
 
 
 border-radius: 12px;

  
  
  border: 1px solid #A04000;              /* 酸化した鉄や鋳造物を思わせる、最も深いダークブラウンの細い外枠 */
  border-top: 2px solid #F39C12;         /* 上部だけに鈍いハイライトを入れ、金属プレートの立体感を演出 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.02); 
                       
  font-weight: 900;                       /* 最も太いフォントウエイトで文字自体の質量感を表現 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字の後ろにも影を落とし、文字自体が刻印されたような堅牢さを強調 */
  letter-spacing: 0.03em;
  margin: 30px auto 0 auto;
  width: 280px;
  box-sizing: border-box;
  
  
  
}


 

 
 
 
 
 
 
.bg30 {

 background: linear-gradient(135deg, #efefef 0%, #ececec 100%);

    color: #000;
 
 
 border-radius: 12px;

  
  
  border: 1px solid #A04000;              /* 酸化した鉄や鋳造物を思わせる、最も深いダークブラウンの細い外枠 */
  border-top: 1px solid #F39C12;         /* 上部だけに鈍いハイライトを入れ、金属プレートの立体感を演出 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.02); 
                       
  font-weight: 900;                       /* 最も太いフォントウエイトで文字自体の質量感を表現 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字の後ろにも影を落とし、文字自体が刻印されたような堅牢さを強調 */
  letter-spacing: 0.03em;
  margin: 30px auto 0 auto;
  width: 280px;
  box-sizing: border-box;
  
  
  
}




 .bg50 {
	background:#717070;
    color: #fff;
    
     }

 .bg000 {
	background:#fff;
    color: #333;
    
     }




.bxa {
	color: #000;
	background:#FAECC1;
	border:0px solid #eee ;
	letter-spacing: 2px; 
}
.bxb {
	color: #000;
	background:#fff;
	border:0px solid #eee ;
	letter-spacing: 2px; 
}

.bx80 {
	color: #FAD0CA;

}

.vh {
visibility:hidden;
}

.vhh {
visibility:hidden;
	height:0px;
}



.box2 {
	height:0px;
	position:relative; top:-148px;  right:10px;
	z-index: 12;

}

.box3 {
	padding:0 8% 3px 3%;
    width :300%;
	z-index: 12;

}


.lh11 {
	line-height:1.1;

}



.pic_a{
	width:80px !important;
	margin : 0px 0px 0px 7px;
	aspect-ratio:200/105;
    height: auto;
}

.pic_b{
	width:20px !important;
	aspect-ratio: 100/103;
    height: auto;
	margin-bottom:3px;
}

.pic_c{
	width:20px !important;
	aspect-ratio: 100/103;
    height: auto;
	margin : 10px 10px 10px 10px;
}

.pic_d{
	width:23px !important;
	aspect-ratio: 23/17;
    height: auto;
	margin-bottom:6px;
}





.pic_e{
	width:20px !important;
	aspect-ratio: 1/1;
    height: auto;
	margin-bottom:2px;
}

.pic_f{
	width:12px !important;
	aspect-ratio: 1/1;
    height: auto;
	margin-bottom:0.4rem;
}


.pic_g{
	width:20px !important;
	aspect-ratio: 1/1;
    height: auto;
	margin-bottom:4px;
}




  .flex-container {
	display: flex;     
    flex-direction: row;  /* 横に並べる */
	justify-content: center; 
 	gap: 6%;              /* アイテム間のスキマ */

  }


.pic_h{
	width:380px ;
    height: auto;
}

.pic_i{
	width:200px ;
    height: auto;
}

/*===================================*/

input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* 常時表示するクリアボタンのデザイン */
.btn-search-clear {
	margin : 10px 0px 5px 0px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-color: #868e96; /* リセットボタンと同じ色 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap; /* 改行防止 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.2s;
}

.btn-search-clear:active {
  background-color: #495057;
  transform: translateY(1px);
}



.search {
  border-radius: 5px;
  border: solid 3px #bbb;
  font-size : 0.9375rem;
  height:36px;
  padding: 10px;
}

.search-list__filter-types {
  margin-top: 10px;
  margin-left: 8%;
  display: flex;
      border-left: 0px solid #ccc;

}

.search-list__filter-type + .search-list__filter-type {
  margin-left: 2%;
  padding-left: 4%;
   border-left: 2px solid #ccc;

}

.search-list__filter-name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height:1.2;

}

.search-list__filter-data:first-of-type {
  padding-top: 10px;
}
.search-list__filter-data + .search-list__filter-data {
  padding-top: 10px;
}

.search-list__table {
  margin: 5px auto 5px auto ;
  width: 95%;
  table-layout: fixed;
}
.search-list__table th, .search-list__table td {
  padding: 10px 15px 2px 5px;
  text-align: center;
  vertical-align:middle

}
.search-list__table th {
  font-weight: 600;
  font-size: 0.875rem;
}
.search-list__table th.sort {
  cursor: pointer;
}
.search-list__table th.sort.desc::after {
  content: "▼";
  margin-left: 10px;
  font-size: 1rem;
}
.search-list__table th.sort.asc::after {
  content: "▲";
  margin-left: 10px;
  font-size: 1rem;
}

.search-list__pagination {
  margin-top: 30px;
  text-align: center;
}

.search-list__pagination-items {
  display: inline-flex;
  list-style: none;
}
.search-list__pagination-items li {
  border: 1px solid #ccc;
}
.search-list__pagination-items li a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #000;
  transition: all 0.3s ease 0s;
}
@media (any-hover: hover) {
  .search-list__pagination-items li a:hover {
    background-color: #000;
    color: #fff;
  }
}
.search-list__pagination-items li.active a {
  background-color: #000;
  color: #fff;
}
.search-list__pagination-items li + li {
  margin-left: 20px;
}


.lh11 {
	line-height:1.1;
}
.lh12 {
	line-height:1.2;
}
.lh13 {
	line-height:1.3;
}
.lh14 {
	line-height:1.4;
}
.lh15 {
	line-height:1.5;
}
.lh16 {
	line-height:1.6;
}
.lh17 {
	line-height:1.7;
}
.lh18 {
	line-height:1.8;
}
.lh19 {
	line-height:1.9;
}
.lh20 {
	line-height:2.0;
}
.lh21 {
	line-height:2.1;
}

.lh25 {
	line-height:2.5;
}













.w10 {
	width:75%;
	padding-left : 5%;
	padding-right : 5%;
	margin: 10px auto 0px auto;
	overflow-wrap: break-word;
}


.w11 {
	width:50%;
	margin: 0px auto 0px auto;
	padding-left : 13%;
	overflow-wrap: break-word;
}


.w12 {
	width:85%;
	margin: 0px auto 0px auto;
	overflow-wrap: break-word;
}


.w13 {
	width:75%;
	margin: 0px auto 0px auto;
	overflow-wrap: break-word;
}
.w14 {
	width:85%;
	padding-left : 5%;
	padding-right : 5%;
	margin: 10px auto 0px auto;
	overflow-wrap: break-word;
}


.w15 {
	width:70%;
	margin: 0px auto 10px auto;
	overflow-wrap: break-word;
}

.w16 {
	width:80%;
	margin: 0px auto 20px auto;
	overflow-wrap: break-word;
}

.w17 {
	width:70%;
	margin: 0px auto 0px auto;
	overflow-wrap: break-word;
}

.w18 {
	width:70%;
	margin: 0px auto 0px auto;
	overflow-wrap: break-word;
}

.w19 {
	width:70%;
	margin: 0px auto 0px auto;
	padding : 2% 5% 2% 25%;
	overflow-wrap: break-word;
}


.box1 {
	font-size : 0.9rem;
	margin : 0px 0px 0px 0px;
	padding :3px;
	position:relative; top:85px;  right:160px; 
	z-index: 12;
	opacity: 1.0;
}



.dna{
  display:none;
}

.dan{
  display:inline;
}

.dn1{
  display:block;
}

.dn2{
  display:none;
}

.cor {
	color:#993300;
}


.ka1 {
	color:#244B97;
}
.ka1a {
	color:#113886;
}


.ka2 {
	color:#9b6d00;
}

.ka2a {
	color:#056B04;
}

.ka2b {
	color:#333;
}


.ka3 {
	color:#054EBF;
}




td:has(input[type="checkbox"]:checked) {
    background-color: #f9f9ed;
}

/* 2つ以上チェックが入っている時の色（オレンジ） */
/* 「チェックされたもの」の次に「別のチェックされたもの」が続く構造を探す */
td:has(input[type="checkbox"]:checked ~ input[type="checkbox"]:checked) {
    background-color: #adc6f7;
}




.pl_x {
	padding-left : 13%;
}




.gr1 {
background: 
linear-gradient(to top,  #f4f4f4, white);

}







.lint1 {
    text-decoration: underline;
	text-underline-offset: 3px;
	font-size:14px;
	color:#3d82c6 !important;
}

.lint2 {
    text-decoration: underline;
	text-underline-offset: 3px;
	font-size:14px;
	color:#824900 !important;
}

.lint3 {
    text-decoration: underline;
	text-underline-offset: 3px;
	font-size:14px;
	color:#493dbf !important;
}

.lint4 {
    text-decoration: non;
	font-weight:bold;
    padding: 0.4em 1em;
    border-radius: 10px;
    background: #f2e8f2;/*ボタン色*/
	font-size:14px;
}



 .fixed-stop-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9999;
    padding: 0px 7px 2px 7px;
    background-color: #ccc;
    color: #222;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
    opacity: 0.38;
  }


 .fixed-stop-btn_a {
    position: fixed;
    bottom: 130px;
    right: 19px;
    z-index: 9999;
    padding: 0px 4px 1px 4px;
    background-color: #ccc;
    color: #222;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 17px;
    opacity: 0.25;
  }


 .fixed-stop-btn_b {
    position: fixed;
    bottom: 80px;
    right: 18px;
    z-index: 9999;
    padding: 0px 7px 2px 7px;
    background-color: #ccc;
    color: #222;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
    opacity: 0.28;
  }







.overlay {
  display: none; /* 最初は隠しておく */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 100;
}

/* 小窓本体 */
.modal-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  width: 750px;
  border-radius: 8px;
  border: solid 6px #bbb;
  text-align: left;
}

/* 下部のボタンエリア */
.close-area {
  margin-top: 10px;
  border-top: 1px solid #eee;
  text-align: center;
  padding-top: 10px;
}

.closeBtn {
  background: #fff;
  border: 1px solid #aaa;
  padding: 5px 15px;
  font-size:25px;
  cursor: pointer;
  border-radius: 15px;
}



.openBtn {
  background: transparent !important; /* 背景を完全に透明にする */
  background-color: transparent !important;
  border: none; /* 枠線も完全に消す */
  padding: 15px 15px;
  cursor: pointer;
  border-radius: 0px;
  outline: none; /* タップした時の青い枠線防止 */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* iPhone用：タップ時の色を透明に */
}



.btn-reset {
	margin : 10px 0px 10px 0px;
  padding: 3px 18px;
  font-size: 14px;
  font-weight: bold;
  color: #777; /* 文字をグレーに */
  background-color: #ffffff;
  border: 2px solid #868e96; /* 枠線を太めにして視認性を確保 */
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}



.pl_y {
	padding-left : 20%;
}

.pr_y {
	padding-right : 20%;
}


.siv00 {

background:  #fff;
  border-radius: 10px;

    border-right: solid 0px #ccc; 
    border-bottom: solid 1px #ccc; 
    
     box-shadow: 0 2px 5px rgba(0,0,0,0.08), 0 0 8px rgba(0,0,0,0.05);






}

.siv01 {

background:  #fff;
  border-radius: 10px;
    border-right: solid 0px #ccc; 
    border-bottom: solid 1px #ccc; 
    
     box-shadow: 0 2px 5px rgba(0,0,0,0.08), 0 0 8px rgba(0,0,0,0.05);


}



#eq-container {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 下詰め */
    gap: 4px; /* JS側の38pxに合わせて少し詰める */
    height: 180px; /* 130pxから115pxに短縮 */
    margin-bottom: 10px; /* 25pxから10pxに短縮（縦を稼ぐため） */
    background: #fcfcef;
    padding: 0 10px;
    border-radius: 10px;

    /* 水平ラインの設定 */
    background-image: repeating-linear-gradient(to right, #666, #666 2px, transparent 2px, transparent 6px);
    background-size: 85% 1px;
    
    /* 下から「周波数ラベル(13px) + スライダー半分(40px)」の位置 ＝ 約53px */
    background-position: center bottom 131px; 
    background-repeat: no-repeat;
}


#noise-panel { position: relative; }

.ii {
    display: inline-block; 
    text-align: center;
    font-size: 28px;
font-family: "Hiragino Sans", "Meiryo", sans-serif;  
  font-weight: bold;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    
    /* 【iOS地雷対策】 */
    touch-action: manipulation; 
    
    /* 【iOS地雷対策】 */
    pointer-events: auto; 
}

/* ★ 見えないタップ領域を広げる設定 */
.ii::after {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    /* 開発中に範囲を確認したい場合は red にすると見えます */
    background: transparent; 
}

/* タップした瞬間の視覚フィードバック（反応したことがわかるように） */
.ii:active {
    transform: scale(1.1);
}


/* 説明文の共通スタイル */
#info-text, #info-text2, #info-text3, #info-text4, #info-text5, #info-text6, #info-text7, #info-text8, #info-text9, #info-text10, #info-text11 {
    display: none;
    position: absolute;
    top: 40px; /* 必要に応じて個別IDで調整してください */
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 300px;
    z-index: 8;
    color: #111;
    background: #fffdfb;
    border: 1px solid #dcd0e8;
	text-shadow: none !important; 
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	overflow-wrap: break-word;
    text-align: left;
    
    /* 【iOS地雷対策】 */
    pointer-events: auto; 
    
    /* 【iOS地雷対策】 */
    overscroll-behavior: contain; 
}

/* ボタンの位置指定 */
#info-btn  { top: 70px;  right: 6%; }
#info-btn2 { top: 190px; right:6%; }

#info-btn3 { top: 80px; right: 4%; }

#info-btn4 { top: 712px; right:6%; }
#info-btn5 { top: 830px; right: 6%; }
#info-btn6 { top: 1170px; right: 4.5%; }
#info-btn7 { top: 1300px; right:6%; }
#info-btn8 { top: 710px; right:16%; }
#info-btn9 { top: 1207px; right:3%; }
#info-btn10 { top: 160px; right: 6%; }
#info-btn11 {  top: 1243px; right:4%; }


/* 説明文の位置 */
#info-text  { top: -115px; }
#info-text2 { top: 170px;   }

#info-text3 { top: 115px; }

#info-text4 { top: 400px; }
#info-text5 { top: 550px; }
#info-text6 { top: 710px; }
#info-text7 { top: 920px; }
#info-text8 { top: 200px; }
#info-text9 { top: 740px; }
#info-text10 { top: 125px; }
#info-text11 { top: 880px; }



.msk {

display: inline-block; 
text-decoration: none; 
padding: 4px 8px; 
cursor: pointer; 
border-radius: 4px; 
border: 1px solid #aaa; 
background: #f2f4db; 
color: #000; 
font-weight:normal; 
font-size: 12px; 
line-height: 1; 
margin:10px 0px 15px 55px;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);

}



.nbn-setting-row {
    display: none;      
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%; 
    height: 48px; 
    max-width: 450px;
    z-index: 2;
    touch-action: none; 
    background: #f7f7ed;
    border: 0px solid #111;
    padding: 2px 15px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.nbn-setting-row label {
    font-size: 12px;
    font-weight: normal;
    color: #000;
}

/* 各パネルの出現位置 */




#nbn-row-freq { bottom: 818px; } 
#nbn-row-mix  { bottom: 455px; }

#mask-row-vol { bottom: 363px; }

#anm-row-vol { bottom: 582px; } 





/* スライダー本体（バーを暗く） */
.nbn-setting-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: #888;
    height: 8px;
    border-radius: 4px;
    margin: 10px 0;
    cursor: pointer;
}

/* iPhone/Android/Chrome用 つまみ */
.nbn-setting-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    background: #84ddc9;
    border: 1px solid #111;
    border-radius: 50%;
}

/* Firefox用 つまみ */
.nbn-setting-row input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: #84ddc9;
    border: none;
    border-radius: 50%;
}


/* =====================================
【新設】クローンマスク（ANM）専用の
スライダーデザイン
   ============================== */

/* ANMパネル本体の背景色や枠線を変えたい場合 */
#anm-row-vol {
    background: #edf0f7; /* ほんのり青紫がかった上品な背景 */
    border: 0px solid #7a89ed; /* 枠線をクローンマスクのテーマカラーに */
}

/* ANMの文字色 */
#anm-row-vol label {
    color: #111;
}

/* ANMスライダー本体（バーの色） */
#anm-row-vol input[type="range"] {
    background: #555; /* N-Band(888)より少し引き締まった暗いグレー */
}

/* ANM用つまみ（iPhone/Android/Chrome用） */
#anm-row-vol input[type="range"]::-webkit-slider-thumb {
    background: #c0b5ff; /*  Cボタンの再生中カラーと同じ紫色のつまみ */
    border: 1px solid #555;
    border-radius: 50%;
}

/* ANM用つまみ（Firefox用） */
#anm-row-vol input[type="range"]::-moz-range-thumb {
    background: #c0b5ff;
    border: 1px solid #555;
    border-radius: 50%;
}
/* パネルの出現位置 */




/* =====================================
【新設】環境音（Mask）個別ボリューム専用の
スライダーデザイン
   ===================================== */

/* 環境音パネル本体の背景色や枠線 */
#mask-row-vol {
    background: #edf7f2; /* ほんのり緑がかった上品な背景 */
    border: 0px solid #7aedb0; /* 枠線を環境音のテーマカラー（緑）に */
}

/* 環境音の文字色 */
#mask-row-vol label {
    color: #111;
}

/* 環境音スライダー本体（バーの色） */
#mask-row-vol input[type="range"] {
    background: #555; /* N-Band(888)より少し引き締まった暗いグレー */
}

/* 環境音用つまみ（iPhone/Android/Chrome用） */
#mask-row-vol input[type="range"]::-webkit-slider-thumb {
    background: #b5ffd5; /* 環境音のテーマカラーに馴染む、柔らかな緑色のつまみ */
    border: 1px solid #555;
    border-radius: 50%;
}

/* 環境音用つまみ（Firefox用） */
#mask-row-vol input[type="range"]::-moz-range-thumb {
    background: #b5ffd5; /* 環境音のテーマカラーに馴染む、柔らかな緑色のつまみ */
    border: 1px solid #555;
    border-radius: 50%;
}

/* パネルの出現位置 */




/* ボタンの共通設定 */
.panel-btn {
	margin: 0px 0px 6px 10px;
    width: 80px;
    height: 25px;
	border-radius: 15px; 
font-family: "Hiragino Sans", "Meiryo", sans-serif;	border: 1px solid #666; 
    touch-action: none; 
    font-weight: normal;
    cursor: pointer;
    display: inline-flex; /* 横に並びやすく設定 */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.0);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s; /* 色の変化を滑らかに */
}
/* ボタンの共通設定 */
.panel-btn-c {
	margin: 0px 0px 10px 0px;
    width: 80px;
    height: 30px;
	border-radius: 15px  3px  3px 15px; 
font-family: "Hiragino Sans", "Meiryo", sans-serif;	border: 0px solid #aaa; 
    touch-action: none; 
    font-weight: bold;
    cursor: pointer;
    display: inline-flex; /* 横に並びやすく設定 */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;  

    background: #efefef;
    color: #333333;
    font-size: 13px;

    position: absolute;
    z-index: 1;
    /* 場所の調整 */
    top: 8px;
    left: 30px;  
    
       /* 2. iOS地雷対策：タップの遅延・無効化をブラウザの芯から破壊 */
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-appearance: none; /* iOS独自のボタン丸みデザインを強制解除 */
    
}

/* スキャン再生ボタン（紫） */
.btn-noise-play {
    background: #825bb2;
	width: 230px; 
	height: 31px; 
    color: #FFFFFF;
    font-size: 14px;
}


/* 騒音測定ボタン */
.btn-mic-toggle {
    position: relative;
	width: 300px; 
	margin-right: 18px;	
	padding: 8px 0; 
	font-weight: 700; 
	cursor: pointer; 
    touch-action: none; 
font-family: "Hiragino Sans", "Meiryo", sans-serif;	border-radius: 6px; 
	border: 1px solid #555; 
	background:#f9f9f9; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	font-size: 17px;
}


.btn-mic-toggle::after {
    content: "";
    position: absolute;
    inset: -10px -5px; 
    background: transparent; 
}

/* 騒音 選択 */
.noise-select{
	margin-right: 138px;	
	width: 150px; 
	padding: 0px 5px; 
	border-radius: 4px; 
	border: 1px solid #333; 
	font-size: 16px; 
	font-weight: 500; 
	background: #fff9ff; 
font-family: "Hiragino Sans", "Meiryo", sans-serif;	color: #000; 
	cursor: pointer; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}


/* 騒音 play ボタン */
.btn-noise-toggle {
    position: absolute;
    top: -37px;
    left: 300px;

	width: 99px; 
	height:29px;
	
	padding: 4px 0 7px 0; 
	font-size: 14px; 
	font-weight: 500; 
    color: #000;
font-family: "Hiragino Sans", "Meiryo", sans-serif;    touch-action: none; 
	cursor: pointer; 
	border-radius: 5px; 
	border: 1px solid #661e66; 
	background: #efe5ef; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* マスカ―音スタンバイ ボタン */
.btn-masking-toggle {
	width: 60px; 
	padding: 6px 0; 
	font-size: 16px; 
    color: #000;
	font-weight: 500; 
    touch-action: none; 
font-family: "Hiragino Sans", "Meiryo", sans-serif;	cursor: pointer; 
	border-radius: 18px; 
	border: 2px solid #596600; 
	background: #f4f9d3; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}


.pic_m{
	width:40px !important;
    height: auto;
	margin-bottom:3px;
}


.pic_n{
	width:60px !important;
    height: auto;
	border-radius: 5px; 
	margin-bottom:3px;
}

.square_btn5a1{
    display: inline-block;
	margin : 10px 12px 10px 0px;
    padding: 0.5em 0.3em;
    text-decoration: none !important;
    background: #fff;/*ボタン色*/
    color: #000;
    border: solid 1px #ddd;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 17px;
}


.hyoudai{

    border: solid 1px #ccc;
	background:#f0f5fe; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border-radius: 7px;

}
/***********************************/

.libtn{

	line-height:1.2;
    width: 150px;
     height:27px;
	 padding: 2px 6px; 
	 cursor: pointer; 
	 border-radius: 15px; 
	 font-weight: 500; 
	 border: 1px solid #888; 
 	 box-shadow: 0 2px 10px rgba(0,0,0,0.0);
	 background: #e2e2ff;
	 
    margin-bottom: -40px; 
	position: absolute; 
	top: 116px; 
    left: 85px;
    z-index: 1;   
 
}
/***********************************/


  .overlay-window {
    /* 表示・非表示の制御（初期は非表示） */
    display: none; 
    
     /* --- 【重要】ここが変更場所です --- */
    position: absolute;  /* 絶対配置にして浮かせます */
    top: 439px;          /* ボタンの下に来るように調整（ボタンの高さ＋余白） */
    left: 13px;
    z-index: 1;       /* 他の要素より手前に表示 */
    /* ---------------------------------- */

    
    /* サイズと形状（canvasと同じ比率に設定） */

    width: 95%;
    height: 155px;
    max-width: 100%;
    border-radius: 4px;
    border: 0px solid #ddd;
    overflow: hidden;

    /* --- 【カスタマイズ項目】 --- */
    /* 背景画像 A */
    background-image: none; 
    background-size: cover;
    background-position: center;
    
    /* 透過性と背景色 */
    background-color: rgba(255, 255, 255, 0.0); 
    /* -------------------------- */
  }

  /* 指で押せる丸いリンクの共通設定 */
  .spot {
    position: absolute;
    width: 50px;
	padding: 0px 2px; 
    height: 23px;
    background-color: #e2e2ff; /* 塗り色 */
    color: #000;
    border-radius: 5px;
    border: 1px solid #888;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
font-family: "Hiragino Sans", "Meiryo", sans-serif;    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -webkit-tap-highlight-color: transparent; /* タップ時の青枠防止 */
  }
  
  .spot:active {
    transform: scale(0.9);
    background-color: #563d7a;
  }

  /* --- 各リンクの位置調整 (後で自由に変更してください) --- */
  .link1 { top: 125px;  left: 14px; }
  .link2 { top: 125px;  left: 85px; }
  .link3 { top: 125px;  left: 150px; }
  .link4 { top: 125px;  left: 215px; }
  .link5 { top: 125px; left: 400px; }
  .link6 { top: 125px; left: 488px; }
 

.e-btn {
 	position: absolute;
	font-size: 13px; 
	padding: 4px 3px; 
	color: #222; 
	border-radius: 12px; 
	background: #f2f2f2; 
	border: 1px solid #888; 
	font-weight: bold; 
	min-width: 103px;

	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
   
    bottom: -31px;          
    right: 0px;
    z-index: 2;   

}


.e-btn::after {
    content: "";
    position: absolute;
    inset: -8px -1px; 
    background: transparent; 
}

.eco-blink {
    animation: ecoFlash 1.5s infinite ease-in-out;
}
@keyframes ecoFlash {
    0% {
        background-color: #ffeb3b;
    }
    50% {
        background-color: #fff9c4; 
    }
    100% {
        background-color: #ffeb3b;
    }
}

  /* -------------------------- */
  
.floating-file-btn {
    position: absolute;
    z-index: 1;
    width: 30px;
    height: 22px;
    background: #fff;
    color: #000;
    border-radius: 25%;
    margin-bottom: -40px; 
   cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 550; 
	border: 1px solid #aaa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    
    touch-action: none !important;
    pointer-events: auto !important;
   -webkit-touch-callout: none !important;   
   
    /* 場所の調整用：ここをミリ単位で書き換えてください */
    top: 125px;
    left: -60px;
}

#save-duration {
  font-size: 16px !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

.fyb0 {
  position: absolute;
    z-index: 1;
   margin-bottom: -20px; 
    width: 280px;
	line-height:1.3;
	
    color: #630202;
    
    display: flex;
    font-size: 13px;
    font-weight: 500; 
    
    /* 場所の調整 */
    top: -25px;
    left: 353px;
}

.fyb1 {
  position: absolute;
    z-index: 1;
   margin-bottom: -20px; 
    width: 90px;
	line-height:1.3;
    color: #000;
    display: flex;
    font-size: 12px;
    font-weight: 500; 
    
    /* 場所の調整 */
    top: 90px;
    left: -79px;
}

.fyb2 {
  position: absolute;
    z-index: 1;
   margin-bottom: -12px; 
    width: 110px;
    color: #000;
 	line-height:1.2;
   display: flex;
    font-size: 12px;
    font-weight: 400; 
    
    /* 場所の調整 */
    top: 158px;
    left: -79px;
}



.square_btn8{
    position: relative;
    z-index: 1;
   display: inline-block;
    padding: 0.6em 1.1em;
    text-decoration: none;
    background: #F0F5FE;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 3px #c9a866;
    border-radius: 25px;
     box-shadow: 0 5px 5px rgba(0,0,0,0.08), 0 0 8px rgba(0,0,0,0.05);
     
    /* 場所の調整 */
    bottom: 408px;
    left: 146px;
    

}


.senta{
    position: relative;
    z-index: 1;
     
    /* 場所の調整 */
    bottom: 290px;
    left: 196px;    

}


masker-container {
    width: 95%; /* スマホ画面の端に少しだけ余白を作る */
    max-width: 650px; /* PCで見ても崩れない上限設定 */
    margin: 30px auto;
    padding: 20px; /* スマホではpaddingを少し控えめにして中身を広く */
    border: 1px solid #ddd;
    border-radius: 12px; /* スマホアプリらしい、少し丸みのある親しみやすい角 */
    background-color: #fff;
    color: #333; /* スマホの明るい画面でも目が疲れない濃いグレー */
    line-height: 1.7;
    font-family: inherit;
    box-sizing: border-box; /* 枠線を含めた幅計算（スマホ崩れ防止の必須設定） */
}

.masker-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #111;
    border-bottom: 2px solid #111;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
}



.feature-item {
    width: 95%; 
    max-width: 550px; 
    margin: 20px auto; 
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* 項目ごとの区切りをスマホでも分かりやすく */
}

.feature-header {
    font-size: 1.05rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
    display: flex;
}

.feature-header span {
    color: #007bff; /* スマホで視線を引く鮮やかなブルー */
    margin-right: 8px;
    font-weight: 900;
}

.feature-text {
    font-size: 0.95rem; /* スマホで一番読みやすいサイズ */
    color: #444;
}

.comparison-box {
    margin: 5px auto 5px auto;
    width: 70%; 
    padding: 15px;
    background-color: #f0f7ff; /* スマホで「ここが別枠」と一目でわかる淡い青 */
    border-radius: 8px;
}

.comparison-title {
    font-size: 1rem;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 8px;
}

.comparison-content {
    font-size: 0.875rem; /* 備考欄は少し小さくしてメリハリを */
    color: #333;
}




.ib {

    display: inline-block;

}


.inh {
    font-family: inherit;
}

.tbk{
    position: relative;
    z-index: 1;
     
    /* 場所の調整 */
    bottom: 0px;
    left: 0px;    

}


.shh {
    position: absolute;
    z-index: 1;
    /* 場所の調整 */
    top: 503px;
    left: 130px;    
    /* 追加：高さと幅を固定して文字が出ても動かないようにする */
    height: 80px; 
    width: 300px;
    overflow: visible;
}

.vh {
visibility: visible;
}

.vn {
visibility:hidden;
}

.msk01 {
    position: relative;
    padding: 15px;
    border-radius: 12px;
    border: 2px solid #ddd;
	color:#000;
    background-color: #fff; 
    opacity: 1.0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: visible;
    
    opacity: 0.95;
    width: 130px;  height: 90px; 
 
    margin-bottom: -120px;
    
  /* 場所の調整 */   
    left: 275px;     bottom: 220px;

}



.bs {
  /* 
 0.45 = 73 ｜ 0.40 = 66 ｜ 0.35 = 59 ｜ 0.30 = 4d ｜ 0.25 = 40 ｜ 0.20 = 33 ｜ 0.15 = 26 ｜ 0.10 = 1a
  
  */
  box-shadow: -8px -8px 20px -10px #5b47bc73;
}


.slim-player {
    display: inline-flex;
    margin: 5px 0px 10px 0px;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 2px 10px 2px 5px;
    width: 95%;

    height: 36px;
    gap: 8px;
    box-sizing: border-box;
}
.play-toggle {
    width: 50px;
    height: 28px;
    border-radius: 14px;
    border: 1px solid #aaa;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;   /* 横幅を死守する設定 */
}

.slim-loader .play-toggle {
    width: 100px;     /* 展開前は150px */
    height: 28px;     /* 押しやすいように少し高さを出す（任意） */
    font-size: 12px;  /* 文字も少し見やすく（任意） */
}

.vol-group { display: flex; align-items: center; gap: 3px; }
.v-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #888;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}
.slim-vol-range {
    width: 100px;
    accent-color: #728200;
    cursor: pointer;
}
.time-display {
    font-size: 12px;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
	color: #000;
    margin-left: auto;
}

/* 再生中のスタイル：背景を明るい黄色に変更し、枠線を強調 */
.slim-player.is-playing {
    background: #f9f9f9; /* 薄い黄色 */
    border: 1px solid #ccc; /* アクセントカラーに合わせた太い枠線 */
}

/* 再生中の時はボタン自体の見た目も少し変える（任意） */
.slim-player.is-playing .play-toggle {
    background: #fff;
    color: #000;
    border: 2px solid #dc6000; 
}


.slim-loader {
    display: inline-flex;
    margin: 5px 0px 10px 150px;
    align-items: center;
    width: 95%;
    height: 36px;
    box-sizing: border-box;
}

.slim-player, .slim-player * {
    -webkit-touch-callout: none !important; /* iOSでのメニュー出現を防止 */
    -webkit-user-select: none;             /* テキスト選択防止 */
    user-select: none;
}


/* --------------------- */


/* 親要素：ボタンとスクリーンの基準点 */
#boot-trigger-wrapper {
position: absolute;
    text-align: center;
    margin-bottom: -60px;
	width: 100; 
    top: 10px; 
    left: 400px;
    z-index: 4;   

}

#boot-trigger-btn {
    width: 30px;  /* 小さく設定 */
    height: 30px; /* 小さく設定 */
    border-radius: 18px;
    border: 1px solid #aaa; /* 枠も少し細くすると綺麗です */
    background: #ebebe1;
   cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto 5px; /* マージンも少し詰めました */
    position: relative; /* 基準を明確に */
}

/* 電源マークの円部分 */
#boot-trigger-btn::before {
    content: '';
    width: 10px;  /* 小さく設定 */
    height: 10px; /* 小さく設定 */
    border: 3px solid #444; /* 棒の太さを合わせる */
    border-top-color: transparent;
    border-radius: 50%;
    position: relative;
    top: 1px; /* 縦位置の微調整 */
}

/* 電源マークの棒部分 */
#boot-trigger-btn::after {
    content: '';
    width: 2px;   /* 少し細く */
    height: 8px;  /* 短く調整 */
    background: #444;
    position: absolute;
    top: 8px;     /* 本体の中心にくるよう調整（ここが重要） */
    border-radius: 1px;
}


/* 外枠の色を変える（お好みで） */
.boot-complete #boot-trigger-btn {
    border-color: #2e7d32; 
}

/* 電源マークの円部分（before）の色変更 */
.boot-complete #boot-trigger-btn::before {
    border-color: #ccccc1;
    border-top-color: transparent; /* 上の切れ目は維持 */
}

/* 電源マークの棒部分（after）の色変更 */
.boot-complete #boot-trigger-btn::after {
    background: #ccccc1;
}




/* ホバー・アクティブ時の演出 */
#boot-trigger-btn:hover { border-color: #bbb; }
#boot-trigger-btn:active { transform: scale(0.92); background: #f5f5f5; }



/* 下のテキストラベル */
.boot-label {
	position: relative; 
	bottom: 30px; 
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
	left: 60px;
    z-index: 1;   
 	padding: 5px 1px; 
    font-size: 13px;
    color: #333;
    letter-spacing: 0.0em;
}

/* 診断スクリーンの設定（ここを自由に調整してください） */
#diag-overlay {
    position: absolute;
    
    top: 0px;         
   right: 0px;   
        
    z-index: 5;   

    /* サイズ設定 */
    width: 315px;       /* 横幅 */
    height: px;      /* 高さ */

    /* 外観設定 */
    background: rgba(255, 255, 255, 0.95); /* 半透明白 */
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    color: #333;
    display: none;      /* 初期状態は非表示 */
    padding: 20px;
    box-sizing: border-box;
    
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	
	
      overflow-y: auto; 
}

/* ログ表示エリアのスタイル */
#diag-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.diag-line {
    font-size: 15px;
    font-weight: bold !important;
    line-height: 1.6;
    color: #222;
    margin-bottom: 4px;
    border-bottom: 1px dotted #eee;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
}

.diag-status-ok { color: #2e7d32; float: right; font-weight: bold; }
.diag-status-fail { color: #c62828; float: right; font-weight: bold; }

/* マイク警告メッセージ */
.diag-notice {
    margin-top: 10px;
    padding: 10px;
    border-left: 2px solid #666;
    background: rgba(0,0,0,0.05);
    font-size: 15px !important;
    display: none;
    line-height: 1.4;
}

/* ボタン群 */
.nb-b {
	line-height:0.9; 
	margin-left: -20px; 
	margin-right: 5px; 
	width: 88px;
	 padding: 8px 2px;2px 2px; 
	 font-size: 12px; 
	 font-weight: bold; 
	 cursor: pointer; 
	 border-radius: 12px; 
	 border: 2px solid #024f82; 
	 background: #eaefff; 
	 color: #000; 
	 -webkit-user-select:none; user-select:none; 
	 box-shadow: 0 2px 10px rgba(0,30,55,0.5);
}

.set-b {
	margin-right: 13px; 
	width: 50px; 
	padding: 3px 0; 
	font-size: 14px; 
	font-weight: bold; 
	cursor: pointer; 
	border-radius: 12px; 
	border: 1px solid #024f82; 
	background: #f2f2f2; 
	color: #163d54; 
	-webkit-user-select:none; user-select:none; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.anm-b {
	line-height:1.2; 
	margin-right: 18px; 
	margin-left: 3px; 
	width: 75px; 
	padding: 3px 2px; 
	font-size: 13px; 
	font-weight: bold; 
	cursor: pointer; 
	border-radius: 12px; 
	border: 3px solid #998e00; 
	background: #ddddff; 
	color: #000; 
	-webkit-user-select:none; user-select:none; 
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.b-3d {
	line-height:1.0; 
	margin-right: 10px; 
	margin-left: 3px; 
	width: 55px; 
	padding: 3px 2px; 
	font-size: 16px; 
	font-weight: bold; 
	cursor: pointer; 
	border-radius: 12px; 
	border: 2px solid #024f82; 
	background: #fff9e5; 
	color: #000; 
	-webkit-user-select:none; user-select:none; 
	box-shadow: 0 2px 10px rgba(0,30,55,0.5);
}

.reset-b {
    position: absolute;
    
    top: 15px; 
    right: 470px;
    z-index: 0;  
     
	line-height:1.2; 
	width: 54px; 
	height:47px; 
	padding: 3px 0; 
	font-size: 12px; 
	font-weight: bold; 
	cursor: pointer; 
	border-radius: 8px; 
	border: 2px solid #888; 
	background: #f2f2f2; 
	color: #000; 
	-webkit-user-select:none; user-select:none; 
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}
/* データ記録 */
#log-save-btn {
    position: absolute ;
    width: 125px; 
    border: 2px solid #aaa; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 5px; 
    background: #fff2f2; 
    
    bottom: -46px ;    
    right: 295px ; 
    
    font-size: 14px;
    padding: 2px 6px;
    cursor: pointer;
    z-index: 0;
}

/* データ表示 */
#log-view-btn {
    position: absolute ;
    border-radius: 7px; 
    width: 200px; 
    border: 1px solid #aaa; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #fff2ce; 
    
    bottom: -46px ;    
    right: 130px ;
    
    font-size: 16px;
    font-weight:bold;
    padding: 3px 6px;
    cursor: pointer;
    z-index: 1;
}




#log-view-btn::after {
    content: "";
    position: absolute;
    inset: -10px -5px; 
    background: transparent; 
}

/* 最新日データ表示 */
#log-status-panel {
    position: absolute ;
   width: 245px; 

    bottom: -16px ;    
    right: 185px ;  
    
    color: #000000;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 14px;
    line-height: 1.4;
    text-align: right;
    white-space: pre;
    z-index: 0;
}



/* -------4連ボタン--------- */
.capsule-container {
  display: flex;
  width: 337px;  
  height: 50px;  
  position: relative;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
  margin: 0 auto; 
}

/* 基本スタイル */
.cap-btn {
  width: 100px;
  height: 100%;
  border: none;
  cursor: pointer;
  padding: 0;
  background: none;
  position: relative;
  pointer-events: auto !important;
  touch-action: none !important;
}




/* ボタン共通の挙動 */
.cap-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background 0.2s, opacity 0.2s; /* 背景色と透明度を滑らかに変化 */

 pointer-events: none !important;

}
.cap-btn:hover::before {
  opacity: 0.85;
}

/* 文字配置設定 */
.cap-btn span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
pointer-events: none !important;


}

/* ==========================================
   1ボタン：N-Band(A)
   ========================================== */
.btn-left {
  font-size: 14px;
  font-weight: bold;
  color: #000; 
}
/* 停止中の色 */
.btn-left::before {
  background: #d0d0d7; 
  border-radius: 23px 0 0 23px;
  clip-path: polygon(0px 0px, 100% 0px, calc(100% - 20px) 100%, 0px 100%);
}
/* 再生中の色 */
.btn-left.is-playing::before {
  background: #b6b5ff !important;
}

/* ==========================================
   2ボタン：環境音(B)
   ========================================== */
.btn-center {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-left: -20px; 
  margin-right: -20px;
  box-sizing: content-box;
  font-size: 14px;
  font-weight: bold;
  color: #000; 
}
/* 停止中の色 */
.btn-center::before {
  background: #d1d0d7; 
  clip-path: polygon(20px 0px, calc(100% - 20px) 0px, 100% 100%, 0px 100%);
}
/* 再生中の色 */
.btn-center.is-playing::before {
  background: #bcb5ff !important;
}

/* ==========================================
   3ボタン：クローンマスク(C)
   ========================================== */
.btn-right {
  font-size: 14px;
  line-height: 1.1;
  font-weight: bold;
  color: #000; 
}
/* 停止中の色 */
.btn-right::before {
  background: #d0cfd6; 
  border-radius: 0; 
  clip-path: polygon(0% 0%, 100% 0%, 79% 100%, 21% 100%);
}
/* 再生中の色 */
.btn-right.is-playing::before {
  background: #c0b5ff !important;
}

/* ==========================================
   4ボタン：3D(D)
   ========================================== */
.btn-fourth {
  width: 60px; 
  font-size: 14px;
  font-weight: bold;
  color: #000;  
  border-left: 4px solid transparent;
  margin-left: -20px;
  box-sizing: content-box;
}
/* 停止中の色 */
.btn-fourth::before {
  background: #d2d0d7; 
  border-radius: 0 23px 23px 0;   
  clip-path: polygon(20px 0px, 100% 0px, 100% 100%, 0px 100%);
}
/* 再生中の色 */
.btn-fourth.is-playing::before {
  background: #c5b5ff !important;
}




/* ミュートボタンの基本・平常時スタイル（薄いグレー） */
#masking-mute-toggle {
     position: absolute;
    
    top: 24px; 
    right: 50px;
    z-index: 0;  
    
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
   font-size: 14px;
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 20px; /* しっかりと丸みを施したコンパクトデザイン */
    background-color: #efe5ef; /* 既存のSTANDBY状態と統一 */
    color: #222;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ホバー時の微調整（お好みに合わせて変更可能） */
#masking-mute-toggle:hover {
    background-color: #e2d5e2;
    border-color: #bbb;
}

/* ミュート有効時：オレンジ色でゆっくりホタル調点滅（2秒周期） */
#masking-mute-toggle.is-muted {
    animation: smooth-blink-orange 1.7s infinite ease-in-out;
    border-color: #ff9800;
    color: #000;
}

/* ゆっくりとした滑らかな明滅アニメーション */
@keyframes smooth-blink-orange {
    0%   { background-color: rgba(255, 152, 0, 0.35); }
    50%  { background-color: rgba(255, 152, 0, 1.0); }
    100% { background-color: rgba(255, 152, 0, 0.35); }
}




.eq-flat{
    position: absolute;
  width: 90px; 
    
    top: 265px; 
    right: 240px;
    
    z-index: 0;  
	border-radius: 8px; 
	padding: 1px 8px; 
	font-size: 11px; 
	background-color: #666; 
	color: #fff; 
	cursor: pointer;
}


.prom1{
    margin: 0px auto 0px auto;
    position: relative;
    width: 100%; 
    
    z-index: 1;  

}


.prom2{
    position: absolute;
    width: 100%; 
    
    top: 115px; 
    left: 0px;
    

}



/* カウントダウンエリア全体のクラス */
.timer-alert-container { 
    position: absolute;
    
    top: -180px; 
    right: 150px; 
    
	text-align: left;    
    color: #aaa; 
    width: 300px;
    font-size: 14px; 
    z-index: 3;  
    font-weight: normal; 
 
}

/* 数字部分だけを個別に装飾するクラス（色、大きさ、ウエイト） */
.countdown-num {
    color: #aaa;     /* 文字色：鮮やかな赤 */
    font-size: 15px;  /* 大きさ：文字の約2.5倍 */
    font-weight: normal;   /* ウエイト：極太 */
    margin: 0 0px;     /* 左右に少し隙間を空ける */
}



/* 強制記録ボタンの別ファイル用CSS指定例 */
.custom-report-btn {


  
}


.custom-view-log-btn{

  
}


/* 補正プルダウン */
.hosei{ 
    position: absolute;
    z-index: 3;  

    width: 82px;
    
font-family: 
  "游ゴシック体", "Yu Gothic", YuGothic, 
  "BIZ UDPGothic", "BIZ UDゴシック", 
  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", 
  "メイリオ", Meiryo, 
  sans-serif;

    top: 362px; 
    right: 440px; 

    margin-top: 0px; 
    padding: 1px 2px; 
    border-radius: 2px; 
    border: 1px solid #eee; 
    color: #555; 
    font-size: 14px; 
    
    /* 背景色だけをrgbaで半透明（不透明度0.7）にする */
    background: rgba(252, 252, 249, 0.7); 
    
    cursor: pointer;   
    box-shadow: none !important;
}








/* 報告書（書類）マークの土台 */
.report-doc-icon {
    position: relative;
    width: 16px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
}
/* 書類内の3本線 */
.report-doc-icon::before {
    content: "";
    position: absolute;
    top: 3px; left: 2px;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.report-doc-icon::after {
    content: "";
    position: absolute;
    top: 7px; left: 2px;
    width: 4px;
    border-top: 2px solid currentColor;
}




#log-overlay-screen, #log-overlay-screen div {
    overscroll-behavior: contain !important;
}
/*  履歴リストのスクロールバーをパソコンでも常に強制表示する */
#log-overlay-screen div::-webkit-scrollbar {
    width: 12px !important;            /* バーの横幅（太さ） */
    background: rgba(0, 0, 0, 0.05);  /* バーの背景の通り道の溝の色（薄いグレー） */
}
#log-overlay-screen div::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important; /* スクロールバー本体のつまみの色（グレー） */
    border-radius: 10px !important;            /* つまみの角を丸くする */
}








/* =================================
        全体コンテナAAAA
================================== */
#visualizer-db-overlay-container-a {
    position: absolute;
    
    top: 190px;
    left: 195px;
    
    z-index: 2;
    width: 150px;
    height: 30px;
    
    pointer-events: auto !important; 
    overscroll-behavior: contain !important;    
    
}

/* ボタン単体の基本デザイン */
#log-audio-stop-btn {
    display: inline-block;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: #9e3fef; /* 停止をイメージさせる赤色 */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px #333333; /* 影の色を#形式に変更 */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#log-audio-stop-btn::after {
    content: "";
    position: absolute;
    inset: -3px -1px; 
    background: transparent; 
}




#log-audio-stop-btn:hover {
    background-color: #ff3333;
}

/* クリックした（押した）瞬間の引っ込みエフェクト */
#log-audio-stop-btn:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px #333333; /* 影の色を#形式に変更 */
}




/* =================================
   BC  dB表示    全体コンテナBBCCRR
================================== */
#visualizer-db-overlay-container-r,
#visualizer-db-overlay-container-b,
#visualizer-db-overlay-container-c {
    position: absolute;
    
    width: 280px;
    height: 95px;
    
    top: 77px;
    left: 115px;
	border-radius: 40px; 
   
    z-index: 1;
    pointer-events: auto !important; 
    overscroll-behavior: contain !important;    


}


/* ============================
   r 個別  リアルタイムdB  
   ========================= */

/* 1. リアルタイムdB数値 */
.vis-current-db-num {
    position: absolute;
    top: -53px;
    right: 85px;
    z-index: 1;
    font-size: 45px;
    font-weight: bold;


	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
  color: #222222;           
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);

}
/* 2. リアルタイムdB単位（クラス名: now-unit） */
.now-unit {
    position: absolute;
    top: -33px;
    left: 199px;
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 30px;
    font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    color: #222;
}

.now-unit-a {
  font-size: 18px;
    font-weight:normal;
}



/* ============================
   B  個別デザイン・位置指定領域BBBB
   ========================= */
   
 /* 背後スクリーン */
   
.aa1a {
  position: absolute;
  
  top: -45px;
  left: 40px;
  
  width: 285px;
  height: 170px;
  
  background-color: #fcfcf9; 
  
  opacity: 0.7; 
  
  z-index: 1; 
}

/* 3.-----------------------------
 「平穏時：」ラベル（クラス名: b-lbl） 
-----------------------------------*/
.b-lbl {
    position: absolute;
    
    top: 42px;
    right: 26px;
    
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-weight: bold;
    font-size: 14px;
    color: #4c72db;
}

.under_db {
	text-decoration:underline;
 text-decoration-thickness: 2px; 
	text-underline-offset: 7px;
}


/* 4. 平穏時音圧数値数値数値数値数値 */
.vis-b-db-num {
    position: absolute;
    
    top: 36px;
    right: 198px;
    
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 19px;
    font-weight: normal;
    color: #4c72db;
}

/* 5. 平穏時後ろの「dB」単位（クラス名: b-unit） */
.b-unit {
    position: absolute;
    top: 43px;
    left: 86px;
    z-index: 1;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 14px;
    color: #4c72db;
}

/*-------------------------------------------
 6. 「騒音時：」ラベル（クラス名: p-lbl） 
 ------------------------------------------*/
.p-lbl {
    position: absolute;
    top: 14px;
    left: 113px;
    z-index: 1;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 14px;
    color: #000;
}

/* 7. 騒音時音圧数値数値数値数値数値数値 */
.vis-p-db-num {
    position: absolute;
    top: 9px;
    right: 198px;
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 19px;
    font-weight: normal;
    color: #000;
}

/* 8. 騒音時後ろの「dB」単位（クラス名: p-unit） */
.p-unit {
    position: absolute;
    top: 16px;
    left: 86px;
    z-index: 1;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 14px;
    color: #000;
}
/*-------------------------------------------
 6. 「周波数：」（クラス名: fp-lbl） 
 ------------------------------------------*/
.fp-lbl {
    position: absolute;
    top: 14px;
    left: 80px;
    z-index: 1;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 14px;
    color: #000;
}

/* 7. 周波数  値数値数値数値数値数値 */
.vis-fp-db-num {
    position: absolute;
    top: 12px;
    right: -20px;
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 16px;
    font-weight: normal;
    color: #000;
}

/* 8. 周波数「Hz」単位（クラス名: p-unit） */
.fp-unit {
    position: absolute;
    top: 16px;
    left: 302px;
    z-index: 1;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 13px;
    color: #000;
}

/*----------------------------------------------
 9. 「音圧差：」ラベル（クラス名: d-lbl）
 --------------------------------------------- */
.d-lbl {
    position: absolute;
    top: 73px;
    left: 113px;
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-weight: bold;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
}

/* 10. 音圧差数値数値数値数値数値数値数値 */
.vis-d-db-num {
    position: absolute;
    top: 66px;
    right: 198px;
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 19px;
    font-weight: normal;
    color: #000;
}

/* 11. 音圧差後ろの「dB」単位（クラス名: d-unit） */
.d-unit {
    position: absolute;
    top: 73px;
    left: 86px;
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-weight: bold;
    font-size: 14px;
    color: #000;
    font-weight: bold;
}

/* 12. 騒音をキャッチしました。 */
#vis-status-save-msg {
    position: absolute;
    width: 200px;
    
    top: 100px;
    left: 59px;
    
    z-index: 1;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 15px;
    font-weight: normal;
    color: #b70000;
}



/* ====================================================
   【共通アニメーション】B・Cコンテナの滑らかな表示・非表示切り替え設定
   ==================================================== */

/* 通常状態（表示中）：BもCも0.3秒かけて変化する準備をしておく */
#visualizer-db-overlay-container-b,
#visualizer-db-overlay-container-c {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 非表示状態：JavaScriptから .is-hidden を付与されたコンテナを滑らかに消す */
#visualizer-db-overlay-container-b.is-hidden,
#visualizer-db-overlay-container-c.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* ============================
   B  個別デザイン・位置指定領域BBBB
   ========================= */
   
 /* 背後スクリーン */
   
.aa1r {
  position: absolute;
  
  top: -45px;
  left: 40px;
  
  width: 285px;
  height: 60px;
  
  background-color: #fcfcf9; 
  
  opacity: 0.7; 
  
  z-index: 1; 
}



/* ======================================
   3大トラップ・上限設定UI配置スタイル
   ======================================== */

.custom-trap-ui-container {
    position: absolute;
    
    bottom: 0px;         
    left: 0px; 
              
    z-index: 1;          
}


/* 1. 【低音域】プリセットプルダウン */
.text-preset-low {
    position: absolute;
    
    width: 150px; 
    bottom: 520px;          /* Y軸位置 */
    left: 20px;            /* X軸位置 */
    z-index: 1;            /* キャンバスの前面ホールド */
    padding: 2px 12px;
    font-size: 13px;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    color: #111111;        /* 文字色 */
    background: #f2eefa;   /* 背景色（薄い紫調） */
    border: 2px solid #825bb2; /* ボーダー色 */
    border-radius: 4px;
}

/* 2. 【高音域】プリセットプルダウン */
.text-preset-high {
    position: absolute;
    
    width: 150px; 
    bottom: 120px;          /* Y軸位置 */
    left: 180px;           /* X軸位置：低音用と重ならないよう右へシフト */
    z-index: 1;
    padding: 2px 12px;
    font-size: 13px;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    color: #111111;        /* 文字色 */
    background: #eef5fa;   /* 背景色（薄い青調） */
    border: 2px solid #5b92b2; /* ボーダー色 */
    border-radius: 4px;
}

/* 3. 【上限数指定】セレクトボックス */
.limit-selector-box {
    position: absolute;
    
    width: 150px; 
    bottom: 120px;          /* Y軸位置 */
    left: 340px;           /* X軸位置：高音用と重ならないようさらに右へシフト */
    z-index: 1;
    padding: 2px 12px;
    font-size: 13px;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    color: #333333;        /* 文字色 */
    background: #ffffff;   /* 背景色（白） */
    border: 1px solid #cccccc; /* ボーダー色 */
    border-radius: 4px;
}



/* 2. 設定モーダル */

.nc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); /* 背面を程よく暗く */
    z-index: 3000; /* アプリ内の他の要素より必ず最前面へ */
    display: flex;
    justify-content: center;
    align-items: center;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
Neue";
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* 非表示コントロール用の補助クラス */
.nc-modal-overlay.nc-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. モーダル本体の白パネル */
.nc-modal-panel {
    background-color: #ffffff;
    width: 90%;
    max-width: 360px;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ncPanelSlideUp 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

    /* ─── 【重要：パネルを通過するスクロール連鎖を完全に遮断】 ─── */
    overscroll-behavior: contain; /* スクロールが端に達しても下の画面へ絶対に伝播させない */
}

/* パネル出現時の滑らかなスライドイン演出 */
@keyframes ncPanelSlideUp {
    0% { transform: translateY(15px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}



/* 3. ヘッダー領域 */
.nc-modal-header {
    padding: 16px 20px 6px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}
.nc-modal-header h3 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: bold;
    color: #111111;
}
.nc-modal-subtitle {
    margin: 0;
    font-size: 13px;
    color: #222;
    line-height: 1.5;
}

/* 4. スクロール可能なボディ領域 */
.nc-modal-body {
    padding: 12px 20px;
    overflow-y: auto;
    flex: 1;
}

/* 各フォーム項目の外枠マージン */
.nc-form-group {
    margin-bottom: 16px;
}
.nc-form-group.nc-border-top {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #dddddd;
}

/* 5. フォーム部品の装飾 */
.nc-field-label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #111;
    margin: 0px 0px 0px 0px;
}
.nc-select-field {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: bold;
    color: #222222;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.nc-select-field:focus {
    border-color: #4a90e2;
    outline: none;
}

/* チェックボックス付き大元スイッチ */
.nc-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}


.nc-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    margin-right: 8px;
    cursor: pointer;
    width: 26px;
    height: 26px;
}
.nc-checkbox-text {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 1.4;
}

/* 親切な注釈テキスト */
.nc-help-text {
    display: block;
    font-size: 12px;
    color: #000;
    margin-top: 5px;
    line-height: 1.4;
}

/* 6. 自動保存OFF時の【グレーアウト連動】コントロール */
.nc-filters-wrapper {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
}
/* 自動保存OFF時、このクラスをJavaScriptで付与して触れなくする */
.nc-filters-wrapper.nc-disabled-state {
    opacity: 0.35 !important;
    pointer-events: none !important; /* タップや選択を物理的に禁止 */
    user-select: none;
}

/* 7. フッターボタン領域（iOSの押しやすさを担保する余白） */
.nc-modal-footer {
    padding: 14px 20px 18px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* メイン起動ボタン（iOS地雷対策のコア） */
.nc-btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    background-color: #ffcccc; 
    border: none;
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.15s ease;
}
.nc-btn-primary:active {
    background-color: #1557b0;
}

/* キャンセルボタン */
.nc-btn-secondary {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #5f6368;
    background-color: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.15s ease;
}
.nc-btn-secondary:active {
    background-color: #f1f3f4;
}

/* 保存設定ボタン */
.nc-trigger-settings-btn {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 3px;
    font-size: 15px;
    font-weight: bold;
    
    color: #ffffff;
    background-color: #6200ee; 
    
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    
    pointer-events: auto !important;
    letter-spacing: 0.2em;
    
   position: absolute;
    
    width: 150px; 
    
    bottom: -46px ;    
    right: 16px ;
             
    z-index: 1;  
}


.nc-trigger-settings-btn::after {
    content: "";
    position: absolute;
    inset: -10px -1px; 
    background: transparent; 
}


/* タップ・クリックした瞬間のフィードバック演出 */
.nc-trigger-settings-btn:active {
    background-color: #4b00b5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}




/* 数値表示 / 非表示 */
.container-b-toggle-btn{
    position: absolute;   
    
    bottom:260px;      
    left: 404px; 
             
    z-index: 2;     
    padding: 5px 12px;
    font-size: 13px;
    font-weight: bold;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    color: #111111;        /* 文字色 */
    background: #fcfcf9;   /* 背景色（薄い紫調） */
    border: 1px solid #ddd; /* ボーダー色 */
    border-radius: 7px;
    
           
}


/* 半透明カプセルボタン本体のデザイン（白色系・すりガラス風デザイン） */
.mic-toggle-badge {
    position: absolute;
    top: 5px;   /* 指定の位置を維持 */
    left: 4px;  /* 指定の位置を維持 */
 
     z-index: 2;     
    
    display: flex;
    align-items: center;
    gap: 2px; 
    
    padding: 1px 5px;
    font-size: 12px;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-weight: bold;
    
    color: #333333;
    
    background-color: rgba(255, 255, 255, 0.75);
    
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 20px; 
    
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    
cursor: default;
    transition: all 0.2s ease; 
    outline: none;
}

.mic-toggle-badge::after {
    content: "";
    position: absolute;
    inset: -5px -5px; 
    background: transparent; 
}







.mic-toggle-badge:hover {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.25); /* 枠線をクッキリさせる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 押し込める立体感を強める */
}

/* 現在のモードを表す小さな丸印の基本デザイン */
.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* 外付けマイク選択時：白背景に映える、少し落ち着いた鮮やかな緑色の丸 */
.dot-wm61a {
    background-color: #00c853;
    box-shadow: 0 0 4px rgba(0, 200, 83, 0.4); 
}

/* 内蔵マイク選択時：白背景に映える、クッキリした鮮やかな青色の丸 */
.dot-internal {
    background-color: #1976d2;
    box-shadow: 0 0 4px rgba(25, 118, 210, 0.4);
}




/* 「静穏時固定ボタン」「静穏時固定ボタン」「静穏時固定ボタン」「静穏時固定ボタン」「静穏時固定ボタン」「静穏時固定ボタン」 */

.silence-toggle-badge {
    position: absolute;
        
    top: 53px;   /* 指定の位置を維持 */
    left: 4px;  /* 指定の位置を維持 */
 
     z-index: 2;     
    
    /* 横並びのコンパクト配置 */
    display: flex;
    align-items: center;
    gap: 6px; 
    
    /* ミニマルなサイズ感（マイクボタンと完全同期） */
    padding: 6px 12px;
    font-size: 12px;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-weight: bold;
    color: #333333;
    
    /* 白の半透明（透過率75%）＋ すりガラス効果 */
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* 上品な枠線と立体シャドウ */
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 20px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    
    /* 操作感の設定 */
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

/* ボタンに触れたときのリプライ（白を濃くし、影を強める） */
.silence-toggle-badge:hover {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 【新規】自動追従状態を表す小さな丸印：注意深く監視しているイメージのオレンジ色 */
.dot-unlocked {
    background-color: #ff9800;
    box-shadow: 0 0 4px rgba(255, 152, 0, 0.4); 
}

/* 【新規】カチッと完全に固定（ロック）された状態を表す小さな丸印：安全を意味する赤色の丸 */
/* ※ 後ほど切り替えの際にJavaScript側からこのクラス（色）を操作します */
.dot-locked {
    background-color: #e53935;
    box-shadow: 0 0 4px rgba(229, 57, 53, 0.4);
}


/* ===========================================
   データ収集成果表示レイヤー
   （完全可変・パーセンテージ対応版）
============================================ */

/* 外枠レイヤー（固定pxを排除し、親のrelativeに対する比率に変更） */
#nc-data-collection-layer {
    position: absolute;
    top: 18%;              /* 上下の位置を％で指定（全体の高さに合わせて伸縮） */
    left: 2%;              /* 左端からの余白を％で指定 */
    width: 12.6%;          /* 横幅790pxに対する100pxの比率（約12.6%） */
    height: 45.4%;         /* 縦幅550pxに対する250pxの比率（約45.4%） */
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    
    /* 内部の文字やマスの基準となる「仮想の横幅」をこのレイヤー自身に設定 */
    container-type: inline-size;     

}

/* カウンターテキスト（外枠の横幅に比例して文字サイズも自動伸縮） */
.nc-text-theme {
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    /* cqwは「このエリアの横幅の何％か」という単位。外枠が小さくなれば文字も自動で小さくなります */
    font-size: 28cqw;      
    font-weight: bold;
    color: #000;
    margin-bottom: 0cqw;   /* 隙間も外枠の幅に比例 */
    text-align: center;
    width: 100%;
}

/* ★80件固定ドットのグリッド配置（5列×16行に最適化） */
#nc-dot-grid-container {
    display: grid;
    /* 1マスを外枠の横幅の14%に設定（5列運用を維持） */
    grid-template-columns: repeat(5, 14cqw); 
    
    /* ★修正：行数を10から16に変更し、縦横比1:1を保ったまま80マスを格納します */
    grid-template-rows: repeat(16, 14cqw);  
     
    opacity: 0.7;
 pointer-events: auto; 
    gap: 2cqw;                               
    justify-content: center;
    align-content: start;
    width: 100%;
}

/* マス目（ドット）の個別スタイル設定（サイズは上のグリッドが自動決定） */
.nc-dot-cell {
    width: 100%;           /* グリッドの枠いっぱいに広げる */
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #e0e0e0; /* 枠線の太さは1pxを維持してシャープさを担保 */
    border-radius: 1px;
}

/* データが存在する場合の点灯色 */
.nc-dot-cell.is-active {
    background-color: #c493e0;
    border-color: #eac4ff;
    
        opacity: 0.65;

    
}

/* ============================================
      3行 設定表示 
   =========================================== */

/* 外枠レイヤー */
#nc-config-status-layer {
    position: absolute;
    top: 12px;
    right: 10px;
    
    width: 81px;
    height: 60px;
    
    z-index: 2;
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;     align-items: flex-start;       
    padding: 5px 5px 3px 3px;            
    pointer-events: auto;          
    container-type: inline-size;

    
    border-radius: 8px;
    border: 1px solid #fcccc9; 
            opacity: 1;

}

#nc-config-status-layer::after {
    content: "";
    position: absolute;
    inset: -15px -5px; 
    background: transparent; 
}





/* 3項目共通のテキスト基本スタイル */
.nc-cfg-text {
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-weight: bold;
    line-height: 1.2;
    width: 100%;
    white-space: nowrap;          
}

/* ------------------ */
/* 【個別調整エリア】3項目のサイズ・色をここから別々に自由に変更できます */
/* -------------------------------- */

/* 1行目：閾値設定（例：外枠の横幅の11.5%の文字サイズ、落ち着いた黒） */
.cfg-row-1 {
    font-size: 13px;
    color: #333333;
}

/* 2行目：音域設定（例：1行目と同じサイズ、少し色を変える等の実験が可能） */
.cfg-row-2 {
    font-size: 13px;
    color: #333333;
}

/* 3行目：上限設定（例：1行目と同じサイズ、グレー寄りにする等の実験が可能） */
.cfg-row-3 {
    font-size: 13px;
    color: #333333;
}


/* ミニ測定ボタン） */
#vis-internal-mic-btn {
    position: absolute;
    
    top: 200px;
    right: 25px;
    
	width: 88px;
    
    z-index: 3;
	letter-spacing: 3px; 
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    
   	padding: 2px 8px; 
	color: #222; 
	border-radius: 14px; 
	background: #f9f9f9; 
	font-weight: bold; 

	box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #aaa;
    pointer-events: auto;
 

    -webkit-appearance: none;       
    appearance: none;
    -webkit-tap-highlight-color: transparent; 
    touch-action: manipulation;     
    user-select: none;               
    -webkit-user-select: none;
}

#vis-internal-mic-btn::after {
    content: "";
    position: absolute;
    inset: -5px -5px; 
    background: transparent; 
}


#vis-internal-mic-btn.is-running {
    background-color: #ffe8e8;  
    border-color: #fcfcf9;
    color: #000;
}



/* 保存されました。 */

@keyframes fadeInOutModal {
    0%  { opacity: 0; }
    5%  { opacity: 1; } 
    70% { opacity: 1; } 
    100%{ opacity: 0; } 
}

/* 通常時非表示 */
.scan-warn-panel {
    display: none;
}

.scan-warn-panel.is-active {
    display: block;      
    position: absolute;   
    z-index: 3;         
    top: 150px;     
    
    /* ─── 左右センター配置 ─── */
    left: 50%;     
    transform: translateX(-50%); 
    /* ─────────────── */    
    
    padding: 5px 10px;    
    border-radius: 11px;   

    /* 外観・デザイン（ご指定通り固定） */
    background-color: #cebff7;
    color: #111111;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;  
    
    overflow: hidden;      
    text-overflow: ellipsis; 

    /* アニメーションのみ変更 */
    animation: fadeInOutModal 3.0s forwards ease-in-out;
}

/* ====================================
   キャッチ感度スライダー UIスタイル定義
  ==================================== */ 

.config-row-slider {
    position: absolute; 
    text-align: center;
    font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    
  width: 100%;      
    width: 350px; 
    
    top: -87px;      
    /* ▼ 左右中央配置のための修正 */
    left: 50%;
    transform: translateX(-50%);
    /* ▲ ここまで */
    
    z-index: 1; 
   
    touch-action: none;
    overscroll-behavior: contain;
}


.config-row-slider-label {
    position: relative;
    top: 8px; 
  /* ▼ 左右中央配置のための修正 */
    left: 50%;
    transform: translateX(-50%);
    /* ▲ ここまで */
       
    font-size: 14px;
    font-weight: normal;
    color: #777;
    display: block;
    margin-bottom: 0px;
     z-index: 1; 
  
    user-select: none;
    -webkit-user-select: none;
}
.config-row-slider-label-a {
    position: absolute;
    top: 66px; 
    left: 94px; 
    
    font-size: 14px;
    font-weight: normal;
    color: #555;
    display: block;
    margin-bottom: 0px;
     z-index: 1; 
  
    user-select: none;
    -webkit-user-select: none;
}

/* 全体を横一列に並べるコンテナ */
.sens-flex-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fcfcfa1;
    padding: 2px 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* 左右の網目画像ボタン共通 */
.sens-mesh-button {
    position: relative; 
    width: 40px;
    height: 40px;
    padding: 0px;
    border: 0px solid #fff;
    background-color: transparent; 
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.sens-mesh-button::after {
    content: "";
    position: absolute;
    inset: -8px -5px; 
    background: transparent; 
}





.sens-mesh-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
 filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.35)); 
   pointer-events: none;
    -webkit-touch-callout: none;
}

/* 中央の白地目盛りエリア */
.sens-scale-area {
    position: relative;
    top: 0px; 
    width: 220px;
    height: 30px;
    background-color: #ecece1;
    margin: 0 10px;
    cursor: pointer;
    z-index: 2;     
   
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.sens-scale-area::after {
    content: "";
    position: absolute;
    inset: -8px -0px; 
    background: transparent; 
}

/* 中央を貫通する1本の黒い横線 */
.sens-center-line {
    position: absolute;
    top: 20px;
    left: 10px;
    right: 10px;
    height: 1px;
    background-color: #000000;
}

/* 15本の短い縦線（目盛り）を並べる箱 */
.sens-ticks-container {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

/* 短い縦線（目盛り）そのもののデザイン */
.sens-tick-line {
    width: 1px;
    height: 8px;
    background-color: #000000;
}

/* マークが動く範囲の枠 */
.sens-pointer-wrapper {
    position: absolute;
    top: 0;
    left: 10px;
    width: calc(100% - 20px);
    height: 100%;
    pointer-events: none;
}

/* マークボタン（▼と数字）を包む可動パーツ */
.sens-knob-container {
    position: absolute;
    top: -22px;
    left: 21.4%; /* 初期値 */
    width: 16px;
    height: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.1s ease;
    
     touch-action: none;
}

/* マークの直上に追従表示されるステップ数値 */
.sens-number-popup {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 1;
    margin-top: 3px;
    margin-bottom: 0px;
    padding: 0 2px;
    border-radius: 2px;
    
    
    user-select: none;
    -webkit-user-select: none;
}

/* 指針「▼」本体 */
.sens-pointer-triangle {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 16px solid #0000ef;
    margin-top: 0px;
margin-bottom: 5px;

}

/* ━━━━━━━━━━━━━━━━━━
   💡【新設】 自動補正ボタン
   ━━━━━━━━━━━━━━━━━━━━━ */
.btn-auto-cal {
   
    position: absolute;
    bottom: -31px;          
    left: 4px;        
    z-index: 2;     

    touch-action: manipulation;
    pointer-events: auto;
    -webkit-appearance: none; 


    font-size: 14px;
    font-weight: bold;
    padding: 3px 3px;
    background-color: #f2f2f2; 
    color: #000;
    border: 1px solid #888;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 6px #bbb; /* 立体感用の下影 */
    transition: background-color 0.1s ease;
}




.btn-auto-cal::after {
    content: "";
    position: absolute;
    inset: -8px -1px; 
    background: transparent; 
}

/* ボタンを押した瞬間の視覚フィードバック（iOSでも心地よく沈む演出） */
.btn-auto-cal:active {
    background-color: #1e7b1e;
    transform: translateY(2px);
    box-shadow: 0 1px 0 #155d15;
}





/* ━━━━━━━━━━━
   💡【新設】時限式 解析ログスタイル
   ━━━━━━━━━━━━━━━━━ */
.analysis-row-flash {
    position: absolute;
    top: -316px;          
    
    /* 🔻 左右センターにするための記述 🔻 */
    left: 50%;
    transform: translateX(-50%); 
    
    z-index: 3;   
    height: 26px;
    line-height: 1.5;
    width: 77%;
    max-width: 450px;
    margin: 10px auto;
    padding: 4px 2px 2px 2px;
    font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    box-sizing: border-box;
    border-radius: 4px;
    /* iOSでの背景色のカクつきを防ぐ滑らかな変化補正 */
    /* ⚠️ transformを追加してアニメーションの干渉を防ぐ */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0s;
}


/* 状態A：1秒目の「解析中」を演出する警告オレンジ色 */
.cal-state-processing {
    background-color: #;
    border: 0px solid #ffcc00;
    color: #000;
}

/* 状態B：2秒目の「確定・保存成功」を演出する安全な深緑色 */
.cal-state-success {
    background-color: #;
    border: 0px solid #bbf7d0;
    color: #000;
}



/*スリープ防止文字表示 */


#slStatusContainer {
  position: absolute;
  top: 7px;
  left: 255px;
  z-index:2;
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
  font-size: 13px;
  font-weight: bold;
}
/* 準備中（灰色） */
.sl-ready { color: #444; }
/* 緑色の常時点灯 */
.sl-green-active { color: #427faa; }
/* 赤色の常時点灯 */
.sl-red-blink { color: #444; }

/* ─── 修正：より小さく、大げさにしない白黒モーダル構造 ─── */
#slErrorModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.01); /* 背景の闇を薄くして圧迫感を軽減 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.sl-modal-content {
  background-color: #ffffff; /* 【変更】白背景 */
  color: #333333;            /* 【変更】濃いグレー（黒文字） */
  padding: 18px;             /* 【変更】余白を削ってコンパクト化 */
  border-radius: 6px;        /* 【変更】角丸をややシャープに */
  max-width: 80%;
  width: 290px;              /* 【変更】横幅を380pxから290pxへ大幅縮小 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.15); /* 影も薄くシンプルに */
  border: 1px solid #dddddd; /* 【変更】目立たない薄い境界線 */
  text-align: center;
}
.sl-modal-content h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #111111;            /* 【変更】タイトルも強い赤から通常の黒へ */
  font-size: 15px;           /* 【変更】文字サイズを縮小 */
}
.sl-modal-content p {
  font-size: 12px;           /* 【変更】文字サイズを縮小 */
  line-height: 1.4;
  margin: 0 0 16px 0;
  text-align: left;
}
.sl-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;                  /* 【変更】ボタンの隙間を狭く */
}
.sl-btn-main {
  background-color: #333333; /* 【変更】ボタンも赤から落ち着いた黒（ダークグレー）へ */
  color: #ffffff;
  border: none;
  padding: 8px;              /* 【変更】ボタン自体を小さく上下を詰める */
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-size: 15px;           /* 【変更】文字サイズを縮小 */
  transition: background-color 0.2s;
}
.sl-btn-main:hover {
  background-color: #555555;
}
.sl-btn-sub {
  background-color: transparent;
  color: #666666;            /* 【変更】文字色を少し濃くして視認性を確保 */
  border: 1px solid #cccccc; /* 【変更】境界線を明るいグレーへ */
  padding: 6px;              /* 【変更】コンパクト化 */
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;           /* 【変更】文字サイズを縮小 */
}
.sl-btn-sub:hover {
  background-color: #f5f5f5;
}



.black-to-white {
  width: 100%;             /* 横幅（必要に応じて調整してください） */
  height: px;           /* 高さ（必要に応じて調整してください） */
  background: linear-gradient(to bottom, #ffffff, #aa9ed3);
}

.cw{
color: #fff;
}



/* =====
   1. パソコン用のスタイル
   =========== */

/* セクション全体の背景（横幅は100%） */
.section-features {
	padding: 20px 20px;
	background-color: #f0f0e6; 
	box-sizing: border-box; /* 内側の余白が外にはみ出さない */
}

/* 3つの項目を綺麗に並べる（PCでは横並び） */
.features-grid {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* 各カードの幅調整と装飾 */
.feature-item {
	flex: 1;
	background: #ffffff;
	padding: 20px 20px;
	border-radius: 8px; 
	box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
	box-sizing: border-box;
}

/* 数字（ step01, 02, 03）の装飾 */
.feature-num {
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	font-size: 23px;
	font-weight: 300; 
	color: #073fb2; 
	line-height: 1;
}

/* 説明文の文字色 */
.txt-muted {
	color: #222 !important;
    padding: 10px 5px;
	line-height: 1.6;
	font-size: 14px;
	
}


.pt5z {
    padding-top: 15px ;
	
}




.max-w800 { 
	max-width: 800px; 
	margin: 0 auto; 
	width: 100%; 
  padding: 18px;
	box-sizing: 
	border-box; 
	}


.max-w1000 {
 max-width: 1000px; 
 margin: 0 auto; 
 width: 100%; 
padding: 7px 10px  ;
 box-sizing: 
 border-box; 
 }

.bg-gray { background-color: #fff; }


/* jis数値 */
.evidence-grid {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.evidence-card {
	flex: 1;
	background: #f7f7f7;
	padding: 20px 15px 10px 15px;
	border-radius: 15px;
	border: 0px solid #eef0f2;
	box-sizing: border-box;
}




/* 2連カード */
.security-flex {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}
.security-card {
	flex: 1;
	background: #efefef;
	padding: 20px 10px;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.02);
	box-sizing: border-box;
}


/* --- パソコン用エリアの末尾などに貼り付け --- */
.noise-layout-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 18px;
  max-width: 800px;
  margin: 0 auto;
}

/* 各ボックス：枠線を少し太くし、全体をより明快に */
.noise-layout-item {
  box-sizing: border-box;
  flex: 0 0 calc(50% - 12px);
  background-color: #f8fafc;
  border: 2px solid #cbd5e1;   /* 境界線をよりクッキリしたグレーに変更 */
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 見出し：完全に真っ黒で、最も力強く */
.noise-layout-item h2 {
  font-size: 1.08rem;
  font-weight: 800;            /* より太く */
  color: #000000;              /* 完全な真っ黒 */
  margin: 0 0 5px 0;
  line-height: 1.4;
}

/* 本文テキスト：【ここを修正】誰でもハッキリ読める濃い色に */
.noise-layout-item p {
  font-size: 1rem;             /* 文字サイズもわずかに大きく調整 */
  margin: 5px 5px 10px 5px;
  color: #111111;              /* 非常に濃い墨色（真っ黒に近い） */
  font-weight: 500;            /* 文字の線も少しだけ太く見せる */
  line-height: 1.5;
}

/* 注記（※印のテキスト） */
.noise-layout-item p.noise-layout-note {
  font-size: 0.9rem;
  color: #2d3748;              /* 注記の文字も濃く変更 */
  margin: 4px 0 0 0;
  background-color: #f1f5f9;   /* 背景のグレーも少し濃くして文字とのメリハリを強化 */
  padding: 10px 14px;
  border-radius: 6px;
}

/* 画像表示エリア */
.noise-layout-img-box {
  box-sizing: border-box;
  background-color: #f8fafc;
  border: 0px solid #cbd5e1;
  padding: 10px 10px;
  text-align: center;
  color: #475569;              /* 画像という文字も濃く */
  margin-bottom: 20px;
  border-radius: 8px;
  font-weight: bold;
}

/* バッジ（ノイズキャッチャー機能） */
.noise-layout-badge {
  display: inline-block;
  background-color: #efefef;   /* 背景をあえて濃い紺色に変更 */
  color: #000;              /* 文字を白にしてパッと目立たせる */
  padding: 2px 10px 0px 10px;
  font-size: 14px;
  border-radius: 2px;
  border: 1px solid #777;
  margin-bottom: 6px;
  font-weight: bold;
}


/* マイクセクション全体のコンテナ */
.mic-info-container {
  max-width: 600px; 
  margin: 5px auto;
  background-color: #ffffff;
  border: 0px solid #cbd5e1;
  border-radius: 12px;
ム感を演出 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* マイク 大見出し */
.mic-info-container h2 {

  color: #000000;
  
  margin: 0 0 5px 0;
  border-bottom: 2px solid #1e293b; 
}

/* マイク 本文テキスト */
.mic-info-container p {
少し大きく */
  margin: 0 0 18px 0; 
  
  color: #080808;
  
  line-height: 1.8;   
}

/* マイク 注意書き（※印） */
.mic-info-container p.mic-info-note {

  color: #000;
  
  background-color: #f1f5f9;
  border-radius: 6px;
  margin: 5px 0 10px 0;
  
  padding: 10px 10px;
  
  
}







/* 画像表示エリア（縦並びの中に自然に溶け込むサイズ） */
.mic-info-img-box {
  box-sizing: border-box;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  
  color: #475569;

  padding: 20px 16px;
  
  margin: 15px 0;
  border-radius: 8px;
}



/* --メタデータ--- */
:root {
  /* 💡 文字の大きさと行間の調整 */
  --size-title: 15px;        /* タイトル */
  --size-heading: 13px;      /* ■大見出し */
  --size-text: 12px;         /* 一般のテキスト */
  
  --line-height-base: 1.3;   /* 全体の行間（1.5倍の意味） */
  --line-height-menseki: 1.6;/* 免責事項の行間 */

  /* 💡 マージン（余白）の調整エリア */
  --margin-block: 15px;      /* ブロック（塊）同士の上下のすき間 */
  --margin-item: 4px;        /* 1行ごとの上下のすき間 */

  /* 文字の色 */
  --color-dark: #111;
  --color-gray: #111;
}

/* 全体の外枠（A4の幅に合わせ、パディングで内側に余白を作ります） */
.pdf-container {
  max-width: 845px;
  margin: 0 auto;
  padding: 26px;
  background-color: #ffffff;
  font-family: sans-serif;
  color: var(--color-gray);
  line-height: var(--line-height-base);
}

/* 罫線のスタイル */
.pdf-border-line {
  font-size: 10px;
  color: var(--color-gray);
  margin: 5px 0;
  overflow: hidden;
  white-space: nowrap;
}

/* タイトルのスタイル */
.pdf-main-title {
  font-size: var(--size-title);
  font-weight: bold;
  color: var(--color-dark);
  margin: 10px 0;
  text-align: center;
}

/* 左右2列に並べるための設定（マージンで制御） */
.pdf-columns-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 40px; /* 左列と右列のあいだのすき間 */
  margin-top: var(--margin-block);
}

/* 左列と右列（それぞれ均等な幅にします） */
.pdf-column {
  flex: 1;
}

/* 各ブロック（■測定環境 など）のまとまり */
.pdf-section-block {
  margin-bottom: var(--margin-block);
}

/* ■大見出しのスタイル */
.pdf-section-block h3 {
  font-size: var(--size-heading);
  color: var(--color-dark);
  margin: 0 0 var(--margin-item) 0;
}

/* 1行ごとのテキストのスタイル */
.pdf-text-line {
  font-size: var(--size-text);
  margin: 0 0 var(--margin-item) 0;
}

/* 免責事項（改行をそのまま維持する設定） */
.pdf-menseki-box {
  font-size: var(--size-text);
  line-height: var(--line-height-menseki);
  white-space: pre-wrap; /* 文章内の改行をそのまま有効にします */
  margin-top: var(--margin-block);
}




.bgg10 {
	background:#fceddb;
 }
.bgg20 {
	background:#e8f9f2;
 }
.bgg30 {
	background:#FCF2E8;
 }



.ka1 {
	color:#703422;
}
.ka2z {
	color:#2338bc;
}

.ka3 {
	color:#654302;
}

.ka4 {
	color:#0B237B;
}


.ka5 {
	color:#0c6607;
}


.ka6 {
	color:#993300;
}


.ka7 {
	font-size:1.1rem;	
	color:#6e4d01;
}


.tit4 {
	display:inline-block;
	border-bottom:2px solid #f4b2ea; 
	padding-bottom:1px;
}




.notice-box {
	background-color: #f9f9f9; 
	border-left: 4px solid #ccc; 
	margin: 15px 0;
	
	padding : 10px 7% 30px 7%;

}


.notice-box {
	background-color: #f9f9f9; 
	border-left: 4px solid #ccc; 
	margin: 15px 0;
	
	padding : 10px 7% 30px 7%;

}

.notice-box2 {
	background-color: #fff; 
	border: 1px solid #ccc; 
	margin: 5px 0;
  border-radius: 16px;
	
	padding : 20px 2% 0px 2%;

}



.notice-box3 {
	background-color: #f8fafc; 
	border: 0px solid #ccc; 
	margin: 5px 0;
  border-radius: 16px;
	
	padding : 0px 2% 0px 2%;

}







/* --- Noise-Evi 利用規約モーダル最終確定スタイル --- */
.kiyaku-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
}
.kiyaku-modal-window {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 左右も画面いっぱいにフィット */
    max-width: 600px;
    height: 100%; /* ★上下幅を上から下まで表示に変更 */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kiyaku-modal-header {
    background-color: #f2f2f2;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    text-align: center; /* ★表題の「利用規約」を上部の左右センター表示に変更 */
}
.kiyaku-modal-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin: 0;
    display: inline-block;
}
.kiyaku-modal-body {
    padding: 20px 20px 80px 20px; /* 下部にボタンが被らないよう余白を確保 */
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    text-align: left;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}
.kiyaku-modal-body h4 {
    margin: 20px 0 8px 0;
    font-size: 15px;
    color: #228b22;
    border-left: 4px solid #228b22;
    padding-left: 8px;
}
.kiyaku-modal-body p { margin: 0 0 12px 0; }

/* ★×ボタンを最下部の左右中央に固定するためのエリア */
.kiyaku-modal-footer {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center; /* 左右中央寄せ */
    align-items: center;    /* 上下中央寄せ */
    z-index: 10000;
}
/* ★40pxの大きい×ボタンの専用装飾 */
.kiyaku-modal-close-btn-large {
    background: none;
    border: none;
    font-size: 40px; /* ★40pxくらいの大きいものに変更 */
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.2s;
}
.kiyaku-modal-close-btn-large:hover {
    color: #cc0000; /* ホバー時に分かりやすく赤色に変化 */
}



/* =======================================
   Noise-Evi テスト用ボタン
   =========================== */

/* 1000Hz  ボタン  */
.test-button-1khz {
    position: absolute;
    
	  top: 95px;        
      right: 60px;   
                   
    z-index: 1;       
    
 	border: 1px solid #999; 
   
   background-color: #edede2;       
   width: 120px;
   
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    padding: 7px 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

/* 500Hz ボタン */

.test-button-pn {
    position: absolute;
    
    top: 95px;         
    left: 70px;
 
    
 	border: 1px solid #999; 
        
    z-index: 1;  
   background-color: #edede2;       
       
   width: 120px;
   
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    padding: 7px 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}


.test-button-1khz.playing,
.test-button-pn.playing {
    background-color: #933328; 
    color: #ffffff;
}

/* ==========================
       テストコメント
   =========================== */

.test-modal-overlay {
    display: none;       
    position: absolute;  
    
    top: -60px;          
    
    /* 🔻 左右センターにするための記述 🔻 */
    left: 50%;
    transform: translateX(-50%);    
    
           
    z-index: 9999;       
 width: 350px; 
     height: auto;
    background-color: transparent; 
    pointer-events: none; 
}

.test-modal-content {
    background-color: #ffffff; 
    color: #68231c;            
    padding: 20px 15px;
    border-radius: 18px;
    
    max-width: 90%;  
            
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    white-space: pre-line;     
    pointer-events: auto;     
}















/* ==========================================
   レスポンシブ・イメージマップ用の設定
   ========================================== */


.responsive-map-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; 
    
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}


/* 2. マップ全体の親要素（中身をセンターに寄せる設定を追加） */
.map-container {
    width: 100%;
    position: relative;
    text-align: center; /* ★中身の要素をセンターに寄せる */
}






/*================================================
 *  スライドショー
 ================================================*/
/* スライドショー */
.slide {
	display:none;
	position:relative;
	overflow:hidden;
	margin:5px 0;
}

.slidePrev {
	position:absolute;
	cursor:pointer;
	z-index:12;
}

.slideNext {
	position:absolute;
	cursor:pointer;
	z-index:12;
}

.slidePrev img {
	position:absolute;
	width:50px !important;
	height:60px !important;
}

.slideNext img {
	position:absolute;
	width:50px !important;
	height:60px !important;
}

.slideInner {
	position:relative;
	margin:0 0 5px 0;
	padding:0;
}
.slideInner li {
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}
.slideInner li img {
	margin:0 5px;
	padding:0;
}

.filterPrev {
	position:absolute;
	left:0;
	opacity:0.5;
	filter:alpha(opacity=50);
	background-color:#fff;
}

.filterNext {
	position:absolute;
	right:0;
	opacity:0.5;
	filter:alpha(opacity=50);
	background-color:#fff;
}

.controlNav {
	position:relative;
	float:left;
	left:50%;
}
.controlNav span {
	position:relative;
	left:-50%;
	float:left;
	margin:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	width:10px;
	height:10px;
	overflow:hidden;
	background:#ccc;
	text-indent:-9999px;
	vertical-align:middle;
}
.controlNav span:hover {
	background:#999;
	cursor:pointer;
}
.controlNav span.current {
	background:#900000;
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	.inner {
		width:100%;
	}
a {
	color:#000;
	text-decoration:none ;
}

.footmenu a {
	color:#000;
	text-decoration:underline;
}

.footmenu_a a {
	color:#000;
	text-decoration:underline;
}

.footmenu_b a {
	color:#000;
	text-decoration:underline;
}

	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}

	footer {
		width:100%;
	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	.lock {
		overflow:hidden;
	}

	header {
		z-index:12;
		box-sizing:border-box;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:10px 10px;
	}

	.summary {
		position:relative;
		top:auto;
		right:auto;
		margin-top:8px;
	}

	#main {
		float:none;
		width:100%;
		margin:0;
		padding:0;
	}
	h4 {
	padding : 10px 10px 10px 10px;
 	width: 95%;
	}

h4 a {
    display: block; 
}


	h5 {
 	width: 90%;
	padding : 5px 0px 0px 10px;
	}

	h6 {
 	width: 80%;
	padding : 5px 0px 0px 10px;
	}


	#sub {
		float:none;
		width:100%;
		margin:0;
		padding:0;
	}

	nav {
		background:#E1E1DE;
	}
	nav ul {
		margin:0;
		padding:0;
		}

	nav .inner > ul {
		z-index:12;
		overflow:auto;
		position:fixed;
		top:53px;
		right:0;
		width:100%;
		height:88%;
		height:-webkit-calc(100% - 53px);
		height:calc(100% - 53px);
	}
	nav li {
		position:relative;
		width:100%;
		float:none;
		margin:0;
		text-align:left;
		list-style:none;
		border-bottom:1px solid #C8C8C3;
		background:#FFFFFF;
	}

	nav li:first-child {
		border-top:0;
	}
	nav li:last-child {
		border-bottom:0;
	}

	nav li a {
		display:block;
		padding:10px 30px;
		color:#111111;
		text-decoration:none;
		background:#FFFFFF;
	}
	nav li a:hover {
		color:#111111;
		background:#C0C6E8;
	}
	nav ul ul {
		display:none;
		position:relative;
	}
	nav li li a {
		box-sizing:border-box;
		width:100%;
		padding:10px 30px 10px 50px;
		text-align:left;
	}

	nav li li li a {
		padding:10px 30px 10px 70px;
	}

	.subnav > a:before {
		display:block;
		content:"";
		position:absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top:20px;
		right:30px;
		width:10px;
		height:10px;
		margin-top:-5px;
		background:#A2A288;
	}
	.subnav > a:after {
		display:block;
		content:"";
		position:absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top:20px;
		right:30px;
		width:10px;
		height:10px;
		margin-top:-10px;
		background:#FFFFFF;
	}
	.subnav a:hover:after {
	  background:#C0C6E8;
	}

	.active > a:before {
		margin-top:0;
	}
	.active > a:after {
		margin-top:5px;
	}

	.gnav {
		display:none;
	}

	#spMenu {
		display:block;
		z-index:12;
		position:fixed;
		top:10px;
		right:10px;
	}
	#spMenu:hover {
		cursor:pointer;
	}

	#navBtn {
		display:inline-block;
		position:relative;
		width:30px;
		height:30px;
		border-radius:5%;
		background:#E1E1DE;
	}
	#navBtnIcon {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:14px;
		height:2px;
		margin:-1px 0 0 -7px;
		background:#A2A288;
		transition:.2s;
	}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display:block;
		content:'';
		position:absolute;
		top:50%;
		left:0;
		width:14px;
		height:2px;
		background:#A2A288;
		transition:0.3s;
	}
	#navBtnIcon:before {
		margin-top:-6px;
	}
	#navBtnIcon:after {
		margin-top:4px;
	}
	#navBtn .close {
		background:transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top:0;
	}
	#navBtn .close:before {
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
	}
	#navBtn .close:after {
		transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
	}

	.col_one_one ul {
		margin:0 0 0 0;
	}
	.col_one_one li {
		width:100%;
	}
	.col_one_one li:nth-child(2n+1) {
		clear:both;
	}
	.col_one_one li img {
		width:100%;
		margin:0 0 2.5% 0px;
	}
	
	.col_two_one ul {
		margin-right:0;
	}
	.col_two_one li {
		width:100%;
	}
	.col_two_one li:nth-child(2n+1) {
		clear:both;
	}
	.col_twl_one ul {
		margin-right:0;
	}
	.col_twl_one li {
		width:100%;
		margin-right:2%;
	}
	.col_twl_one li:nth-child(2n+1) {
		clear:both;
	}
	
	.col_twl_one li img {
	margin:0 6% 0 0px;
	}
	
 .col_three_one {
	text-align : left;
}
	.col_three_one ul {
	margin:1% 1% 0 0%;
	padding : 0px 10px 0px 8px;
     border-top: solid 0px #bbb;
   border-bottom: solid 0px #bbb;
	}
	.col_three_one li {
	width:100%;
	padding : 8px 0px 0px 8px;
	margin:10px 3% 10px 0%;
	}
	.col_three_one li:nth-child(3n+1) {
		clear:both;
	}
	.center {
	text-align:center;
	padding:0 0 10px 0px;
}
	.img_p_a {
	padding : 10px 0px 0px 0px;
}
	.divlink_le {
	padding : 0 0 0 5%;
	background-color : #fff;
	float :left;
	margin-right : 0px;
	margin-left : 0px;
}
.pd_k {
	margin: 15px 0px 10px 0px;
	padding : 0px 0px 8px 15px;
	border-bottom:2px solid #555;
}
.pd_o {
	margin: 5px 0px 0.5em 0px;
	padding : 0px 0px 10px 2%;
	border-bottom:1px dotted #555;
}
.p_g {
	padding : 0px 6% 0px 0px;
	font-size : 0.9375rem;
	font-weight: bold;
}
.under_oooo {
	padding : 10px 0px 10px 0px;
	font-size : 0.8125rem;
	text-decoration:underline;
	background-color : #F3F3F0;
}
.h_fiv {
	margin: 20px 0px 0px 0px;
	padding : 10px 0px 10px 0px;
	text-align : center;
	font-weight:bold;
	font-size : 0.875rem;
	text-decoration:underline;
	background-color : #F3F3F0;
}
.pd_cz {
	border-bottom:2px solid #ccc;
}
.h_fiva {
	padding : 5px 0px 20px 0px;
	font-size : 0.875rem;
	background-color : #f9f9f6;
}
.pd_ccbb {
	padding : 15px 0px 15px 0px;
}


.center5 {
	width:100%;
}

.pd_cc {
	padding : 15px;
}


.pd_cc8 {
	padding : 20px 0px 25px 0px;
	margin : 0px 0px 15px 0px;
}

.pl5 {
	padding-left : 8px;
}
.pl10 {
	padding-left : 10px;
}
.pl10a {
	padding-left : 5px;
}
.pl10b {
	padding-left : 40px;
}
.pl15 {
	padding-left : 15px;
}
.pl15a {
	padding-left : 0px;
}
.pl20 {
	padding-left : 10px;
}
.pl25 {
	padding-left : 10px;
}
.pl25a {
	padding-left : 25px;
}
.pl35 {
	padding-left : 10px;
}
.pl35a {
	padding-left : 25px;
}
.pl45 {
	padding-left : 10px;
}
.pl55 {
	padding-left : 10px;
}
.pl65 {
	padding-left : 10px;
}
.pl85 {
	padding-left : 10px;
}
.pl95 {
	padding-left : 10px;
}
.pl95 {
	padding-left : 10px;
}
.pl105 {
	padding-left : 10px;
}
.pl115 {
	padding-left : 10px;
}
.pl125 {
	padding-left : 10px;
}

.pl135 {
	padding-left : 10px;
}

.pl135a {
	padding-left : 0px;
}

.pl145 {
	padding-left : 10px;
}

.pl155 {
	padding-left : 10px;
}

.pt15a {
	padding-top : 0px;
}


.pt125 {
	padding-top : 0px;
}
.hogo {
	line-height:1.8;
	font-weight:bold;
	padding : 15px 15px;
}
.q106 {
	position:relative; top:-67px; left:150px
}


.mt15a {
	margin-top : 20px;
}
.mt20a {
	margin-top : 20px;
}
.mt25a {
	margin-top : 20px;
}
.mt30a {
	margin-top : 20px;
}
.mt35a {
	margin-top : 20px;
}
.mt40a {
	margin-top : 20px;
}
.mt45a {
	margin-top : 20px;
}
.mt50a {
	margin-top : 20px;
}
.mt55a {
	margin-top : 20px;
}
.mt60a {
	margin-top : 20px;
}

.mt80a {
	margin-top : 20px;
}

.q111 {
	visibility :hidden;
}

.q112 {
	visibility :hidden;
}

.q115 {
	visibility :visible;
}

.q116 {
	visibility :visible;
}
.pt50a {
	padding-top : 10px;
}
.pt40a {
	padding-top : 10px;
}
.pt40b {
	padding-top : 20px;
}
.pt50b {
	padding-top : 10px;
}
.pt30a {
	padding-top : 10px;
}
.pt_xa {
	text-align:center;
	padding-top : 0px;
}

.plssa {
	padding-left : 30px;
}
.plss {
	padding-left : 20px;
}
.pt10x {
	padding-top : 10px;
}

.pr30a {
	padding-right : 30px;
}
.pr30aa {
	padding-right : 0px;
	margin-right : 0px;
}
.mt30a {
	margin-top : 10px;
}
.lt1x {
	border-top:0px solid #333;
}


.pub10a {
	border-bottom:2px dotted #333;
	padding-bottom : 10px;
	margin-bottom : 20px;
}


.div5 {
	width : 98%;
    margin: 10px auto 0 auto;
    padding: 20px 0px 0px 0px;
	border-top:4px solid #623A01;
	border-bottom:4px solid #623A01;
}

.tacx {
	text-align:right;
}







.pic01{
	width:65% !important;
}
.pic01a{
	width:100% !important;
}
.pic01b{
	width:100% !important;
}

.pic01bb{
	width:85% !important;
}

.pic01bbb{
	width:90% !important;
}


.pic02{
	width:100% !important;
}

.pic02a{
	width:95% !important;
}

.pic02aa{
	width:100% !important;
}

.pic02b{
	width:45% !important;
}

.pic02bb{
	width:24% !important;
}

.pic02c{
	width:100% !important;
		margin-right:10%;

}

.pic03{
	width:100% !important;
}



.lb1a {
	border-bottom:1px solid ;
}


.bbr br{
  display:inline;

}

.brr br{
  display:none;

}



.fa1{
  display:none;
}

.f12 {
	font-size : 0.875rem;
	line-height:1.3;
}




.bbb br{
  display:inline;

}



.tarx {
	text-align:center;
}
.talx {
	text-align:center;
	padding-left : 0px;

}

.w350{
	width :98% ;
}
.w400{
	width :98%;
}
.w450{
	width :98%;
}
.w500{
	width :98% ;
}
.w550{
	width :98%;
}
.w600{
	width :98%;
}
.w650{
	width :98%;
}
.w700{
	width :98%;
}
.w750{
	width :98%;
}
.w800{
	width :98%;
}
.w850{
	width :98%;
}


.lb4a {
	border-bottom:0px solid ;
}

.lr {
	border-right:0px solid #eee ;
	border-bottom:5px solid #eee ;
}

.lrx {
	border-right:0px solid #eee ;
	border-bottom:5px solid #eee ;
}

.lrr {
	border-right:0px solid #eee ;
	border-bottom:5px solid #eee ;
}





.lt1xx {
	border-top:1px solid #aaa;
}





audio {
	width: 160%;
	height:30px;
margin-bottom : 20px;
    position:relative; top:0px;  right:50%;
	opacity: 1.0;

}

.slim-player {
	width: 160%;
	height:28px;
margin-bottom : 18px;
    position:relative; top:0px;  right:50%;
	opacity: 1.0;

}

.slim-vol-range {
   visibility:none;
    width: 5px;
    accent-color: #fff;
    cursor: pointer;
}


.time-display {
    font-size: 11px;
}

.slim-loader {
    margin: 5px 0px 10px 20px;
}






a img {

  pointer-events: none; /* タップの反応を親の<a>タグに任せる（誤動作防止） */
}



.pt_x {
	padding-top : 40px;
}

.pb_x {
	padding-bottom : 35px;
}




.wi1 {width: 41%;	
}
.wi2 {width: 6%;	
}
.wi3 {width: 6%;	
}
.wi4 {width: 47%;	
}



.i01 {
  width: 110%;
  aspect-ratio: 400/250;
  object-fit: cover;
}
 
td {
  border-bottom: 1px solid #333;

}


.f15d {
	font-size : 0.8125rem;
	line-height:1.1;
}


.o_b {
 	color:#000;
	margin : 10px 25px 10px 0px;
	width : 22px;
	height :22px;
}


.bga { 

 background-image:url("../mask/img/bga.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bgb { 

 background-image:url("../mask/img/bgb.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bgw { 

 background-image:url("../mask/img/bgw.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bg8 { 

 background-image:url("../mask/img/bg8.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bg35 { 

 background-image:url("../mask/img/bg35.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bg6 { 

 background-image:url("../mask/img/bg6.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bg2 { 

 background-image:url("../mask/img/bg2.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bg5 { 

 background-image:url("../mask/img/bg5.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }

.bg1 { 

 background-image:url("../mask/img/bg1.jpg");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;

 }






.vh {
visibility:hidden;
}

.vhh {
visibility:hidden;
	height:0px;
}



.box2 {
	height:0px;
	position:relative; top:-148px;  right:10px;
	z-index: 2;

}


.square_btn5a{
	margin : 0px 12px 13px 0px;
}
.square_btn5b{
	margin : 0px 12px 10px 0px;
}

.square_btn5c{
	margin : 0px 12px 10px 0px;
}



.box3 {
    width :295%;

}



.square_btn10{
	width: 15.625rem;
}

.square_btn10a{
	width: 18rem;
}









.w10 {
	width:90%;
}

.w11 {
	padding-left : 13%;
	width:85%;
}


.w12 {
	width:95%;
}


.w13 {
	width:55%;
	margin: 0px 5% 0px 35%;
}


.w14 {
	width:100%;
}

.w15 {
	width:100%;
}

.w16 {
	width:90%;
}


.w17 {
	width:45%;
	margin: 0px 5% 0px 35%;
}


.w18 {
	width:100%;
	margin: 0px 2% 0px 0%;
}

.w19 {
	width:95%;
	padding : 5% 1% 5% 1%;
	margin: 0px 1% 0px 0%;
}





.box1 {
	position:relative; top:175px;  right:120px;

}





.dna{
  display:inline;
}


.dan{
  display:none;
}

.dn1{
  display:none;
}
.dn2{
  display:block;
}




.f13x {
	font-size : 0.875rem;
	line-height:1.3;
}

.pl_x {
	padding-left : 1%;
}

.f15a {
	font-size : 1.1rem;
	line-height:1.4;
	font-weight:normal;
	padding-left : 2%;
	padding-top : 15%;
	padding-bottom : 2%;

}

.f12 {
	font-size : 0.8rem;
	line-height:1.17;
}

.pic_f{
	margin-bottom:0.2rem;
}


.search-list__filter-types {
  margin-left: 0%;

}


.search-list__filter-data:first-of-type {
  padding-top: 10px;
}
.search-list__filter-data + .search-list__filter-data {
  padding-top: 5px;
}

.search-list__table {
  width: 100%;
}




.divxx{
width:90% ;
	border:solid 3px #eee;
	line-height:2.0;
	margin:15px 5px 5px 15px ;
	padding:5px 5px 25px 5px ;
}

.divxx p{
  display:block;
}

.divxx br{
  display:none;
}



.lint {
	font-size:0.9375rem;
	color:#444 !important;
}

.lint1 {
	font-size:15px;
}


.lint2 {
	font-size:15px;
}


.lint3 {
	font-size:15px;
}


.modal-content {
  width: 100%;
}

.pic02d{
	width:95% !important;
    height: auto;
}

.pl_y {
	padding-left : 0px;
}

.pr_y {
	padding-right : 0px;
}


.pic_e{
	margin-top:30px;
	margin-right:10px;

}



.flex-container {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 30px;              /* アイテム間のスキマ */
}

.pic_h{
	width:97% ;
}

.square_btn11 {
    margin : 10px 20px 10px 10px;
    
}

.ii {
    font-size: 20px;
}


/* ボタンの位置指定 */
#info-btn  { top:  85px;  right: 20px; }
#info-btn2 { top: 200px; right: 20px; }

#info-btn3 { top: 340px; right: -8px; }

#info-btn4 { top: 550px; right: 7px; }
#info-btn5 { top: 700px; right: 20px; }
#info-btn6 { top: 1030px; right: 85px; }
#info-btn7 { top: 1245px; right: 20px; }
#info-btn8 { top: 513px; right: 40%; }
#info-btn9 { top: 990px; right: 25px; }
#info-btn10 { top: 165px; right: 20px; }
#info-btn11 { top: 1035px; right: 25px;  }


/* 説明文の位置 */
#info-text  { top: -25px; }
#info-text2 { top: 132px; }

#info-text3 { top: 100px; }

#info-text4 { top: 383px; }
#info-text5 { top: 370px; }
#info-text6 { top: 630px; }
#info-text7 { top: 1000px; }
#info-text8 { top: 370px; }
#info-text9 { top: 655px; }
#info-text10 { top: 100px; }
#info-text11 { top: 760px; }




/*************************/
  .overlay-window {
    height: 106px;
    
    top: 395px; 
    left: 13px;        
 }  
 
  
.libtn{

	padding: 5px 1px; 
    width: 50px;
    height:50px;
	 border-radius: 5px; 
	 padding: 2px 3px; 
	font-weight: 550; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	 
	top: 80px; 
    left: 0%;
    z-index: 1;   
 
}

.reset-b {
    margin-bottom: -15px;
    
    top: 650px; 
    right: -13px;
}

/* スキャン再生ボタン（紫） */
.btn-noise-play {
	width: 162px; 
}



  /* 指で押せる丸いリンクの共通設定 */
  .spot {
    width: 30px;
	padding: 0px 2px; 
 	font-size: 12px; 
   height: 22px;
     font-weight: bold;
   color: #000;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent; /* タップ時の青枠防止 */
  }


  .link1 { top: 80px;  left: 7px; }
  .link2 { top: 80px;  left: 52px; }
  .link3 { top: 80px;  left: 97px; }
  .link4 { top: 80px;  left: 143px; }
  .link5 { top: 80px; left: 235px; }
  .link6 { top: 80px; left: 280px; }



.e-btn {
	padding: 3px 1px; 
	min-width: 60px;

    bottom: -29px;          
    right: -8px;

}


/* 騒音測定ボタン */
.btn-mic-toggle {
	width: 175px; 
}



.noise-select{
	margin-right: 105px;	
	width: 110px; 
	padding: 0px 5px; 
}


.btn-noise-toggle {
    top: -35px;
    left: 185px;

	width: 55px; 
	height:25px;
	padding: 3px 5px 5px 5px; 
}




.fyb0 {
    top: -40px; 
    left: 68%;
}


.floating-file-btn {
    width: 25px;
    height: 20px;
    font-size: 18px;
    font-weight: 400; 
	border: 1px solid #888;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    
    /* 場所の調整用：ここをミリ単位で書き換えてください */
    top: 508px;
    left: 32px;
}


.fyb1 {
    width: 90px;
    color: #000;
    font-size: 12px;
    font-weight: 450; 
    
    /* 場所の調整 */
    top: 475px;
    left: 10px;
}

.fyb2 {
    width: 120px;
    color: #000;
    font-size: 12px;
    font-weight: 400; 
    
    /* 場所の調整 */
    top: 535px;
    left: 10px;
}

/*   N-Bandフォーカス 位置   */





#nbn-row-freq { bottom: 769px; } 
#nbn-row-mix  { bottom: 455px; }

#mask-row-vol { bottom: 360px; }


#anm-row-vol { bottom: 570px; } 



.ma_x {
  margin-top: 130px;
}


.square_btn5a1{
	margin : 0px 12px 20px 0px;
}




.square_btn8{
    /* 場所の調整 */
    bottom: 608px;
    left: -25px;
}


.senta{

    /* 場所の調整 */
    bottom: 488px;
    left: 20px;    

}


.tbk{
     
    /* 場所の調整 */
    bottom: 22px;
    left: 20px;    

}

.shh {
    /* 場所の調整 */
    top: 580px;
    left: 30px;    
    /* 追加：高さと幅を固定して文字が出ても動かないようにする */
    height: 80px; 
    width: 280px;
}


.vh {
visibility: hidden;
}


.msk01 {
    margin-bottom: -118px;
    /* 場所の調整 */
    bottom: 210px;
    left: 2px;    
}


.comparison-box {
    width: 95%; 
}




.msk {

margin:0px 0px 15px 0px;

}

#boot-trigger-wrapper {
    top: 3px; 
    left: 69%;

}

#diag-overlay {
    top: 0px;     
    right: 0%;  

}

.boot-label {
	bottom: 11px; 
	left: 0px;
}


.nb-b {
	margin-left: -20px; 
	margin-right: 4px; 
	width: 58px;
}

.set-b {
	margin-right: 13px; 
	width: 40px; 
}

.anm-b {
	font-size: 12px; 
	margin-right: 13px; 
	margin-left: 3px; 
	width: 50px; 
}

.b-3d {
	margin-right: 15px; 
	margin-left: 3px; 
	width: 45px; 
}

.reset-b {
	width: 44px; 
	
	top: 96px; 
    right: 17px;


}




.capsule-container {
  width: 290px;  
  height: 43px;  
}


#masking-mute-toggle {
    
    top: 124px; 
    right: 117px;
    
   font-size: 14px;
    padding: 1px 25px;

}

.eq-flat{
  width: 90px; 
    
    top: 260px; 
    right: 115px;
    
	padding: 0px 8px; 
}

.timer-alert-container { 
    width: 320px;
   
    top: -130px; 
    right:-20px; 
    
}

#log-save-btn {
    bottom: -45px ;    
    right: 170px ; 


}



#log-status-panel {
    font-size: 13px;
    bottom: -14px ;    
    right: 70px ;  
}



.hosei{ 
    top: 202px; 
    left: 6px; 
    
}


/* =================================
        全体コンテナAAAA
================================== */
#visualizer-db-overlay-container-a {
    
    top: 149px;
    left: 90px;
    
}


/* =================================
  スマホ用 BC dB表示 全体コンテナBBCCBRR
================================== */
#visualizer-db-overlay-container-r,
#visualizer-db-overlay-container-b,
#visualizer-db-overlay-container-c {

    width: 238px;
    height: 80px;
    top: 63px;
    left: 29px;
}


/* ============================
   r 個別  リアルタイムdB  
   ========================= */

/* 1. リアルタイムdB数値 */
#vis-current-db-num {
    top: -34px;
    right: 80px;
    font-size: 33px;
}
/* 2. リアルタイムdB単位（クラス名: now-unit） */
.now-unit {
    top: -21px;
    left: 162px;
    font-size: 21px;
}

 /* 背後スクリーン */ 
 .aa1r {
  
  top: -30px;
  left: 80px;
  
  width: 130px;
  height: 41px;
 
}




/* ============================
   B 個別デザイン・位置指定領域BBBB
   ========================= */
   
 /* 背後スクリーン */
   
.aa1a {
  top: -31px;
  left: 80px;
  width: 198px;
  height: 89px;


}

/* 3.-----------------------------
 「平穏時：」ラベル（クラス名: b-lbl） 
-----------------------------------*/
.b-lbl {
    top: 32px;
    right: 19px;
    font-size: 12px;
}

.under_db {
 text-decoration-thickness: 1.5px; 
	text-underline-offset: 6px;
}


/* 4. 平穏時音圧数値数値数値数値数値 */
.vis-b-db-num {
    top: 27px;
    right: 168px;
    font-size: 16px;
}

/* 5. 平穏時後ろの「dB」単位（クラス名: b-unit） */
.b-unit {
    top: 32px;
    left: 73px;
    font-size: 12px;
}

/*-------------------------------------------
 6. 「騒音時：」ラベル（クラス名: p-lbl） 
 ------------------------------------------*/
.p-lbl {
    top: 12px;
    left: 95px;
    font-size: 12px;
}

/* 7. 騒音時音圧数値数値数値数値数値数値 */
.vis-p-db-num {
    top: 8px;
    right: 168px;
    font-size: 16px;
}

/* 8. 騒音時後ろの「dB」単位（クラス名: p-unit） */
.p-unit {
    top: 13px;
    left: 73px;
    font-size: 12px;
}
/*-------------------------------------------
 6. 「周波数：」（クラス名: fp-lbl） 
 ------------------------------------------*/
.fp-lbl {
    top: 12px;
    left: 68px;
    font-size: 12px;
}

/* 7. 周波数  値数値数値数値数値数値 */
.vis-fp-db-num {
    top: 11px;
    right: -6px;
    font-size: 13px;
}

/* 8. 周波数「Hz」単位（クラス名: p-unit） */
.fp-unit {
    top: 13px;
    left: 245px;
    font-size: 11px;
}

/*----------------------------------------------
 9. 「音圧差：」ラベル（クラス名: d-lbl）
 --------------------------------------------- */
.d-lbl {
    top: 57px;
    left: 95px;
    font-size: 12px;
}

/* 10. 音圧差数値数値数値数値数値数値数値 */
.vis-d-db-num {
    top: 53px;
    right: 168px;
    font-size: 16px;
}

/* 11. 音圧差後ろの「dB」単位（クラス名: d-unit） */
.d-unit {
    top: 58px;
    left: 73px;
    font-size: 12px;
}

/* 12. 最高音圧部分を保存中のメッセージ文字 */
#vis-status-save-msg {
    top: 56px;
    left: 115px;
    font-size: 13px;
}











/* キャッチ条件 プルダウン */
.config-row {
    
    width: 250px; 
    
    bottom:250px;      
    left: 8px;              
}

/* 数値表示 / 非表示 */
.container-b-toggle-btn{
    
    bottom:175px;      
    left: 240px; 
    font-weight: normal;
             
    padding: 3px 2px;
           
}

/* 保存設定ボタン */
.nc-trigger-settings-btn {
    padding: 4px 12px;
    font-size: 15px;
    
    
    width: 110px; 
    
    bottom: -46px ;    
    right: 6px ;
             
}

#log-view-btn {

    width:265px; 
    bottom: -46px ;    
    right:125px ;  

}




/* ============================================
      3行 設定表示 
   =========================================== */

#nc-config-status-layer {
    position: absolute;
    top: 6px;
    right: 4px;
    
    width: 75px;
    height: 42px;
    
    padding: 4px 5px 3px 3px;                  
    
 }   

.nc-cfg-text {
	font-family: "Hiragino Sans", "Meiryo", sans-serif; 
    line-height: 1.1;
}

.cfg-row-1 {
    font-size: 11px;
}

.cfg-row-2 {
    font-size: 11px;
}

.cfg-row-3 {
    font-size: 11px;
}

#vis-internal-mic-btn {
   	padding: 4px 4px; 
    
    top: 140px;
    right: 10px;
    
	width: 68px;
}

.analysis-row-flash {

    top: -216px;          

}


#slStatusContainer {
  top: 7px;
  left: 155px;
}



/* =====
    スマホ用のスタイル
   =========== */


	
	.features-grid {
		display: block !important; 
		width: 100% !important;
		padding: 0 !important;
	}

	
	.feature-item {
		width: 100% !important;
		margin-bottom: 20px; /* カード同士の間隔 */
		display: block !important;
	}
	
	
	.feature-item:last-child {
		margin-bottom: 0;
	}


.evidence-grid, .security-flex {
		display: block !important;
		width: 100% !important;
		padding: 0 30px !important;
	}
	.evidence-card, .security-card {
		width: 100% !important;
		margin-bottom: 15px !important;
		display: block !important;
	}
	.evidence-card:last-child, .security-card:last-child {
		margin-bottom: 0 !important;
	}



/* --- スマホ用エリア（@media内など）の末尾に貼り付け --- */
.noise-layout-item {
  flex: 0 0 100%; 
  padding: 20px;  

  
}




/* ---マイクについて--- */
.mic-info-container {
  padding: 10px 16px; /* スマホの横幅に合わせて余白を最適化 */
  margin: 10px auto;
}





/* --メタデータ--- */
 .pdf-columns-wrapper {
    flex-direction: column;
    gap: 20px;
  }
  
  .pdf-container {
    padding: 20px; /* スマホ画面に合わせて外側の余白を少し狭くします */
  }




/* 1000Hz  ボタン  */
.test-button-1khz {
    
    top: 110px;        
    right: 10px; 
    
     font-size: 13px;
     padding: 3px 5px;
     font-weight: normal;
 
   width: 100px;
 }  

/* 500Hz ボタン */
.test-button-pn {
 

    top: 110px;         
    left: 15px;

    
     font-size: 13px;
    padding: 3px 5px;
     font-weight: normal;
       
   width: 100px;
 
}












}
/*================================================
 *  pc向けデザイン
 ================================================*/
@media screen and (min-width:980px) {


.square_btn9:hover{
    display: inline-block;
	margin : 10px 0 10px 18px;
    padding: 0.4em 0.4em;
    text-decoration: none;
    background: #fff;/*ボタン色*/
	cursor: pointer;
    color: #000;
	font-weight:bold;
    border: solid 1px #000;
    border-radius: 10px;
}







.square_btn:hover{
    display: inline-block;
	margin : 10px 0 10px 25px;
    padding: 0.2em 0.5em;
    text-decoration: none !important;
    background: #fff;/*ボタン色*/
    color: #000;
	cursor: pointer;
	font-weight:bold;
    border: solid 1px #444;
    border-radius: 17px;
}
.square_btnx:hover{
    display: inline-block;
	margin : 10px 5px 10px 5px;
    padding: 0.2em 1em;
    text-decoration: none !important;
    background: #fff;/*ボタン色*/
    color: #000;
	cursor: pointer;
	font-weight:bold;
    border: solid 1px #444;
    border-radius: 17px;
}

.square_btn8:hover{
	cursor: pointer;
    color: #000;
    border: solid 3px #b28723;
}

.square_btn5:hover{
	cursor: pointer;
    color: #000;
    border: solid 1px #9D784C;
}

.square_btn6:hover{
	cursor: pointer;
    color: #000;
    border: solid 1px #bbb;
}

.square_btn5t:hover{
	cursor: pointer;
    color: #000;
    border: solid 1px #9D784C;
}

.square_btn5tt:hover{
	cursor: pointer;
    color: #000;
    border: solid 2px #222;
}
.square_btn5ttt:hover{
	cursor: pointer;
    color: #000;
    border: solid 2px #222;
}

.square_btn5j:hover{
	cursor: pointer;
    color: #000;
    border: solid 2px #222;
}
.square_btn5s:hover{
	cursor: pointer;
    color: #000;
    border: solid 1px #9D784C;
}

.square_btn5a:hover{
	cursor: pointer;
    color: #000;
    border: solid 1px #555;
}
.square_btn5b:hover{
	cursor: pointer;
    color: #000;
    border: solid 1px #555;
}


.square_btn7:hover{
    display: inline-block;
	margin : 0px 0 0px 0px;
    padding: 0.2em 0.8em;
    text-decoration: none !important;
    background: #fff;/*ボタン色*/
    color: #000;
	cursor: pointer;
	font-weight:bold;
    border: solid 1px #444;
    border-radius: 12px;
}


#topicpath a:hover {
	text-decoration:underline;
}


.totop img:hover {
	background:#CBCBC8;
}

.footmenu a:hover {
	color:#333;
	text-decoration:underline;
}

.footmenu_a a:hover {
	color:#111;
	text-decoration:underline;
}

.footmenu_b a:hover {
	color:#111;
	text-decoration:underline;
}



.lint:hover {
	color:#000 !important;
}




.square_btnz:hover{
    display: inline-block;
	margin : 10px 5px 10px 15px;
    padding: 0.5em 0.8em;
	font-size:0.875rem;
  	cursor: pointer;
   text-decoration: none;
    background: #eee;/*ボタン色*/
    color: #000;
	font-weight:bold;
    border: solid 1px #623A01;
}
.square_btny:hover{
    display: inline-block;
	margin : 10px 5px 10px 15px;
    padding: 0.5em 0.8em;
 	cursor: pointer;
	font-size:0.875rem;
    text-decoration: none;
    background: #aaa;/*ボタン色*/
    color: #fff;
	font-weight:bold;
    border: solid 1px #222;
}

.btn-reset:hover {
  background-color: #fff; 
  border: 2px solid #000;
     color: #333;
  }


.fixed-stop-btn_a {
    bottom: calc(130px + env(safe-area-inset-bottom)); 
    z-index: 9999;
        opacity: 0.35;

}



.fixed-stop-btn_b {
    bottom: calc(80px + env(safe-area-inset-bottom)); 
    z-index: 9999;
        opacity: 0.35;
    
}





}