.content-area * {
    font-size: 1.5rem !important;
}




/* メッセージ情報（エラー） */
.message-error {
	width:99%;
	padding:5px 0px 5px 10px;
	margin-right:100px;
	list-style: none;
	color:red;
	font-weight: bold;
	font-size:16px;
	
	border-radius: 10px;
	border: 1px solid #ff0000;
	background-color:#ffc0cb;
}



/* メッセージ情報（正常） */
.message-info {
	width:99%;
	padding:5px 0px 5px 10px;
	margin-right:100px;
	list-style: none;
	color:DodgerBlue;
	font-weight: bold;
	font-size:16px;
	
	border-radius: 10px;
	border: 1px solid DodgerBlue;
	background-color:Azure;
}


/* メニューリスト */
.menu_link_box {
    display: block; /* 縦に並ぶブロック要素にする */
    width: 99%;    /* 横幅は親領域に100%合わせる */
    height: auto;   /* 縦幅は文字量に合わせて自動可変（固定値を上書き） */
    
    /* 親がFlexboxだった場合の強制ストレッチを防ぐ（これが重要） */
    align-self: flex-start; 

    /* 装飾（元のコードのまま） */
    text-decoration: none;
    color: #333;
    border: 1px solid #888;
    border-radius: 10px;
    padding: 3px 5px;
    background-color: #FFF;
    transition: all 0.3s ease;
}

.menu_link_box:hover {
    border: 1px solid #CCC;
    box-shadow: 0 0 5px rgba(153, 141, 247, 0.5);
    background-color: #FAFFFF;
    cursor: pointer;
}

/* ロールオーバーすると「Coming soon...」とPOPする */
.coming_soon {
  position: relative;
}
.coming_soon::after {
  content: "Coming soon...";
  position: absolute;
  top: 120%;
  left: 10%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-size: 18px;
}
.coming_soon:hover::after {
  opacity: 1;
}


/* テキストの装飾 */
.menu_title {
    font-size: 24px;
    font-style: italic;
    color: #250E34;
    font-weight: bold;
}

.menu_desc {
    padding: 0 5px;
    font-size: 16px;
}

