@charset "utf-8";

/* 初期化スタイルシートの読込 */
@import "reset.css";

	/* 枠 */
	#container {
		padding: 0 1em;
	}

	#container .red {
	    color:red;
	}

	/*共通*/
	img {
		max-width: 100%;
	}

	.no_display {
		display: none;
	}
	.no_pointer {
		pointer-events: none;
	}

	#chat_button {
	    height: 68px;
	    width: 68px;
	    position: fixed;
	    bottom: 10px;
	    border: none;
	    z-index: 2147483646;
	    right: 10px;
		border-radius: 10px;
		color: #FFFFFF;
		background-color: #336633;
		font-weight: bold;
	    font-size: 0.75rem;
		padding: 3px 1px;
	}
	#chat_button:active {
		background-color: #3C9402;
	}

	/* th/jq_common.js */
	.jqTtip-small { /* 申込画面の一部でサイズ調整に利用 */
	    font-weight: normal;
		font-size: 0.75rem;
	}

	.jqTtip-p {
		position: relative;
		bottom: -0.25em 0;
		z-index: 9999;
		width: auto;
		height: auto;
		padding: 0.5em;
		color: #FFF;
		background: #000;
		border-radius: 0.5em;
	}

	#sub .sub-menu {
		display: table;
		border: 1px dashed #CCCCCC;
		border-radius: 0.2em;
		padding: 0 0.5em;
		margin: 0.5em 0;
	}
	#sub ul {
		width: 100%;
	}
	#sub p {
		display:none;
	}
	#sub li {
		float: left;
		width: 50%;
		margin:auto;
		padding:5px 0;
	}
	#sub .top {
		display:none;
	}

	#main {
		line-height: 2;
	}

	#main #info {
		font-size: 0.75em;
	}

	#navi h1 {
		font-size: 0.75em;
	}

	#navi img.logo {
		float: left;
		max-height: 1em;
	}
	
	#main .prefer-box {
	    border: 1px dashed #CCCCCC;
	    border-radius: 8px;
	    padding: 0.5em; /* 内側に余白を作ってバランスを調整 */
	}
	#main .prefer-title {
	    text-align: center;
		font-size: 62.5%;
	}
	#main ul#prefer {
	    list-style: none;
/*	    display: flex; */
	    flex-wrap: wrap; /* 折り返しを許可 */
	    justify-content: center; /* 中央寄せ */
	    gap: 10px 20px; /* 項目間の上下左右の隙間 */
	}
	#main #prefer li {
	    flex: 0 1 calc(50% - 20px); /* 2列に並べる設定（隙間分を引く） */
	    text-align: center;
	}
	#main ul a {
		text-decoration: none;
	}
	
	#footer ul {
		width: 100%;
	}
	#footer li {
		float: left;
		width: 50%;
		margin:auto;
		padding:5px 0;
	}

	.desplay-none-sp {
		display:none;
	}
	
	#container #navi table{
		display:none;
	}
	
	#sub {
/*		display:none; */
	}
	
	#sub .sub-service {
		display:none;
	}

	#sub .sub-menu {
		display:none;
	}

	#pan {
		display:none;
	}
	
	#con {
		clear: both;
	}

	#con table {
	    margin-top: 5px;
	    width: 100%;
	    background: url(../images/con_hig_table_backgroud.jpg) repeat-y;
	}
	#con th {
	    text-align: center;
	    background-color: #3C9402;
	    color: #FFFFFF;
	}
	#con td {
	    border: 1px #CCCCCC solid;
	    padding: 5px;
	}

	#con .asterisk {
		font-size: 0.75em;
	}

	#con h2, #form h2 {
		background: rgba(0, 0, 0, 0) url("../images/all_h2_back.gif") repeat-x scroll 0 0; 
		background-size: cover;
		color: #ffffff; 
		font-weight: bold;
		font-size: 120%;
		padding:0.25em;
		margin: 0.5em 0 0.5em 0;
		line-height: 1.5;
	}
	
	#con .ind-article h2 {
		border-bottom: 0;
		border-left: 0;
		background-color: #6666FF; /* 特徴ページの帯と同色を指定 */	
	}

	#con h2:first-child {
		margin-top: 0.5em;
	}

	#con h3 {
		border-bottom: 1px solid #CCCCCC;
		border-left: 0.25em solid #FF0000;
		padding-left: 0.25em;
		margin: 0.5em 0 0.5em 0;
		font-weight: bold;
		line-height: 1.5;
	}

	/* special */
	#con.special img {
	    display: block;
		margin: 2.0em auto 2.0em auto;
		max-width: 100%
	}
	#con.special .source {
		font-size: 0.6em;
		text-align: right;
	}

	#footer{
		margin-top:10px;
	}

	#footer #add {
		background: url(../images/navi_line.jpg) repeat-y;
		background-size: cover;
		clear: both;
		padding: 0 0.5em;
	}

	#footer #add p {
		font-size: 0.75em;
	}

	#footer #add a {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	#footer address {
		color: #FFFFFF;
		font: 0.6em "Times New Roman", Times, serif;
		font-weight: bold;
	}
	
	/*買取の特集*/	
	#con .ind-feature {
	    margin-bottom: 1em;
	}

	.ind-answer-index {
		display:none;
	}

	#con .ind-feature h2 {
		background: 0;
	    margin: 0;
	    padding: 0;
	    border: 0;
	}
	
	#con ul#prefer {
	    font-size: 0.75rem;
	    text-align: center;
	}
	
	/*お試し査定*/
	#main h5 {
		background-color: #E1FFE2;
		color: Maroon;
		margin: 0;
		line-height: 1.5;
		padding: 0 0.5em;
	}
		
	#main h5 img {
    	margin-right: 0.5em;
    	vertical-align: middle;
	}
	
	/*高額買取品*/
	#con div.ind-article div.title {
		width:100%;
	}

	#main .ind-article .title a {
		text-decoration: none;
		color: black;
		font-weight: bold;
	}

	#con .ind-article .item {
		margin-top: 1em;
	}

	#con .ind-article .warning {
		background-color: #f5f5f5;
		border: 1px dotted #cccccc;
		clear: both;
		color: #666666;
		font-size: 0.75em;
		margin-top: 1em;
		padding: 1em;
	}
		
	#con .ind-article .desc {
		margin: 1em 0;
	}
	
	#con .ind-article .desc p {
    	border-bottom: 1px dotted #666666;
    	line-height: 1.5em;
    	padding-bottom: 1px;
	}
	
	#con .ind-article .price p {
		font-weight: bold;
		padding-top: 1em;
	}
	
	#con .ind-article .price-red  {
		font-size: 150%;
		color: red;
	}

	#con .ind-article .reference-price  {
		font-size: small;
	}

	#con .ind-article .item:nth-child(even) {
		background: #f5f5f5;
	}

	#con .ind-article .date {
		font-size: 0.75em;
	}

	#con .ind-article .page {
		font-size: 0.75em;
	}
	
	/*高額買取実績*/
	#load {
		width:55px;
		height:55px;		
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	div#con table {
		font-size: 0.8em;
	}

	div#con table#pager {
		margin:0 auto;
	}
	
	#con td.all-tableIndex {
		width: 4em;
		font-weight: bold;
	}

	#con th {
    	background-color: #ff0000;
    	color: #ffffff;
    	text-align: center;
	}
	
	#con p.sel-list-year a {
    	padding: 0 0.5em 0 0;
		line-height:200%;
	}

	#what_more {
		text-align: center;
	}
	
	/*お客様の感想*/	
	div.imp h3 {
		border-bottom: 1px solid #CCCCCC;
		border-left: 10px solid #FF0000;
		padding-left: 0.3em;
		margin:2px 0 5px 0;
		font-weight: bold;
	}
	
	img.imp-img{
		max-width:60px;
		max-height:60px;
		right: 1em;
    	margin: 0;
    	position: absolute;
    	top: -15px;
	}
	
	div.imp-opinion img {
		max-width:75px;
		max-height:75px;		
	}
	
	#con .imp {
		border: 1px solid #cccccc;
		margin-bottom: 1.4em;
		margin-top: 10px;
		padding: 10px;
		position: relative;
	}
	
	#con table.imp-items th {
		background: rgba(0, 0, 0, 0) url("../images/con_hig_table_backgroud.jpg") repeat-y scroll 0 0;
		border: 1px solid #cccccc;
		color: #000000;
		padding: 5px;
		text-align: left;
		width: 80px;
	}
	
	#con table.imp-items td {
    	background-color: #ffffff;
    	width: 140px;
	}
	
	#con td {
    	border: 1px solid #cccccc;
    	padding: 5px;
	}
	
	div.imp-opinion table.imp-items{
		width:100%;
	}
		
	#con .imp-opinion p {
		display: inline;
		line-height: 1.8em;
		padding-bottom: 0.2em;
	}
	
	#con .imp-answer {
    	background: #ffffcc none repeat scroll 0 0;
    	color: #660000;
    	padding: 10px;
		font-size: 0.75em; 
	}
	
	/*プライバシーポリシー*/
	#main .policy_container {
    	background: rgba(0, 0, 0, 0) url("../images/con_hig_table_backgroud.jpg") repeat-y scroll 0 0;
    	padding: 5px;
	}
		
	#con p.article {
		font-weight: bold;
		margin-top: 5px;
	}
	
	/* 買取条件 */
	#con .sel-conditions {
		font-weight:bold;
	}
	
	.sel-conditions h2 img.icon-book {
		width:61px;
		height:auto;
		margin-top: 5px;
	}
	.sel-conditions h2 img.icon-cd {
		width:32px;
		height:auto;
		margin-top: 5px;
	}
	
	.sel-conditions h2 img.icon-dvd {
		width:151px;
		height:auto;
		margin-top: 5px;
	}
	.sel-conditions h2 img.icon-game {
		width:61px;
		height:auto;
		margin-top: 5px;
	}
	
	#con .sel-conditions li {
		border-bottom: 1px dashed #cccccc;
	}

	#con .sel-attention {
		background-image: url("../images/con_sel_attention.gif");
		background-position: left center;
		background-repeat: no-repeat;
		padding-left: 45px;
	}
	
	#con .sel-true {
		background-color: #fafaff;
		border: 1px solid #0000ff;
		color: #0000ff;
		margin-bottom: 6px;
		padding: 10px;
	}
	#con .sel-true li a {
		text-decoration: underline solid;
	}
	
	#con .sel-false {
		background-color: #fffafa;
		border: 1px solid #ff0000;
		color: #ff0000;
		margin-bottom: 6px;
		padding: 10px;
	}
	#con .sel-false li a {
		color: red;
		text-decoration: underline solid red;
	}
	#con .sel-false ul {
		list-style: inside none none;
	}
	
	#con .sel-conditions h3 {
		border-bottom: 1px solid #666666;
		border-left: 10px solid #666666;
		color: #666666;
		margin-top: 0;
		padding-top: 0;
	}
	
	#con ul.sel-category-conditions {
		background: rgba(0, 0, 0, 0) url("../images/con_sel_conditions_category_sp.gif") no-repeat scroll 0 0;
		height: 90px;
		width: 360px;
		margin-bottom:18px;
		border: 0px;
	}
		
	#con ul.sel-category-conditions a {
		display: block;
		font-size: 0;
		height: 90px;
		line-height: 0;
		text-indent: -9999px;
		width: 90px;
	}
	
	#con .sel-category-conditions li {
		float: left;
	}

	/* ask */
	#con a.question {
	    background: url(../img/ask/ask_icon_question.gif) no-repeat scroll 0.5em 0.4em;
	    padding: 0 0.5em 0 1.5em;
	    font-weight: normal;
	    text-decoration: none;
	    color: #000000;
	    display:block;
	}

	#con a.question:hover {
	    text-decoration: underline;
	}

	#con span.answer {
	    background: url(../img/ask/ask_icon_answer.gif) no-repeat scroll 0.5em 0.4em #FDF2F6;
	    padding: 0 0.5em 1em 1.5em;
	    display: block;
	}

	/* satei_res ――――――――――――――――――――――――――――――――――――――――*/
	#con .satei-res p {
		font-size: 0.75em;
	}
	#con .satei-res table {
		font-size: 0.75em;
		margin-bottom: 1em;
	}
	#con .satei-res table th {
		margin:0 auto;
	}

	/* form ――――――――――――――――――――――――――――――――――――――――*/
	::placeholder {
	   color: #aaa;
	}

	.file {
		width: auto;
	}

	.paymentOnDelivery {
	    background-color: #C8E4FF;
	    color: black;
	    font-weight: normal;
	    padding: 0.1em 0.5em;
		font-size: 0.75em;
	}
	.paymentInAdvance {
	    background-color: #FFDED2;
	    color: black;
	    font-weight: normal;
	    padding: 0.1em 0.5em;
		font-size: 0.75em;
	}

	iframe {
		width: 100%; /* 親要素の幅と合わせる */
		height: 8em;
	}

	#form .form_input th, #form .form_input td {
		display: block;
		max-width: 100%;
	}
	#form .form_input td {
		clear: both; 
	}
	#form .form_input .label-font-size {
		font-size: 1rem;
	}
	#form .form_res table {
		width: 100%;
	}
	#form .form_res th, #form .form_res td {
	    border: solid #ddd 1px;
	    padding: 10px;
	}
	#form .form_res th#form_element {
	    background-color: #F4FFE8;
	    text-align: left;
	}

	#satei th {
		display: none;
	}

	#satei .add {
		margin-right: 1em;
	}

	#form td p, #form #characterLimit, .ssl-info {
		font-size: 0.75rem;
	}

	#form td label {
		font-size: 1em;
		line-height: 3em;
	}
	#form td label a {
		line-height: 1.5em;
	}
	#form .form_header img {
		vertical-align: middle;
	}

	#form p.item {
		float: left;
	}

	#form p.required {
		padding-left: 0.5em;
		float: left;
	}

	#form form {
	    margin-top: 5px;
	}

	#form label {
		font-size: 1.5em;
	}

	input[type="text"], input[type="number"], input[type="password"], select, textarea {
		padding: 0.5em;
		font-size: 1.5em;
	    width: 92.5%;
	}
	select#yearSelect {
	    width: auto;
	}
	#sell input[placeholder="0"] {
	    width: 20%;
	    margin-bottom: 0.5em;
	}
	#sell input[id="birthYear"], #forgotpassword input[id="birthYear"] {
	    width: 15%;
	}
	#sell select[id="birthMonth"], #sell select[id="birthDay"], #forgotpassword select[id="birthMonth"], #forgotpassword select[id="birthDay"] {
	    width: 25%;
	}
	#sell select.DateTime {
	    width: 45%;
	}

	#form subtitle {
	    vertical-align:middle;
	}

	#form table{
	    border: 1px;
	    cellspacing:0;
	    frame: box;
	    border-color: #CCCCCC;
	    margin-bottom: 5px;
	}

	#form table.ASIN {
	    margin-top: 5px;
	    background: url(../images/con_hig_table_backgroud.jpg) repeat-y;
	}

	#form table th {
	    padding: 0 0.5em 0.5em 0.5em;
	}

	#form table td {
	    padding: 0.5em 0 0.5em 0;
	}

	#form table td.form_header {
	    padding: 0.5em;
	    margin: 0.5em 0;
	}

	#form table.ASIN th {
	    background-color: #3c9402;
	    text-align:left;
	    color:#ffffff;
	}

	#form .form_header {
	    background-color: #409D02;
	    color:#F5F5F5;
	    border: 1px;
	    font-weight: bold;
	}

	#form .form_warning {
	    padding: 0.5em;
	}

	#form #form_element .item img{
	    vertical-align: middle;
	}
	#form #form_element .required{
	    margin-top:2px;
	    /* icn_must.gif 28px */
	}

	#form th#form_element {
	    text-align:left;
	}

	#form td#form_element{
	    border: solid #DDDDDD 1px;
	}

	#form img.required_mark {
	    margin-bottom: 5px;
	}

	/*買取申込みフォーム 買取承認ラジオボタン位置調節*/
	#form input[name="approval[approval]"][value="0"].radio{
	    margin:0px 0px 0px 4px;
	    position:relative;
	    top :1px;
	}

	/*買取申込みフォーム 買取承認ラジオボタン位置調節*/
	#form input[name="approval[approval]"][value="1"].radio{
	    margin:0px 0px 0px 0px;
	    position:relative;
	    top :1px;
	}

	#form p#sameDateTimeAddCommnet{
	    color:red;
	}

	/*メッセージの文字数制限テキスト用*/
	#form input#characterLimit{
	    background-color:transparent;
	    border:none;
	}

	/*買取申込 当店を知ったきっかけとメッセージのサイズ調整*/
	#form input#opportunity,#form textarea#message{
	    width: 95%;
	}

	/*買取申込 当店を知ったきっかけとメッセージのサイズ調整*/
	#form textarea#message{
	    height: 6em;
	}

	#form input[type="radio"]{
	    margin-left:5px;
	}

	#form .attention{
	    font-weight: bold;
	    color:red;
	}

	#form img.progress {
	    margin-bottom: 5px;
	}

	#form p.inline {
		display: none;
	}

	#form .error p#rekey{
	    background-color: #FFFF99;
	    font-size: 0.8em;
	}

	#form div.next-page{
	    margin-top:15px;
	}

	#form div.next-page span#nonage p{
	    margin-bottom:8px;
	}

	#form table#orderId {
	width:40%;
	}

	/*input type="file"要素のブラウザ毎のレイアウト共通化*/
	#form .file {
	  display: inline-block;
	  /*IE用(開始)*/
	  display: inline\9;
	  zoom: 1\9;
	  /*IE用(終了)*/
	  overflow: hidden;
	  position: relative;
	  padding: .5em;
	  border: 1px solid #999;
	  background-color: #eee;
	  height: 1.5em;
	  width: 6em;
	}
	/*input type="file"要素のブラウザ毎のレイアウト共通化*/
	#form .file input[type="file"] {
	  opacity: 0;
	  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	  position: absolute;
	  right: 0;
	  top: 0;
	  margin: 0;
	  font-size: 1em;
	  cursor: pointer;

	}
	/*input type="file"要素のブラウザ毎のレイアウト共通化*/
	#form span#filename {
	    display: inline-block;
	    /*IE用(開始)*/
	    display: inline\9;
	    zoom: 1\9;
	    /*IE用(終了)*/
	    margin-left:10px;
	    margin-top:7px;
	    vertical-align:top;
	}

	/*お試し査定アイコン画像*/
	#form #form_element img.satei-icon-book {
	    margin-right:7px;
	    margin-bottom:2px;
	    vertical-align:middle;
	}
	#form #form_element img.satei-icon-cd {
	    margin-right:7px;
	    margin-bottom:2px;
	    vertical-align:middle;
	}
	#form #form_element img.satei-icon-dvd {
	    margin-right:7px;
	    vertical-align:middle;
	}
	#form #form_element img.satei-icon-game {
	    margin-right:7px;
	    margin-bottom:2px;
	    vertical-align:middle;
	}

	/*買取申込 重複申込エラー用*/
	#form span span#black {
	    color:black;
	}
	/*注記強調*/
	#form span.bold {
	    font-weight: bold;
	}

	#form #limit p {
	    font-weight: bold;
	}

	/* 買取条件 sell/sell―――――――――――――――――――――――――――――――――――――――― */
	#con li.sel-go-top {
	    float: left;
	    border-style: none;
	}
	#con li.sel-go-bottom {
	    float: right;
	    border-style: none;
	}

	/* 記事 */
	#con .clear {
	    clear: both;
	}

	#con .item-desc {
	    margin-top: 1em;
	}

	#con .item-desc p {
	    margin-bottom: 1em;
	}

	/* ナビリンク */
	#con .naviUrl {
	    width: 100%;
	    display: block;
	}

	#con .naviUrl .Left, 
	#con .naviUrl .Right {
	    width: 50%;
	    box-sizing: border-box;
	}

	#con .naviUrl .Left { float: left; }
	#con .naviUrl .Right { float: right; }

	#con .naviUrl a {
	    text-decoration: none;
	    color: black;
	    display: flex;       /* float: hiddenから変更。横並びを強制 */
	    align-items: center; /* 上下中央揃え（上揃えなら flex-start） */
	}

	#con .naviUrl img {
	    width: auto;
	    max-width: 40%;      /* 画像が横に広がりすぎないよう制限 */
	    height: auto;
	    border: 0;
	    /* float: left; を削除 */
	    margin-right: 8px;
	    flex-shrink: 0;      /* 画像が圧縮されないように固定 */
	}

	#con .naviUrl span {
	    display: block;
	    /* overflow: hidden; を削除 */
	    font-size: 12px;
	    flex: 1;             /* 残りの幅をすべてテキストに割り当て */
	}

	/* 20231215 ボタンをCSS化 */
	.next-page {
	    margin: 5px 0px;
	}

	.next-page a,
	#all-apply-form a,
	a.all-sell-apply,
	a.all-sell-apply-form,
	a.ind-article-top,
	a.all-sell-apply-satei-res,
	#satei-res .go-back,
	.next-page .sign_in,
	.next-page .go-check,
	.next-page .go-back,
	.next-page .go-complete,
	.next-page .go-satei {
	    display: inline-block;
	    cursor: pointer;
	    border: none;
	    outline: none;
	    border-radius: 10px;
	    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	    font-weight: 600;
	    color: white;
	    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
	    font-family: sans-serif;
	    text-align: center;
	    text-decoration: none;
	    transition: background-color 0.3s, box-shadow 0.3s;
	}

	.next-page a,
	#all-apply-form a,
	a.all-sell-apply,
	a.all-sell-apply-form,
	a.all-sell-apply-satei-res,
	.next-page .sign_in,
	.next-page .go-check,
	.next-page .go-complete,
	.next-page .go-satei {
	    background: linear-gradient(to bottom, #ff9800, #e68a00); /* オレンジ */
	    border: 1px solid #cc7a00;
	    padding: 0.8em 0.8em;
	    font-size: 1.2em;
	}

	a.ind-article-top {
	    background: linear-gradient(to bottom, #ff9800, #e68a00); /* オレンジ */
	    border: 1px solid #cc7a00;
	    padding: 1em 1em;
	    font-size: 0.8em;
		margin-bottom: 1em;
	}

	#satei-res .go-back,
	.next-page .go-back {
	    background: linear-gradient(to bottom, #f0f0f0, #dcdcdc); /* グレー */
	    border: 1px solid #bfbfbf;
	    padding: 0.8em 0.8em; /* テキスト周りのスペースを調整 */
	    font-size: 0.8em;
		margin-right: 2em;
	}

	.next-page a:hover,
	#all-apply-form a:hover,
	a.all-sell-apply:hover,
	a.all-sell-apply-form:hover,
	a.ind-article-top:hover,
	a.all-sell-apply-satei-res:hover,
	.next-page .sign_in:hover,
	.next-page .go-check:hover,
	.next-page .go-complete:hover,
	.next-page .go-satei:hover {
	    background: linear-gradient(to bottom, #ffad33, #e68a00);  /* オレンジ */
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}

	#satei-res .go-back:hover,
	.next-page .go-back:hover {
	    background: linear-gradient(to bottom, #e0e0e0, #cccccc); /* グレー */
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}

	.clearfix::after {
	  content: "";
	  display: table;
	  clear: both;
	}

/* 20250109 ハンバーガーメニュー対応 */
/* ハンバーガーメニュー */
.hamburger-container {
    position: fixed; /* 固定位置にする */
    top: 5px; /* 画面上部からの距離 */
    right: 1em; /* 画面右端からの距離 */
    text-align: center;
    width: 34px;
    height: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 2px solid #336633;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px 2px 4px; /* 上側の余白を少し増やしました */
    z-index: 1000; /* 他の要素の上に表示されるようにする */
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px; /* 三本線間の距離 */
	margin-bottom: 2px; /* 三本線とテキスト間の余白を追加 */
}

.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #336633;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* X(閉じる)メニュー */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px); /* 上の線をXマークの一部に調整 */
    transform-origin: center; /* 回転基準を中央に設定 */
}

.hamburger.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線を非表示 */
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px); /* 下の線をXマークの一部に調整 */
    transform-origin: center; /* 回転基準を中央に設定 */
}

/* メニュー内の文字 */
.hamburger-text {
    font-size: 6px; /* フォントサイズを小さく調整 */
    font-weight: bold;
    color: #336633;
    font-family: Arial, sans-serif;
    margin: 0;
    display: block !important;
}

/* メニュー押下時の背景ぼかし用 */
.blurred {
    filter: blur(5px); /* 背景をぼかす */
    transition: all 0.3s ease; /* スムーズなアニメーション */
    pointer-events: none; /* 背景のクリックを無効化 */
}

/* サブメニュー */
#sub .sub-menu,
#sub .sub-menu li,
#sub .sub-menu li ul {
    background: none !important; /* 背景をリセット */
}

#sub .sub-menu {
    position: fixed; /* 固定位置に設定 */
    left: 1em; /* 左側の余白 */
    right: 1em; /* 右側の余白 */
    background-color: #ffffff !important; /* 背景色を白に設定 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    z-index: 1000; /* 他の要素より前面に表示 */
    border: 2px solid #336633; /* 枠線を追加（必要に応じて調整） */
    padding: 10px; /* 内側の余白を調整 */
}