/* アーカイブメニュータイトル用 */
.menu_list_ {
	border:1px solid #888;
	border-radius:10px;
	padding:3px 5px 3px 5px;
	background-color:#FFF;
}
.zipper-area {
  background:
    /* ジッパーの横線（テープ） */
    linear-gradient(#ccc 0 2px, transparent 2px 100%) center/100% 2px no-repeat,

    /* ジッパーの歯（短く細かい） */
    repeating-linear-gradient(
      90deg,
      #aaa 0 2px,
      transparent 2px 4px
    ) center/94% 8px no-repeat;
  padding: 2px
}


/* Bluesky 関連*/
/* Bluesky ロゴ部分 */
.bluesky_title {
	position:relative;
	top:15px;
	text-align:center;
	border-radius:10px;
	background-color:#000;
}

/* スクロールバーを含めたブロック要素 */
.bluesky_block {
	overflow-y:auto;
	overflow-x:hidden;
	color:#fff;
	scrollbar-color:rgba(102,126,234,0.7) transparent;
	border:1px solid gray;
	border-radius:10px;
	padding:5px 5px 0px 5px;
	background-color:#000;
	padding-top:10px;
}




/* 便利 */
.cell-right {
	text-align:right;
	padding-right:10;
}



/* 一番大きなタイトル文字 */
.title_L {
	position: relative;
	left:0;
	font-size: 22px;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 0 0 3px 15px;
	border-bottom: 3px solid green;
	width:80%;
}
.title_L:before {
	position: absolute;
	top: 14px;
	left: -20px;
	width: 16px;
	height: 16px;
	border: 2px solid #ff6699;
	content: "";
}
.title_L:after {
	position: absolute;
	top: 6px;
	left: -9px;
	width: 13px;
	height: 13px;
	border: 2px solid #ff6699;
	content: "";
}

/* 等幅フォント */
.famly_not_p {
	font-size:16px;
	font-family: monospace;
}

.del_line {
	color:gray;
	font-weight: bold;
	text-decoration-line:line-through;
}


/* 文字サイズ */
.font_s {
	font-size:16px;
	font-family: serif;
}
.font_m {
	font-size:18px;
	font-family: serif;
}
.font_l {
	font-size:20px;
	font-weight: bold;
}


/* 段落 */
.indent_30 {
	padding-left:30px;
}
.indent_20 {
	padding-left:20px;
}
.indent_10 {
	padding-left:10px;
}



.test-env-box {
  border: 1px solid #ccc;      /* 枠線 */
  border-radius: 8px;          /* 角を丸く */
  padding: 6px 16px;          /* 内側の余白 */
  background-color: #f9fafb;   /* うっすらグレー背景 */
  color: #333;                 /* 文字色 */
  font-size: 0.95rem;          /* 少しだけ小さめ */
  font-style:italic;
  margin-right:30px;
}





/* チェックマーク */
.check_mark{
    padding-left:20px;
	cursor: pointer; 
}
.check_mark::before{
	position: relative;
	top:25px;
	left:-17px;
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    border-bottom: 4px solid #40a9e0;
    border-left: 8px solid #40a9e0;
    transform: rotate(-45deg) perspective(30px) rotateY(60deg);
    transform-origin: 0 50%;
}



/* 文字を丸で囲う */
.circle {
  display: inline-block;
  background:#F5F5F5;
  border: 1px solid #AAA;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align:center;
  color:#FF4500;
  font-size: 26px;
  cursor: pointer; 
}


.blur {
  color: transparent;
  text-shadow: 0 0 3px rgba(200,200,200,0.9);
}



/* コメント投稿（BBS） */
.cmt_area {
	border-radius: 10px;
	border: 1px solid #AAA;
	padding:10px;
	background-color:#F8F8FF;
}

/* コメント一覧（BBS） */
.cmt_list {
	border-radius: 10px;
	border: 1px solid #AAA;
	padding:10px;
	background-color:#FDFDFD;
}

/* コメント一覧（BBS） */
.cmt_comment {
	border-radius:10px;
	border: 1px solid #AAA;
	padding:5px;
	background-color:#FFFFFF
}




/* 角を10px丸くする */
.parts_text {
	border-radius: 6px;
	border: 1px solid #AAA;
}
.parts_text:hover {
	border-radius: 6px;
	border: 1px solid #CCC;
	box-shadow: 0 0 5px rgba(153, 141, 247, 0.5);
}
.parts_text:focus {
	border: none;
	outline:solid 1px #998df7;
}

/* ボタン */
.parts_button {
	padding: 7px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	background: #32CD32;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.parts_button:hover {
	border-radius: 15px;
	transform: scale(1.1);
	color: #FFF;
	background: #1E90FF;
}

/* ボタン2 */
.parts_button2 {
	padding: 7px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	background:#1E90FF;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.parts_button2:hover {
	border-radius: 15px;
	transform: scale(1.1);
	color: #FFF;
	background:#32CD32;
}


/* セレクトボックス */
.parts_combo {
	font-size: 16px;
	padding:5px 5px 5px 5px;
	border-radius: 6px;
	border: 1px solid #AAA;
}
.parts_combo:hover {
	border-radius: 6px;
	border: 1px solid #CCC;
	box-shadow: 0 0 5px rgba(153, 141, 247, 0.5);
}
.parts_combo:focus {
	border: none;
	outline:solid 1px #998df7;
}

/* チェックボックス */
input[type="checkbox"] {
	transform: scale(1.5); 
	margin-right: 6px;
	border: 10px solid #AAA;
}

/* ラジオボタン */
input[type="radio"] {
	transform: scale(1.5); 
	border: 10px solid #AAA;
}



/* ボタン */
.button_solid010 a{
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 220px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    box-shadow: 5px 5px 0 #6bb6ff;
}
.button_solid010 a:hover {
  background-color: #b3d9ff;
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
}








/* バリデーションエラー（最下段に記述する事） */
.valid-error {
	color:red;
	font-weight: bold;
	font-size:16px;
}

/* エラー時のテキストボックス（最下段に記述する事） */
.ele-error {
	border: 1px solid #ff0000;
}
.text-error {
	border: 1px solid #ff0000;
}


/* その他簡単スタイル */
.bd {font-weight: bold;}

/* 文字色 */
.r {color:red;}
.red {color:red;}
.b {color:#00bfff;}
.g {color:green;}
.green {color:green;}
.p {color:#ff69b4;}
.mb {color:#7B68EE;}
.blue {color:#7B68EE;}
.y {color:yellow;}
.w {color:#FFF;}
.gy {color:gray;}
.gray {color:gray;}

/* リンクの下線を非表示にする */
.notLinkBorder {
	text-decoration:none;
	color:#ffffff;
}







/* コード欄 */
.code-box {
	width: 90%;
	position: relative;
	margin: 15px 0;
	padding:15px 10px 5px 10px;
	border: solid 1px #000;
	border-radius: 8px;
	background-color:#222;
}
.code-box .code-box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 5px 15px;
	line-height: 1;
	font-size: 14px;
	background: #FFF;
	color: #FFF;
	font-weight: bold;
	border-radius: 8px;
	border: 1px solid #FFF;
	background-color:#330066;
}
.code-box p {
	margin: 0; 
	padding: 0;
	font-family: Arial, sans-serif;
	font-size:15px;
	color:#FFF;
}


/* コメント欄 */
.comment {
	width: 90%;
	position: relative;
	margin: 15px 0;
	padding:15px 10px 5px 10px;
	border: solid 1px #000;
	border-radius: 8px;
	background-color:#eee;
}
.comment .comment-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 5px 15px;
	line-height: 1;
	font-size: 16px;
	background: #FFF;
	font-weight: bold;
	font-family: Arial, sans-serif;
	border-radius: 8px;
	border: 1px solid #333;
	background-color:#FFF;
}
.comment p {
	margin: 0; 
	padding: 0;
	font-family: Arial, sans-serif;
	font-size:15px;
	color:#000;
}



/* リンク */
.cp_link {
  display: inline-block;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  vertical-align: bottom;
  overflow: hidden;
  font-size:16px;
  color: #000;
  font-weight: bold;
}
/*hover途中の動き*/
.cp_link:hover span {
  background-color: #dafbff;
  transform: translate3d(0, 0, -30px) rotateX(90deg);
}
/*hover時に表示される部分*/
.cp_link span {
  display: inline-block;
  position: relative;
  top: -4px;
  padding: 0;
  transition: .4s;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
}
.cp_link span:after {
  display: inline-block;
  position: absolute;
  padding: 0;
  left: 0;
  top: 0;
  content: attr(data-text);/*hover時に表示されるテキスト*/
  color: #fff;
  background-color: #00ACC1;
  transform-origin: 50% 0%;
  transform: translate3d(0, 105%, 0) rotateX(-90deg);
}

/* テーブル枠 */
.table_border {
	border: 1px solid #555;
	border-collapse: collapse;
}
.table_border td, th{
	border: 1px solid #555;
	border-collapse: collapse;
	padding-left:3px;
}


/* コピーボタン全体 */
.copy-btn {
  position: absolute;
  top:5px;
  right:10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #2d3748; /* ← 少し明るくしてアイコンを見えるように */
  border: 1px solid #4a5568;
  color: #f1f5f9;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s ease;
}

.copy-btn:hover {
  background: #1f2937;
  border-color: #38bdf8;
}

/* 紙アイコン */
.copy-btn__icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* 疑似要素で紙を2枚描く */
.copy-btn__icon::before,
.copy-btn__icon::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #e2e8f0; /* ← 線を太くして視認性UP */
  border-radius: 3px;
  box-sizing: border-box;
}

/* 後ろの紙 */
.copy-btn__icon::before {
  top: 1px;
  left: 4px;
  opacity: 0.7;
}

/* 手前の紙 */
.copy-btn__icon::after {
  top: 4px;
  left: 1px;
}

/* ホバーで少しズレる */
.copy-btn:hover .copy-btn__icon::before {
  transform: translate(1px, -1px);
}

.copy-btn:hover .copy-btn__icon::after {
  transform: translate(-1px, 1px);
}


/* グローバルメニュー用スタイル */
.nav-tabs-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10 10 0 10;
  position: relative;
  font-family: "Noto Sans JP", system-ui, sans-serif;
}
/* 横線：左右に向かって透明になる */
.nav-tabs-line::before,
.nav-tabs-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #000);
}
.nav-tabs-line::after {
  background: linear-gradient(to left, transparent, #000);
}
.nav-title {
  font-weight: 600;
  color: #333;
  padding: 0 8px;
  background: #fff;
  position: relative;
  z-index: 1;
}
.tab {
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: #555;
  transition: 0.2s;
  position: relative;
  z-index: 1;
}
.tab:hover {
  background: #f0f0f0;
}
.tab.is-active {
  background: #333;
  color: #fff;
  border-color: #333;
}
.tab.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: #eee;
  color: #333;
  border-color: #555;
}
.nav-tabs-line a {
  color: inherit;
  text-decoration: none;
}