#sub .sub-menu a {
    font-size: 12px; /* フォントサイズを小さめに設定 */
    color: #333333; /* 青文字を変更 */
    text-decoration: none; /* アンダーバーを削除 */
    display: block; /* 各リンクを縦に並べる */
    margin: 5px 0; /* リンク間の余白 */
}

/* 2階層目の文字サイズ */
#sub .sub-menu ul ul a {
    font-size: 10px; /* 2階層目のリンクのフォントサイズをさらに小さく */
    color: #666666; /* 2階層目のリンク色を薄く */
    margin: 3px 0; /* 2階層目のリンク間の余白を少し減らす */
}

.sub-menu p {
    display: block !important; /* 明示的に表示 */
	color: #336633;
    font-weight: bold; /* 必要なら強調 */
}

/* 20241226 説明カテゴリ */
#con .category {
    display: flex; /* 横並びにする */
    gap: 10px; /* 各アイテム間の間隔を10px */
    padding: 10px; /* 外側の余白を10px */
    box-sizing: border-box; /* パディングを含めたボックスサイズ */
    justify-content: start; /* 横一列で左寄せ */
}

#con .category .item {
    position: relative;
    width: 180px; /* 各アイテムの幅 */
	height: auto;
    text-align: center; /* 中央揃え */
}

#con .category .img img {
    width: 100%; /* 画像を親要素の幅に合わせる */
    height: auto; /* アスペクト比を保つ */
}

#con .category .title {
	font-size: 75%; /* 元の文字サイズを基準に20%小さくする */
}

#con .category .bright {
  filter: brightness(110%) contrast(110%);
}

/* 2階層目以降の<ul>に適用 */
.sub-menu ul ul {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: 1fr 1fr;
    gap: 5px; /* グリッド間の余白 */
}

.sub-menu ul ul li {
	width: 100% !important;
	padding: 0 !important;
}

/* 2階層目以降の文字を小さく設定 */
.sub-menu ul ul li a {
    padding-left: 0.5em;
}

/* 20250117 カテゴリにスクロールバーを表示 */
#categoryContainer {
    height: 45vh; /* スクロール可能範囲の高さを指定 */
    overflow-y: auto; /* 縦スクロールを有効化 */
}

/* 20251202 */
.kana-field { display: none !important; }