@charset "Shift_JIS";


/* 全ての幅計算を統一する（これを入れないと崩れます） */
*, *::before, *::after { box-sizing: border-box; }



/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
body {
	font-family: "BIZ UDGothic","メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-size: 95%;
	line-height: 2;
	color: #fb7b7b;
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;

}



body {
    /* 真っ黒(#000)ではなく、読みやすい濃いグレーにする */
    color: #334155 !important; 
	font-family: "BIZ UDGothic", "Meiryo", sans-serif !important;
    
    /* 行間を少し広げて、窮屈さをなくす */
    line-height: 1.8 !important;
    
    /* 文字のギザギザを滑らかにする（Mac/iOS用） */
    -webkit-font-smoothing: antialiased !important;
}

/* リンク色も「青(#00f)」から「落ち着いた青」へ */
a {
    color: #0066cc !important;
}




h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{
	margin: 0px;
	padding: 0px;
}


:focus {
outline: 0;
}

ol, ul {list-style: none;}



caption, th, td {font-weight: normal;text-align: left;}

blockquote{
background-color:#ddd;
padding:1em 1em 1em 3em;
position:relative;
}
blockquote:before{
content:"";
font-size:600%;
line-height:1em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}

a img {border: 0;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body{
color:#333;
-webkit-text-size-adjust: none;
background:#FAFAFA;
}


/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#0000ff;
}

a:hover, a:active{
outline: none;
color:#6f6f6f;
}


/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after, ul.post li:after,nav#mainNav .inner:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post, ul.post li,nav#mainNav .inner{zoom: 1;}


/* レイアウト
------------------------------------------------------------*/
#wrapper, .inner{
margin:0 auto;
width:1000px;
}

#header{
overflow:hidden;
width:100%;
}

#main{
float:right;
width:760px;
padding:0px 0 0px;
margin: 15px 0;
}



#footer{
clear:both;
} 

/* ヘッダー
*****************************************************/

/* サイト説明文
----------------------------------*/
h1{
font-weight:normal;
text-align:right;
padding:0px 10px 0px 0px;
font-size:12px;
background:#FAFAFA;
color:#333;

}





/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/

.site-header,
.global-nav,
.main-body,
.site-footer{
	min-width: 1200px;
}

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-body-in,
.site-footer-in{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 1200px; /*サイトの横幅。これより小さければレスポンシブ*/
	margin: auto;
}


.site-header{
	background:#fff;
	margin-bottom:-3px;
}
.site-header:after{
	content:'';
	display:block;
	height:3px;
	width:100%;
	background:#181944;
	}

.site-header-conts{
	width: 100%;
	padding: 10px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}



/* スマホ表示用メディアクエリ */
@media (max-width: 768px) {
  .site-titlesimu2 {
    display: none;
  }
}


.site-header-in{
	position:relative;
}

/*ヘッダーロゴ*/
@media only screen and (max-width: 959px){
.site-title{
	text-align:center;
	margin: 0 auto;
	font-size: 0.25em;
	font-family: Dela Gothic One;
}}

@media only screen and (min-width: 600px) {
.site-title{
		text-align:left;
			margin: 0 auto;
	font-size: 0.25em;
	font-family: RocknRoll One;
}}



@media only screen and (max-width: 959px) {
  .site-title-sub {
    text-align : center;
    margin : 0px auto;
    font-size : 0.6em;
  }
}
@media only screen and (min-width: 600px) {
  .site-title-sub {
    text-align : left;
    margin : 0px auto;
    font-size : 0.90em;
  }
}




.site-title a{
	text-decoration: none;
	color:#333;
	font-size:25px;
}

.site-title a:hover,
.site-title a:active,
.site-title a:focus{
	text-decoration: underline;
}

.normal-screen .site-title{
	font-size: 3em;
}

.site-title a {
    color: #1a202c !important; /* 高級感のある黒に近い紺色 */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* マウスオーバー時の演出 */
.site-title a:hover {
    color: #0066ff !important;   /* オレンジから青へ */
    text-decoration: none !important;
    opacity: 0.8 !important;
}

/* サブタイトルの色も少し薄くしてメリハリをつける */
.site-title-sub {
    color: #64748b !important;
    font-size: 0.85em !important;
    margin-top: 4px !important;
}



/* ==========================================================================
   ステマ規制対策：広告表記（PR）のスタイリング
   ========================================================================== */


/* 1. 全体構造：サイドバー落ち防止（継承） */
#wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 1000px !important;
    margin: 0 auto !important;
}

/* 2. 広告表記（デスクトップ・共通設定） */
.ad-notice {
    display: block !important;
    margin-bottom: 10px !important;
    padding: 5px 12px 5px 5px !important; /* デスクトップは少し余裕を持たせる */
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
    text-align: right !important;
}

/* 3. 【今回のメイン】スマホ表示での微調整 */
@media screen and (max-width: 768px) {
    #wrapper {
        display: block !important;
        width: 100% !important;
    }
    
    .ad-notice {
        /* 上下の余白（margin）を10px → 5pxへ。上下パディングを最小限に */
        margin: 5px 10px !important;
        padding: 2px 5px !important; 
        
        /* 目立ちすぎないよう太字を解除し、文字色を少しだけマイルドに */
        font-weight: normal !important;
        color: #64748b !important; 
        font-size: 0.75rem !important; /* 0.8remからわずかに縮小 */
        
        text-align: right !important; /* 右寄せにして「注釈」感を出す */
        border: none !important;      /* 枠線がある場合は消して馴染ませる */
        background: none !important;  /* 背景色がある場合は消して透明に */
    }
}



.normal-screen .lp-catch{
	font-size: 1.5em;
}




.cta-button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff6600;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
	font-size:22px;
	line-height:20px;
	text-align:center;
}

.cta-button:hover {
  background-color: #FFC099;
	color:#fff;
}

.update-info {
  display: block;
  font-size: 11px;
  margin: 2px 0 -5px;
  color: white;
}





/*ヘッダー右側の要素*/
.header-box{
	text-align: right;
	position:absolute;
	right:0;
	top:20px;
}

/*ヘッダーの全画面表示*/
.full-screen{
	background: url(../images/lp-image.jpg) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	color: #fff;
}

.full-screen .site-header-in{
	display: table;
}

.full-screen .site-header-conts{
	display: table-cell;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	padding: 1em;
	text-align: center;
	vertical-align: middle;
	text-shadow: 1px 1px 8px #171844;
}

.full-screen .site-title{
	display: block;
	text-align:center;
}

.contact-btn{
	margin-bottom: 0;
}

.full-screen .site-header-conts h1{
	width: auto;
	margin: 0;
}

.full-screen .site-header-conts p{
	font-size: 2em;
}

.full-screen .site-header-conts p a{
	color: #fff;
	text-decoration: none;
}


/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

.global-nav{
	padding: 0;
	background-color:#333;
	border-bottom:#171844 solid 1px;
	margin-bottom:-3px;
	z-index: 200;
	position: relative;
}

/*グローバルナビの開閉用ボタン*/
.global-nav-panel{
	display: none;
	font-size: 12px;
}

.global-nav-panel span{
	display: block;
	min-height: 20px;
	line-height: 20px;
}

.icon-gn-menu{
	padding-left: 32px;
	background: url(https://power-hikaku.info/images/icon/icon-gn-menu.png) left center no-repeat;
}

.icon-gn-close{
	padding-left: 32px;
	background: url(https://power-hikaku.info/images/icon/icon-gn-close.png) left center no-repeat;
}


	/*Retina（高解像度）ディスプレイ用*/
	@media screen and (-webkit-min-device-pixel-ratio:2),
	(min-resolution: 2dppx){
		.icon-gn-menu{
			background: url(https://power-hikaku.info/images/icon/icon-gn-menu@2x.png) left center no-repeat;
			-webkit-background-size: 20px 20px;
			background-size: 20px 20px;
		}

		.icon-gn-close{
			background: url(https://power-hikaku.info/images/icon/icon-gn-close@2x.png) left center no-repeat;
			-webkit-background-size: 20px 20px;
			background-size: 20px 20px;
		}
	}

.global-nav .show-menu,
.global-nav .show-menu li ul{
	display: block!important;
}

.global-nav-in ul{
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	table-layout: fixed; /*メニューの幅を均等に*/
}

.global-nav-in li{
	display: table-cell;
	list-style: none;
	position: relative;
	vertical-align: middle;
	margin: 0;
	text-align: center;
}

.global-nav-in li a{
	display: block;
	min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
	padding: 0.6em; /*画像をメニューにする場合は値を0に*/
	color: #fff;
	text-decoration: none;
	border-left:#b5b5b5 solid 1px;	
	font-size:14px;
}

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
	background-color: #717171;
	color: #fff;
}

.global-nav-in li ul{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	width: 100%;
	border-left: 0;
}

/*ドロップダウンメニューのデザイン*/
.global-nav li ul li{
	display: list-item;
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: 0;
	border-right: 0;
	white-space: normal;
}

.global-nav li ul li a{
	display: block;
	padding: 0.8em 2em;
	background:#333;
	color:#fff;
	border-bottom:#b5b5b5 solid 1px;
}

.global-nav-in li ul ul{
	top: 0;
	left: 100%;
}



/* 959px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 959px){
  #wrapper, .inner{width:100%;}

	#header{width:96%;padding:0 2%;}
	
	.contact{padding:10px 0 0px;}

 
	#main, #sidebar{clear:both;width:95%;float:none;margin:0 auto;padding:10px 0;	}
	
	.banner{width:100%;margin:0 auto;text-align:center;}
  p.banner img{width:100%;height:auto;}
	section.widget_search{text-align:center;}
	#calendar_wrap table{width:260px;}
	
	#footer li{margin-bottom:10px;}
	
}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 644px){

	#header{text-align:center;background-image:none;}
	#header h2,.contact{float:none;}

	#headerInfo{width:250px;margin:0 auto;}
	img.alignright, img.alignleft{display: block;	margin:5px auto;}
	.alignright,.alignleft{float:none;}
}




/*パンくずリスト
---------------------------------------------------------------------------*/
#pan {  
    margin:-30px 0 -5px 0;  
    text-align:right;  
    font-size: 85%;
}  
#pan li {  
    display:inline;  
    line-height:110%;  
    list-style-type:none;  
}  
#pan li a {  
    padding-right:10px;  
    background:url(https://power-hikaku.info/images/pan.gif) no-repeat right center;  
}  

/* --- パンくずリスト全体 --- */
ul#pan {
    list-style: none;
    margin: 10px 0 20px;
    padding: 0;
    font-size: 0.85em;
}

/* --------------------------------------
   ★ここがポイント：1行目（著者・公開日・更新日）
--------------------------------------- */
ul#pan li:first-child {
    display: block;             /* ブロック形状を維持 */
    background: #f9f9f9;        /* 薄いグレー背景 */
    
    /* 改修ポイント：線を消し、上下の余白と文字サイズを微縮小 */
    border: none !important;    /* オレンジ線を完全に削除 */
    padding: 5px 12px !important; /* 縦を8px→5pxに、横を15px→12pxに */
    font-size: 0.82rem !important; /* 0.9remからわずかに縮小 */
    
    border-radius: 4px !important; /* 全角を丸くして柔らかい印象に */
    margin-bottom: 10px !important;
    
    color: #64748b !important;  /* 文字色をさらに少し薄くして馴染ませる */
    font-weight: bold;
    line-height: 1.4 !important; /* 行間も少し詰めて縦幅を抑える */
}

/* 鉛筆アイコンもさらに控えめに */
ul#pan li:first-child::before {
    content: "\25A0";
    margin-right: 6px;
    color: #cbd5e1;             /* アイコンの色をさらに薄く */
    font-weight: normal;
}

/* 文末の余計な <br> を消す */
ul#pan li:first-child br:last-child {
    display: none !important;
}

/* 改行時のマージン調整 */
ul#pan li:first-child br {
    display: block !important;
    content: "" !important;
    margin-top: 2px !important;
}

/* 区切り記号「 > 」の非表示設定（継続） */
ul#pan li:first-child::after {
    content: none !important;
}
ul#pan li:first-child + li::before {
    content: none !important;
}

/* 「ホーム > 」の開始設定（継続） */
ul#pan li:nth-child(2) + li::before {
    content: ">" !important;
    margin: 0 8px !important;
    color: #ccc !important;
}



/* --------------------------------------
   2行目以降（ホーム > コラム > ...）
--------------------------------------- */
ul#pan li {
    display: inline; /* ここは横並びのまま */
    color: #888;
}

ul#pan li a {
    text-decoration: none;
    color: #666;
}

/* 区切り文字「>」 */
ul#pan li::after {
    content: ">";
    margin: 0 6px;
    color: #ccc;
    font-size: 0.8em;
}

/* 最後の項目の「>」は消す */
ul#pan li:last-child::after {
    content: "";
}

/* 現在のページ（太字部分）の装飾 */
ul#pan li strong {
    color: #333;
    background: linear-gradient(transparent 70%, #fffacd 70%);
}






/* 画像幅レスポンシブ
----------------------------------------------------*/


p.resizeimg img { max-width: 99%; }
p.imgbig img    { width: 99%; }

@media only screen and (max-width: 500px){
  p.resizeimg img { width: 99%; }
}

/* #main内の画像はすべて画面幅に合わせる */
#main img {
    max-width: 100%;
    height: auto;
    display: inline-block; /* 隙間調整 */
}

/* 古いcenterタグのマージン調整 */
center {
    display: block;
    margin: 20px 0;
    text-align: center;
}





/* main内 */
/* ----------------------------------------------------------- */

#main p {
	padding: 0.5em 10px 1em;	/*左から上、左右、下の余白の数値*/
}


/* --- 見出しデザイン（インパクト強化版） --- */

/* H2：グラデーション背景＋影付きボックス（最強のインパクト） */
#main h2 {
    /* 青のグラデーション（サイトカラーに合わせて変更可） */
    background: linear-gradient(45deg, #1e90ff, #0077dd);
    color: #fff; /* 白文字にしてコントラストを最大化 */
    padding: 15px 20px; /* 余白をたっぷりとる */
    border-radius: 6px; /* 角丸 */
    
    /* 影をつけてページから浮き上がらせる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* 既存の線をリセット */
    border: none;
    
    font-size: 1.4em;
    font-weight: bold;
    margin: 50px 0 30px; /* 上の余白を広げて区切りを強調 */
    letter-spacing: 0.05em; /* 文字間を少し広げて読みやすく */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 文字にも薄く影 */
}


#main h2:first-of-type {
    margin-top: 25px !important;    /* ほどよい距離感 */
    margin-bottom: 20px !important; /* 下の文章とも距離をとる */
    line-height: 1.4 !important;
}

#pan {
    margin-bottom: 15px !important; /* 日付ボックスの下に少し余韻を */
}



/* H3：左線＋下線（H2に負けない中見出し） */
#main h3 {
    padding: 10px 15px;
    background: #fdfdfd; /* ほんのりグレー背景 */
    
    /* 左に太い線、下に細い線 */
    border-left: 6px solid #1e90ff;
    border-bottom: 2px solid #ddd;
    
    font-size: 1.25em;
    font-weight: bold;
    margin: 35px 0 20px;
    color: #333;
}

/* H4：シンプル左線（小見出し） */
#main h4 {
    padding: 5px 0 5px 12px;
    
    /* 左にグレーの線 */
    border-left: 5px solid #ccc;
    
    font-size: 1.1em;
    font-weight: bold;
    margin: 25px 0 10px;
    color: #555;
    background: none;
}



#main h5 {
	position:relative;
	margin: 60px 20px 20px;
	padding: 0 0 10px;
	border-bottom: 4px solid #BB9150;
	box-sizing: content-box;
	font-weight: bold;
	font-size: 1.3em;
}



/* h2見出し：左に太い線を入れて強調 */
#main h2 {
    background: #f1f5f9 !important;
    border-left: 6px solid #ff4444 !important;
    padding: 12px 15px !important;
    color: #1e293b !important;
    font-size: 1.4em !important;
    margin: 40px 0 20px !important;
}

/* h3見出し：下線のみでシンプルに */
#main h3 {
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    color: #334155 !important;
    font-size: 1.2em !important;
    margin: 30px 0 15px !important;
    position: relative;
}

#main h3::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: #ff4444; /* 短い強調線 */
}



#main {
	background-color: #fff;		/*背景色*/
	padding: 5px;
	font-size:15px;

}



/*フッターメニュー
---------------------------------------------------------------------------*/
ul#footermenu {
	clear: both;
	width: 100%;
	font-size: 11px;		/*文字サイズ*/
	text-align: center;		/*センタリング*/
	background-repeat: no-repeat;
	background-position: bottom;
	padding-top: 20px;
	padding-bottom: 10px;
}

ul#footermenu li {
	display: inline;
	padding-right: 5px;
	padding-left: 5px;
}



/*フッター
---------------------------------------------------------------------------*/
#footer {
	font-size: 11px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔*/
	text-align: center;		/*センタリング*/
	color: #FFFFFF;			/*文字色*/

  background: #333;
  border-bottom: 5px solid #192f60;
}

#footer a {
	color: #D4D9E3;
}






div#footMenu2 {
	box-sizing:border-box;
	float:left;
	width:100%;
	padding:30px;
	background:#f2f2f2;
}


div#footMenu2 .wrap2 {
		box-sizing: border-box;

	}



div#footMenu2 .wrap2 {
   float:left;
   width:300px;
   word-break:break-all;
   float:left;
   margin-bottom: 20px;
}

div#footMenu2 h2 {
   font-size:90%;
}

div#footMenu2 ul{
   margin:0;
   padding:0;
   float:left;
}

div#footMenu2 li {
	margin-left:20px;
	font-size:13px;
}


/*ページトップボタン*/
.page-top{
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	line-height: 1.2;
	margin-bottom: 0;
}



/* サムネイルつき矢印リスト */
---------------------------------------------------------------------------*/
.list3 ul{
 border-bottom: 1px solid #ccc;
 width: 100%
 }

 .list3 ul li{
 border-top: 1px solid #ccc;
 height: 100px;
 margin: 18px 5px 13px 5px;
 }

 .list3 ul li a{
 color: #666;
 display: block;
 height: 98px;
 margin: 2px 0 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
 text-decoration: none;
 vertical-align: top;
 font-size: 14px;
 }

 .list3 ul li img{
 float: left;
 height: 98px;
 weight: 98px
 }

 .list3 ul li a strong{
 color: #000;
 font-weight: bold;
 padding-top: 17px;
 }

 .list3 h3{
 color: #000;
 font-weight: bold;
 font-size: 17px;
 color: #1111cc;
 }




/* 文章強調
----------------------------------------------------------- */
span.imp {
	text-align: justify;
	font-size: 110%;
	line-height: 160%;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-weight: bold;
	text-decoration: underline;
}


span.imp2 {
	text-align: justify;
	font-size: 110%;
	line-height: 160%;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-weight: bold;
}


span.tibi{
	font-size: 78%;
	color:#C0C0C0;
}




span.vsma {
	text-align: center;
	font-size: 9px;
	line-height: 120%;
	color: #FFFFFF;
}

span.sma {
	text-align: center;
	font-size: 16px;
	line-height: 105%;
	color: #FFFFFF;
	font-weight: bold;
}




span.int {
	font-size: 9px;
	line-height: 105%;
}


span.ys {
border-bottom: 3px solid #00FFFF ;
font-size: 120%;
}

span.yr {
border-bottom: 3px solid #FF0072 ;
font-size: 120%;
}



strong.yb {
background: linear-gradient(transparent 40%, #00FFFF 40%);
font-size: 105%;
}


strong.ys {
background: linear-gradient(transparent 60%, #00FFFF 60%);
font-size: 105%;
}









/* テーブル比較表
----------------------------------------------------------- */


table.hikaku {
  width: auto;
  border-spacing: 0;
}
table.hikaku th {
  color: #fff;
  background: #258;
  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
  font-weight: bold;
  border-left:1px solid #258;
  border-top:1px solid #258;
  border-bottom:1px solid #258;

  text-align: center;
  text-shadow:0 -1px 0 rgba(34,85,136,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}

table.hikaku th:first-child {
  border-radius: 5px 0 0 0;	
}

table.hikaku th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #258;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}

table.hikaku tr td {
  padding: 3px 10px;
  border-bottom: 1px solid #84b2e0;
  border-left: 1px solid #84b2e0;
  text-align: center;
}
table.hikaku tr td:last-child {
  border-right: 1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table.hikaku tr {
  background: #fff;
}
table.hikaku tr:nth-child(2n+1) {
  background: #f1f6fc;
}
table.hikaku tr:last-child td {
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table.hikaku tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
table.hikaku tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
/*table.hikaku tr:hover {
  background: #bbd4ee;
  cursor:pointer;
}


/* TABLEスクロール設定
----------------------------------------------------------- */
div .table-parent {
  width: 730px;
  overflow: hidden;
}

div .left-index {
  width: 155px;
  float: left;
  margin:0px;
}

div .right-scroll {
  width: 575px;
  float: left;
  overflow-y: hidden;
  overflow-x: scroll;
  margin:0px;
}

/* for jQuery
----------------------------------------------------------- */
tr.closetab {
  background: #91969c;
}

tr.closetab td {
  font-size: 60%;
	padding: 2px;
}

tr.closetab td:hover {
  cursor:pointer;
	text-decoration: underline;
}

p.open-all {
	text-align: right; 
  	font-size: 80%;
	visibility: hidden;
}

p.open-all:hover {
	text-decoration: underline;
	cursor: pointer;
	color: #AAA; 
}



/* ========================================  menuL 左サイドメニュー */
#menuL {
	float: left;
	clear: left;
	width: 220px;
	padding: 0;
	margin: 10px 0;
	color: #FFF;
}



.menuInfo { /* サイドボックス内のメッセージボックス */
	color:#333;
	margin:10px 0 0;
	padding:1px 0;
}



.menuInfo p {
	padding: 0 0 0 10px;
	margin: 1em 10px 1em 5px;
}


.subinfo {　/* サイドボックのメニュー */
	margin:0 0 10px;
	background-image: url(https://securitysoft.asia/images/submenuback002.png);
}

.subinfosearch {
	margin:20px 0;
}



.subinfo .label { /* サイドボックのメニュー:ラベル */
	padding:6px 0px 6px 10px;
	margin: 15px 0px 10px;
	color: #fff;
	font-size:15px;
	background: #666;
	background-repeat: repeat-x;
	background-position: left top;
	height: 27px;
	border-radius: 2px;
	font-weight: bold;
}


.subinfo ul{ /* サイドボックのメニュー:リスト */
	margin: 0 0 17px;
}


.subinfo li {
	padding: 0px;
	margin: 5px 0px 0px;
	font-size: 13px;
	color: #666666;
	list-style-type: none;
}


.subinfo li a{
	padding: 5px 10px;
	border-bottom: 1px solid #E5E5E5;
	border-left: 7px solid #E5E5E5;
	text-decoration: none;
	display: block;
	font-size:13px;
	color: #333;
}


.subinfo li a:hover{
	border-left: 7px solid #0095d9;
	color: #0095d9;
}



.subinfo .label_admin { /* サイドボックのメニュー:ラベル */
	padding:3px 0px 0px 15px;
	color: #19448e;
	font-size:14px;
	margin: 0px;
	height: 18px;
	font-weight: bold;
	border-bottom:solid 1px #19448e;
}


.subinfo p{
	padding:0px 0px 0px 15px;
	font-size:12px;
}




.testmenu{
	background: #fff;
}

.testmenu2{
  display: inline-block;
  text-align: center;
}

.testmenuimg{
width:60px
}



/* サンプル7
----------------------------------------------------------- */

.sample7 th	{
	background: #CAE5F1 url(https://power-hikaku.info/images/i/th.jpg) repeat-x;
	border-top: 2px solid #1D5C79;
	border-bottom: 1px solid #FFF;
	text-align:center;
}
.sample7 td	{
	background: #F4FAFC url(https://power-hikaku.info/images/i/td.jpg) repeat-x;
	border-bottom: 1px solid #FFF;

}



/* レスポンシブテーブル
----------------------------------------------------------- */

@media only screen and (min-width:421px){
    #demo #words{
        display: table-row-group;
    }
    #demo dl{
        display: table-row;
        margin: 0;
    }
        #demo dl dt,
        #demo dl dd{
            display: table-cell;
            padding: 5px;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }

}


/*----------------------------------------------------
    .smartphone/free/soft用レスポンシブテーブル demo01
----------------------------------------------------*/


/* ベースの表デザイン */
table.demo01 {
    width: 100%;
    border-collapse: separate; /* 角丸のためにseparateに変更 */
    border-spacing: 0; /* 隙間はなくす */
    margin: 0px 0;
    font-size: 0.95em;
    background: #fff;
    border-radius: 8px; /* 全体を角丸に */
    overflow: hidden; /* はみ出し防止 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* ふんわりリッチな影 */
    border: none; /* デフォルトの線を消す */
}

/* ヘッダーセル（項目名） */
table.demo01 th {
    background: #f9f9f9 !important; /* 薄いグレー */
    color: #333 !important;
    font-weight: bold;
    padding: 15px;
    text-align: left;
    width: 20%;
    border-bottom: 1px solid #eee;
    position: relative; /* アクセント線のために必要 */
}

/* 左側のアクセントライン（ここがポイント） */
table.demo01 th::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #0066ff;
}

/* データセル（中身） */
table.demo01 td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #555;
    background: #fff;
}

/* 最後の行の下線を消す */
table.demo01 tr:last-child th,
table.demo01 tr:last-child td {
    border-bottom: none;
}

/* 古いタグの無効化（必須） */
table.demo01 font {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}







/*--------------------------------------------------------
更新履歴系
--------------------------------------------------------*/

/* --- 横並びを強制（他CSSに勝つ） --- */
.site-updates li.update {
  display: grid !important;
  /* 左カラム＝日付は中身にフィット / 右は可変で広く */
  grid-template-columns: max-content 1fr !important;
  column-gap: 1em !important;
  align-items: stretch !important;             /* 行高に合わせる（縦中央の土台） */
  border-bottom: 1px solid #e5e7eb !important;
  padding: 6px 10px !important;
}
.site-updates li.update:last-child { border-bottom: none !important; }

/* 子要素の配置 */
.site-updates li.update > time { grid-column: 1 !important; }
.site-updates li.update > ul   { grid-column: 2 !important; }

/* --- 内容カラム基準のフォントサイズ（本文側を小さめに） --- */
.site-updates li.update > ul {
  font-size: 0.9em !important;     /* 更新内容の文字サイズを確実に縮小 */
  line-height: 1.7 !important;
}

/* --- 日付（縦中央 & 細め幅） --- */
.site-updates li.update > time {
  color: #111 !important;
  font-weight: 600;
  font-size: 0.92em !important;
  min-width: 4.8ch !important;     /* 例: 10/02 が収まる最小幅 */
  align-self: stretch !important;
  display: flex !important;         /* セル内で縦中央に */
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 1.2 !important;
  text-align: left;
}

/* 注釈（本文より少しだけ小さく） */
.site-updates .note {
  color: #333 !important;
  font-weight: 500;
  font-size: 0.85em !important;
}

/* リンク（内容カラムのサイズを継承） */
.site-updates a {
  color: #2563eb !important;
  font-weight: 600;
  font-size: inherit !important;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.site-updates a:hover,
.site-updates a:active {
  color: #2563eb !important;
  text-decoration: underline;
}

/* --- 「新着」「更新」チップ：手入力方式 --- */
/* 1) li にクラスを付ける場合 */
.site-updates li.update > ul > li.is-new::after,
.site-updates li.update > ul > li.is-update::after {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .55em;
  font-size: 0.75em !important;
  font-weight: 700;
  border-radius: 999px;
}
.site-updates li.update > ul > li.is-new::after {
  content: "新着";
  background: #fff7ed;  color: #ea580c;
}
.site-updates li.update > ul > li.is-update::after {
  content: "更新";
  background: #eef4ff;  color: #2563eb;
}

/* 2) span を入れる場合（任意） */
.site-updates .chip {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .55em;
  font-size: 0.75em !important;
  font-weight: 700;
  border-radius: 999px;
}
.site-updates .chip--new    { background: #fff7ed; color: #ea580c; }
.site-updates .chip--update { background: #eef4ff; color: #2563eb; }

/* モバイルでさらに日付を詰める */
@media (max-width: 480px) {
  .site-updates li.update > time {
    min-width: 4.4ch !important;
    font-size: 0.86em !important;
  }
  .site-updates li.update > ul {
    font-size: 0.88em !important;
  }
}





/*--------------------------------------------------------
関連記事系
--------------------------------------------------------*/

/* --- ベースのレイアウト（全体共通） --- */
.card-link-section {
    margin: 2em 0;
    padding: 0 10px;
}

.card-link-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 5px solid #ff9317; /* アクセントカラー */
}

.card-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px; /* カード間の隙間 */
}

/* --- カード自体のデザイン --- */
.card-link-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

/* ★ aタグの設定（矢印の基準点） */
.card-link-a {
    display: flex !important;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 12px 35px 12px 12px; /* 右側に矢印用の余白を確保 */
    position: relative !important; /* CRITICAL: 矢印固定の杭 */
    height: 100%;
    box-sizing: border-box;
}

.card-link-item:hover {
    border-color: #ff9317;
    background-color: #f8fafc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- 画像エリア --- */
.card-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-right: 15px;
    /* background: #f1f5f9;  ← この行を削除、または以下に変更 */
    background: transparent !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-thumb img {
    width: 100%;
    height: auto;
    max-height: 100%; /* 縦長画像でもはみ出さないように */
    object-fit: contain;
    display: block;
}

/* --- テキストエリア --- */
.card-text-area {
    flex-grow: 1;
}

.card-main-text {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    color: #1e293b;
}

.card-sub-text {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.4;
}

/* --- ★ CSSのみで描く矢印（Shift_JISでも絶対に消えない） --- */
.card-link-a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    width: 7px !important;
    height: 7px !important;
    border-top: 2px solid #cbd5e1 !important;
    border-right: 2px solid #cbd5e1 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transition: all 0.2s;
}

/* ホバー時に矢印をオレンジにして少し動かす */
.card-link-item:hover .card-link-a::after {
    border-color: #ff9317 !important;
    right: 12px !important;
}

/* =========================================
   ▼ レスポンシブ設定
   ========================================= */

/* スマホ・タブレット（767px以下） */
@media screen and (max-width: 767px) {
    .card-link-list {
        grid-template-columns: 1fr; /* 1列表示 */
    }

    .card-sub-text {
        display: none; /* スマホでは説明文を消してスッキリ */
    }
    
    .card-main-text {
        font-size: 14px; 
    }
}

/* PC（768px以上） */
@media screen and (min-width: 768px) {
    .card-link-list {
        grid-template-columns: 1fr 1fr; /* 2列表示 */
    }
}




/*--------------------------------------------------------
2社比較
--------------------------------------------------------*/





/* --- 全体の枠組み --- */
.vs-link-section {
    margin: 40px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* --- タイトル周り --- */
.vs-title {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 5px 0;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
}

/* VSバッジの装飾 */
.vs-badge {
    background: #ff4444; /* 赤色で対決感を出す */
    color: #fff;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-weight: 800;
    font-style: italic; /* 斜体でスピード感 */
}

.vs-desc {
    font-size: 0.85em;
    text-align: center;
    color: #666;
    margin: 0 0 15px 0;
}

/* --- ボタンを並べるグリッド --- */
.vs-grid {
    display: grid;
    /* スマホは2列、PCは自動で列が増える魔法の記述 */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px; /* ボタン同士の隙間 */
}

/* --- ボタンのデザイン --- */
.vs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 5px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 0 rgba(0,0,0,0.05); /* 立体感 */
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}

/* ホバー・タップ時の動き */
.vs-btn:hover {
    transform: translateY(1px); /* 押した感じ */
    box-shadow: none;
    border-color: #0066ff; /* 枠線がオレンジに */
    color: #0066ff; /* 文字もオレンジに */
    background: #fffaf0;
}

.card-label {
    font-size: 0.85em; /* 本文より少し小さく */
    font-weight: bold;
    color: #888;       /* 主張しすぎないグレー */
    margin: 0 0 8px 4px; /* リストとの距離を調整（左端を少し空ける） */
    line-height: 1;
}





/* --- 公式サイトボタン（画像をボタンっぽくする） --- */
#main center a img {
    /* 影をつけて立体的に */
    box-shadow: 0 4px 0 #dcdcdc, 0 5px 10px rgba(0,0,0,0.1);
    border-radius: 6px; /* 角を少し丸く */
    transition: all 0.1s; /* アニメーション速度 */
    /* 画像自体のマージン調整 */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* マウスを乗せた時（ホバー） */
#main center a img:hover {
    transform: translateY(2px); /* 2px沈む */
    box-shadow: 0 2px 0 #dcdcdc, 0 3px 6px rgba(0,0,0,0.1); /* 影を減らす */
    opacity: 0.9; /* 少し明るく */
}

/* スマホでタップした時 */
#main center a img:active {
    transform: translateY(4px); /* 4px沈む（完全に押した状態） */
    box-shadow: none; /* 影なし */
}






/*--------------------------------------------------------
サイトデザインブラッシュアップ20260129
--------------------------------------------------------*/


/* ==========================================================================
   【決定版】ヘッダー・シミュレーションボタン・ナビゲーション統合スタイル
   2026/01/30 最終調整 - 重複を削除し、位置ズレを修正
   ========================================================================== */

/* -------------------------------------------------------
   1. ヘッダー全体のレイアウト（崩れ防止）
------------------------------------------------------- */
.l-header, .l-header__inner {
    overflow: visible !important; /* メニューがはみ出しても切れないように */
    z-index: 99999 !important;    /* 最前面に表示 */
}

/* PCでは横並びを強制（ボタンが潰れるのを防ぐ） */
.l-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 10px 20px !important;
}

/* -------------------------------------------------------
   2. 料金シミュレーションボタン（オレンジ色）の位置修正
------------------------------------------------------- */
/* ボタン配置エリア（ここを基準にメニューを表示） */
.site-titlesimu2 {
    display: block !important;
    width: 290px !important; /* ★重要：ボタンと同じ幅に固定 */
    flex-shrink: 0 !important;
    margin: 0 15px !important;
    position: relative !important; /* ここを基準点にする */
    z-index: 100000 !important;
}

/* ボタン本体 */
.btn-trust {
    display: block !important;
    width: 100% !important; /* 親要素いっぱいに広げる */
    max-width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* --- プルダウンメニュー（位置ズレ修正） --- */
.launcher-dropdown {
    display: none !important; /* 最初は非表示 */
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* 位置と見た目 */
    position: absolute !important;
    top: 100% !important; /* ボタンの真下に配置 */
    left: 50% !important; /* 親の中心を基準に */
    transform: translateX(-50%) !important; /* 自身の中心を合わせる（ど真ん中配置） */
    margin-top: 10px !important; /* ボタンとの隙間 */
    
    width: 340px !important;
    max-width: 90vw !important;
    background: #fff !important;
    border: 3px solid #0066ff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    padding: 15px !important;
    z-index: 100001 !important;
}

/* 三角吹き出し（位置合わせ） */
.launcher-dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #0066ff;
}

/* ★修正：マウスオーバー（ホバー）での表示を許可する場合 */
/* もし「クリックのみ」にしたい場合は、下のブロックを削除してください */
.site-titlesimu2:hover .launcher-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: fadeIn 0.2s ease-out forwards !important;
}

/* クリック時（JavaScript動作）も表示 */
.launcher-dropdown.is-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* -------------------------------------------------------
   3. グローバルナビ（黒いメニューバー）の修正
------------------------------------------------------- */
/* バー全体 */
.global-nav {
    background: #333 !important;
    width: 100% !important;
    border-top: 4px solid #0066ff !important; /* オレンジから青に変更 */
    border-bottom: 2px solid #0044cc !important; /* 下側のラインを濃い青で強調 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    position: relative !important;
    z-index: 9999 !important;
}

.global-nav-in {
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* 親メニューリスト */
.nav-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-list > li {
    flex: 1 !important;
    position: relative !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
}
.nav-list > li:first-child { border-left: 1px solid rgba(255,255,255,0.15) !important; }

/* 親リンク */
.nav-list > li > a {
    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 14px 5px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}
.nav-list > li:hover > a { background: #d64545 !important; color: #fff !important; }

/* --- ドロップダウンメニュー共通 --- */
.nav-drop-menu {
    display: none; /* 初期非表示 */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 240px !important;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    z-index: 10000 !important;
    padding: 0 !important;
    border-top: 3px solid #0066ff !important;
}

/* ホバーで表示 */
.has-dropdown:hover .nav-drop-menu { display: block !important; }

/* メガメニュー（地域選択用）の幅 */
.nav-drop-menu.nav-mega {
    width: 320px !important;
}

/* 地域リスト（グリッド表示）の修正 */
ul.nav-area-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #fff !important;
}

/* リストアイテム */
ul.nav-area-grid li {
    display: block !important;
    width: 50% !important; /* 2列 */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
}

/* リンク文字色（黒に修正） */
ul.nav-area-grid li a {
    display: block !important;
    color: #333 !important;
    font-size: 13px !important;
    padding: 10px 5px !important;
    text-align: left !important;
    text-decoration: none !important;
    background: #fff !important;
    border-bottom: 1px dashed #eee !important;
    border-right: 1px dashed #eee !important;
}
ul.nav-area-grid li a:hover {
    background: #d64545 !important;
    color: #fff !important;
}

/* オール電化フッター */
.nav-mega-footer {
    display: block !important;
    width: 100% !important;
    background: #f0fff4 !important;
    color: #00802b !important;
    text-align: center !important;
    padding: 12px 0 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    clear: both !important;
}

/* 法人メニュー（青） */
.nav-list > li.nav-business { background: #003366 !important; }
.nav-list > li.nav-business:hover > a { background: #0056b3 !important; }



@media screen and (min-width: 769px) {
    /* 1. ドロップダウン全体の枠組み */
    .nav-drop-menu, 
    .global-nav li ul {
        background-color: #ffffff !important; /* 背景を純白にして清潔感を出す */
        border-top: 3px solid #d64545 !important; /* 上部にアクセントライン */
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; /* 影を強くして浮かせる */
        padding: 5px 0 !important;
        min-width: 220px !important;
    }

    /* 2. 各項目のリスト */
    .nav-drop-menu li,
    .global-nav li ul li {
        border-bottom: 1px solid #f0f0f0 !important; /* 薄い区切り線 */
        width: 100% !important;
        display: block !important;
    }
    .nav-drop-menu li:last-child {
        border-bottom: none !important;
    }

    /* 3. リンク文字のデザイン（ここが可読性の肝です） */
    .nav-drop-menu li a,
    .global-nav li ul li a {
        color: #334155 !important;       /* 読みやすいダークグレー */
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 12px 20px !important;
        text-align: left !important;
        display: block !important;
        background-color: #ffffff !important;
        transition: all 0.2s ease !important;
    }

    /* 4. マウスを乗せた（ホバー）時の色の変化 */
    /* 背景をブランドカラーにし、文字を白く反転させることで「今どこを触っているか」を一瞬で判別させます */
    .nav-drop-menu li a:hover,
    .global-nav li ul li a:hover {
        background-color: #d64545 !important; /* 背景：オレンジ */
        color: #ffffff !important;            /* 文字：白 */
        padding-left: 25px !important;        /* 少し右にスライドさせて動きを出す */
    }

    /* メガメニュー（地域選択など）の背景も統一 */
    .nav-mega, 
    ul.nav-area-grid {
        background-color: #ffffff !important;
    }
    
    ul.nav-area-grid li a {
        color: #334155 !important;
        border: 1px solid #f0f0f0 !important;
    }
}


/* -------------------------------------------------------
   4. スマホ対応（レスポンシブ）
------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* ヘッダー内を折り返し許可 */
    .l-header__inner {
        flex-wrap: wrap !important;
        padding-bottom: 10px !important;
    }
    
    /* オレンジボタンを2段目に落とす */
    .site-titlesimu2 {
        width: 100% !important;
        margin: 15px 0 0 0 !important;
        order: 3 !important;
        text-align: center !important;
    }
    
    .btn-trust {
        width: 96% !important;
        margin: 0 auto !important;
    }

    /* メニューを縦並びに */
    .nav-list { display: block !important; }
    .nav-list > li { border-right: none !important; border-bottom: 1px solid #444 !important; }
    
    /* ドロップダウンをリセット */
    .nav-drop-menu,
    .nav-drop-menu.nav-mega {
        position: static !important;
        width: 100% !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* 地域リストを1列に */
    ul.nav-area-grid li { width: 100% !important; }
    ul.nav-area-grid li a { border-right: none !important; padding-left: 20px !important; }
    
    /* スマホでのアニメーション調整 */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}



/* ==========================================================================
   【復活】削除してしまったデザイン（ボタン装飾・サイドバー）
   2026/01/30 追加 - これで表示とメニューが直ります
   ========================================================================== */

/* -------------------------------------------------------
   1. シミュレーションボタンの「見た目」を復活
------------------------------------------------------- */
/* ボタンの内側のデザイン（ここがないと透明で見えません） */
.btn-trust-inner {
    background: linear-gradient(135deg, #0044cc, #0088ff) !important; 
    border: 2px solid #fff !important;
    outline: 2px solid #ff8c00 !important; /* 外枠 */
    border-radius: 12px !important;
    box-shadow: 0 6px 15px rgba(255, 102, 0, 0.4) !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: flex-start !important;
    min-height: 50px !important; /* 高さを確保 */
}

/* マウスを乗せた時の動き */
.site-titlesimu2:hover .btn-trust-inner {
    background: linear-gradient(135deg, #ffa500, #ff7700) !important;
    transform: translateY(2px) !important;
}

/* アイコン（虫眼鏡） */
.trust-icon {
    font-size: 26px !important;
    color: #fff !important;
    margin-right: 12px !important;
    margin-top: 5px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* テキストエリア */
.trust-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 上のバッジ（452社掲載...） */
.trust-badge {
    font-size: 10px !important;
    color: #d95400 !important;
    background: #fff !important;
    font-weight: bold !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
}

/* メインの文字（地域を選んで...） */
.trust-main {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #fff !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
}

/* 下の情報（更新日など） */
.trust-info-inline {
    font-size: 9px !important;
    color: rgba(255,255,255,0.9) !important;
    margin-top: 4px !important;
    font-family: sans-serif !important;
    white-space: nowrap !important;
}

/* -------------------------------------------------------
   2. 左サイドバー（レフトメニュー）のデザイン復活
------------------------------------------------------- */
/* サイドバー全体の枠 */
.sidebar-widget {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    border: 1px solid #eee !important;
}








/* 見出し */
.widget-title {
    font-weight: bold !important;
    border-bottom: 2px solid #0066ff !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
    font-size: 1.1em !important;
    color: #333 !important;
}

/* プロフィール部分 */
.profile-header {
    text-align: center !important;
    margin-bottom: 10px !important;
    border-bottom: 1px dashed #eee !important;
    padding-bottom: 10px !important;
}
.profile-role {
    font-size: 0.75em !important;
    color: #0066ff !important;
    font-weight: bold !important;
    margin: 0 !important;
}
.profile-name {
    font-size: 1.2em !important;
    font-weight: bold !important;
    margin: 5px 0 0 !important;
}
.profile-desc {
    font-size: 0.85em !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}
.profile-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}
.profile-links a {
    font-size: 0.8em !important;
    background: #f0f0f0 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    color: #555 !important;
    text-decoration: none !important;
}

/* サイドバーのリンクメニュー */
.nav-widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.nav-widget ul li {
    border-bottom: 1px solid #f9f9f9 !important;
    margin: 0 !important;
}
.nav-widget ul li a {
    display: block !important;
    padding: 8px 0 8px 15px !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.95em !important;
    position: relative !important;
}
/* 矢印アイコン */
.nav-widget ul li a::before {
    content: "\203A" !important; /* ? */
    position: absolute !important;
    left: 0 !important;
    color: #ccc !important;
    font-weight: bold !important;
}
/* ホバー時 */
.nav-widget ul li a:hover {
    color: #0066ff !important;
    background: #fffcf5 !important;
    padding-left: 18px !important;
}
.nav-widget ul li a:hover::before {
    color: #0066ff !important;
}

/* -------------------------------------------------------
   3. スマホ表示時のボタン調整（念のため再定義）
------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .btn-trust-inner {
        justify-content: center !important;
        padding: 6px 10px !important;
        min-height: 0 !important;
    }
    .trust-text {
        align-items: center !important;
        text-align: center !important;
    }
    .trust-badge {
        align-self: center !important;
        margin-bottom: 1px !important;
    }
    .trust-info-inline {
        display: none !important; /* スマホでは情報バーを消す */
    }
}

/* ==========================================================================
   【最終調整】配置・デザイン崩れの完全修正
   2026/01/30 - 右寄せ＆プルダウンデザイン復活
   ========================================================================== */

/* -------------------------------------------------------
   1. ヘッダーボタンを「右寄せ」にする修正
------------------------------------------------------- */
/* ヘッダーの中身を「ロゴ(左)」と「ボタン(右)」に分ける */
.l-header__inner {
    justify-content: space-between !important; /* 両端揃え */
    width: 100% !important;
}

/* ボタンエリアを強制的に右へ押す */
.site-titlesimu2 {
    margin-left: auto !important; /* 左側の余白を最大にして右へ寄せる */
    margin-right: 0 !important;
    display: block !important;
}

/* -------------------------------------------------------
   2. プルダウンメニュー内（地域リスト）のデザイン修正
------------------------------------------------------- */
/* リストの枠組み（ここが崩れていました） */
.launcher-list {
    display: flex !important;
    flex-wrap: wrap !important; /* 折り返し許可 */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 8px !important; /* ボタン同士の隙間 */
}

/* リストアイテム（2列配置） */
.launcher-list li {
    width: calc(50% - 4px) !important; /* 隙間分を引いて2列に */
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* リンクボタンのデザイン */
.launcher-list li a {
    display: block !important;
    background: #fff !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 10px 0 !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    font-weight: bold !important;
    box-shadow: 0 2px 0 #eee !important;
    transition: all 0.2s !important;
}

/* マウスを乗せた時 */
.launcher-list li a:hover {
    background: #ff8c00 !important;
    color: #fff !important;
    border-color: #ff8c00 !important;
    transform: translateY(-2px) !important;
}

/* -------------------------------------------------------
   3. プルダウン内の「法人・オール電化」ボタン修正
------------------------------------------------------- */
.launcher-extra-btns {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.btn-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50% !important;
    text-decoration: none !important;
    padding: 8px 4px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border: 1px solid #eee !important;
}

/* 法人ボタン（青） */
.btn-extra.business { background: #f0f8ff !important; color: #0056b3 !important; }
.btn-extra.business:hover { background: #0056b3 !important; color: #fff !important; }

/* オール電化ボタン（緑） */
.btn-extra.alldenka { background: #f0fff4 !important; color: #00802b !important; }
.btn-extra.alldenka:hover { background: #00802b !important; color: #fff !important; }




/* ==========================================================================
   【最終微調整】2026/01/30 - 余白・閉じるボタン・フッター列修正
   ========================================================================== */

/* -------------------------------------------------------
   1. シミュレーションボタンの右側余白を追加
------------------------------------------------------- */
.site-titlesimu2 {
    /* 右端に20pxのスペースを空ける */
    margin-right: 20px !important; 
}

/* -------------------------------------------------------
   2. プルダウン内「閉じる」ボタンのデザイン改善
------------------------------------------------------- */
.launcher-close {
    display: block !important;
    margin-top: 15px !important;
    padding: 12px 0 !important;
    background: #f0f0f0 !important; /* 薄いグレー背景 */
    color: #555 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-align: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    border: 1px solid #ddd !important;
}

/* ×アイコンを追加して分かりやすく */
.launcher-close::before {
    content: "\00D7 " !important;
    margin-right: 4px !important;
}

/* ホバー時の色変化 */
.launcher-close:hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}

/* -------------------------------------------------------
   3. フッターメニューを横3段（3列）に分割
------------------------------------------------------- */
.footer-grid {
    display: flex !important; /* フレックスボックスで横並びにする */
    justify-content: space-between !important; /* 均等配置 */
    align-items: flex-start !important; /* 上揃え */
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 各カラムの幅指定（3列にするため約30%） */
.footer-col {
    width: 30% !important;
    box-sizing: border-box !important;
    margin-bottom: 30px !important;
    border-right: 1px solid #444 !important; /* 列の区切り線 */
    padding-right: 10px !important;
}

/* 最後の列だけ右線を消す */
.footer-col:last-child {
    border-right: none !important;
}

/* スマホでは1列に戻す */
@media screen and (max-width: 768px) {
    .site-titlesimu2 {
        margin-right: 0 !important; /* スマホでは右余白なし（中央寄せ） */
    }
    
    .footer-grid {
        display: block !important; /* 縦並び */
    }
    .footer-col {
        width: 100% !important;
        border-right: none !important;
        margin-bottom: 40px !important;
    }
}


/* ==========================================================================
   【最終調整版】2026/01/30
   1. 閉じるボタンの簡素化
   2. ページトップボタンの強化
   3. フッターのモダンデザイン化
   ========================================================================== */

/* -------------------------------------------------------
   1. プルダウン内の「閉じる」ボタンをシンプルに
------------------------------------------------------- */
/* 大きなボタン廃止 → 右寄せのテキストリンクに変更 */
.launcher-close {
    display: inline-block !important;
    width: auto !important;
    float: right !important; /* 右端に寄せる */
    margin-top: 10px !important;
    padding: 5px 10px !important;
    background: transparent !important; /* 背景なし */
    border: none !important; /* 枠線なし */
    color: #999 !important; /* 目立たないグレー */
    font-size: 11px !important;
    font-weight: normal !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

/* アイコンもシンプルに */
.launcher-close::before {
    content: "×" !important;
    font-size: 1.2em !important;
    margin-right: 2px !important;
}

/* ホバー時は少し濃く */
.launcher-close:hover {
    color: #555 !important;
    background: transparent !important;
}

/* -------------------------------------------------------
   2. ページトップボタンを目立たせる（右端配置）
------------------------------------------------------- */
.pagetop {
    right: 10px !important; /* 画面右端ギリギリに配置 */
    bottom: 20px !important;
    width: 60px !important; /* サイズアップ */
    height: 60px !important;
    line-height: 60px !important;
    
    /* 鮮やかなグラデーションと強い影 */
    background: linear-gradient(135deg, #ffaa00, #ff5500) !important;
    box-shadow: 0 5px 15px rgba(255, 85, 0, 0.4) !important;
    
    border-radius: 50% !important;
    font-size: 24px !important; /* 矢印を大きく */
    color: #fff !important;
    opacity: 1 !important; /* 常にハッキリ表示 */
    z-index: 99999 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

/* 矢印アイコンの調整（文字化け防止コード） */
.pagetop::before {
    content: "\25B2" !important; /* ▲ */
}
/* テキスト（▲）を消してアイコンだけにする場合 */
.pagetop {
    font-family: Arial, sans-serif !important;
}

/* ホバー時のアクション */
.pagetop:hover {
    transform: translateY(-5px) !important; /* 浮き上がる */
    box-shadow: 0 8px 20px rgba(255, 85, 0, 0.6) !important;
}

/* -------------------------------------------------------
   3. フッターのモダンデザイン化
------------------------------------------------------- */
/* 全体：ダークネイビーで引き締め、上部にアクセントライン */
.l-footer {
    background: #1a202c !important; /* 最近流行りのダークブルーグレー */
    color: #cbd5e0 !important; /* 読みやすい薄いグレー */
    padding: 60px 0 20px !important;
    margin-top: 60px !important;
    position: relative !important;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
}

/* 上部のアクセント（ブランドカラーのグラデーション） */
.l-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0044cc, #0088ff, #ff4444);
}

/* カラムレイアウトの調整（余白を広めに） */
.footer-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 40px !important;
    margin-bottom: 50px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* 下線を追加 */
    padding-bottom: 30px !important;
}

/* 見出しのデザイン */
.footer-title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 20px !important;
    padding-left: 0 !important;
    border-left: none !important; /* 左線廃止 */
    position: relative !important;
    display: inline-block !important;
}
/* 見出しの下に短い線を引くスタイル */
.footer-title::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #ff4444;
    margin-top: 8px;
}

/* リンクのデザイン */
.footer-col ul li {
    margin-bottom: 10px !important;
}

.footer-col ul li a {
    color: #a0aec0 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    position: relative !important;
    padding-left: 0 !important;
}

/* ホバー時に右へスライドして白くなる */
.footer-col ul li a:hover {
    color: #fff !important;
    text-decoration: none !important;
    transform: translateX(5px) !important;
}

/* 著作権表示エリア */
.footer-bottom {
    border-top: none !important;
    padding-top: 10px !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #718096 !important;
}
.footer-links a {
    color: #718096 !important;
    margin: 0 15px !important;
    transition: color 0.2s !important;
}
.footer-links a:hover {
    color: #fff !important;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .footer-grid {
        display: block !important;
        gap: 0 !important;
    }
    .footer-col {
        width: 100% !important;
        margin-bottom: 30px !important;
        padding-right: 0 !important;
        border-right: none !important;
    }
    .pagetop {
        bottom: 15px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        line-height: 50px !important;
    }
}


/* ==========================================================================
   【緊急微調整】2026/01/30 - 位置ズレとアイコン重複の修正
   ========================================================================== */

/* -------------------------------------------------------
   1. プルダウンメニューの表示位置を「左」にずらす
------------------------------------------------------- */
.launcher-dropdown {
    /* これまでの「中央揃え」を解除して、「右端合わせ」に変更 */
    left: auto !important;
    right: 0 !important;       /* ボタンの右端に合わせる */
    transform: none !important; /* 中央寄せの計算を解除 */
    
    /* 微調整：少しだけ画面の内側に入れる */
    margin-right: -10px !important; 
}

/* -------------------------------------------------------
   2. ページトップボタンの「▲▲」重複を直す
------------------------------------------------------- */
/* CSSでのアイコン追加を無効化（HTMLに既に▲があるため） */
.pagetop::before {
    content: none !important;
    display: none !important;
}

/* -------------------------------------------------------
   3. ページトップボタンを「右下」に配置する
------------------------------------------------------- */
.pagetop {
    position: fixed !important; /* 画面に固定 */
    right: 20px !important;     /* 右から20px */
    bottom: 20px !important;    /* 下から20px */
    left: auto !important;      /* 左の指定を解除 */
    top: auto !important;       /* 上の指定を解除 */
    margin: 0 !important;       /* 中央寄せのマージンを解除 */
    
    /* 見た目の再定義（念のため） */
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-align: center !important;
    z-index: 99999 !important;
}


/* ==========================================================================
   【最終調整】ページトップボタンの配色変更
   2026/01/30 - オレンジ廃止・サイズ縮小・控えめなデザインへ
   ========================================================================== */

.pagetop {
    /* オレンジグラデーションを廃止し、半透明の黒（グレー）に変更 */
    background: rgba(0, 0, 0, 0.6) !important;
    box-shadow: none !important; /* 影も消してフラットに */
    
    /* サイズを60pxから50pxに縮小 */
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    
    /* 文字色・配置 */
    color: #fff !important;
    font-size: 20px !important; /* 矢印も少し小さく */
    border-radius: 50% !important;
    
    /* 位置（前回と同じ右下固定） */
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 9999 !important; /* 優先度を少し下げる（メニューより下） */
    
    /* 通常時は少し薄くして存在感を消す */
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

/* ホバーした時だけ少し濃くする */
.pagetop:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
    transform: translateY(-3px) !important; /* ほんの少し動く程度に */
}

/* スマホではさらに控えめに */
@media screen and (max-width: 768px) {
    .pagetop {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 16px !important;
        right: 15px !important;
        bottom: 15px !important;
        opacity: 0.5 !important; /* 邪魔にならないように薄く */
    }
}



/* ==========================================================================
   【新規追加】フッター直前の地域選択エリア
   ========================================================================== */

.bottom-area-nav {
    background: #fdfdfd; /* ほんのりグレーで区切る */
    border-top: 1px solid #eee;
    padding: 40px 0;
    margin-top: 40px;
    width: 100%;
}

.bottom-area-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* タイトル */
.bottom-area-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
}
.bottom-area-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: #0066ff; /* ブランドカラー */
}

/* ボタンリスト（グリッド表示） */
.bottom-area-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bottom-area-list li {
    width: calc(20% - 10px); /* PCでは5列表示 */
    box-sizing: border-box;
}

.bottom-area-list li a {
    display: block;
    padding: 15px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: 0 2px 0 #eee;
}

.bottom-area-list li a:hover {
    background: #ff9900;
    color: #fff;
    border-color: #ff9900;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.3);
}

.bottom-area-list li a .sub {
    font-size: 11px;
    font-weight: normal;
    margin-left: 2px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .bottom-area-nav {
        padding: 30px 0;
    }
    .bottom-area-title {
        font-size: 16px;
    }
    .bottom-area-list {
        gap: 8px;
    }
    .bottom-area-list li {
        width: calc(50% - 4px); /* スマホでは2列表示 */
    }
    .bottom-area-list li a {
        padding: 12px 0;
        font-size: 13px;
    }
}



/* ==========================================================================
   【レフトメニュー改善】2026/01/30
   見やすく、使いやすく、スクロールに追従するモダンデザイン
   ========================================================================== */

/* -------------------------------------------------------
   1. サイドバー全体の設定（スクロール追従）
------------------------------------------------------- */
.l-sidebar {
    /* 画面上部に到達したら固定する（PCのみ） */
    position: sticky !important;
    top: 20px !important; /* 上から20pxの余白を空けて止まる */
    height: fit-content !important; /* 中身の高さに合わせる */
}

/* -------------------------------------------------------
   2. ウィジェット（枠）のデザイン共通化
------------------------------------------------------- */
.sidebar-widget {
    background: #fff !important;
    /* ふんわりとした影をつけて立体感を出す */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important; /* 角丸 */
    padding: 25px 20px !important; /* 余白を広めに */
    margin-bottom: 25px !important;
}

/* -------------------------------------------------------
   3. 見出し（タイトル）のデザイン
------------------------------------------------------- */
.widget-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    background: transparent !important;
    
    /* 下線デザイン */
    border-bottom: 2px solid #0066ff !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    
    display: flex !important;
    align-items: center !important;
}

/* タイトルの左にアクセント（■）をつける */
.widget-title::before {
    content: "■" !important;
    color: #0066ff !important;
    font-size: 12px !important;
    margin-right: 8px !important;
    transform: scale(0.8) !important;
}

/* -------------------------------------------------------
   4. ナビゲーションリストのデザイン
------------------------------------------------------- */
.nav-widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nav-widget ul li {
    border-bottom: 1px dashed #eee !important; /* 点線で区切る */
    margin: 0 !important;
}
.nav-widget ul li:last-child {
    border-bottom: none !important;
}

.nav-widget ul li a {
    display: block !important;
    /* クリックしやすいように余白を確保 */
    padding: 12px 10px 12px 25px !important; 
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

/* 矢印アイコン（>） */
.nav-widget ul li a::before {
    content: "\203A" !important; /* ? */
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ccc !important;
    font-weight: bold !important;
    font-size: 18px !important;
    transition: all 0.2s !important;
}

/* ★ホバー時の動き（ここが重要） */
.nav-widget ul li a:hover {
    color: #0066ff !important;
    background: #fffaf0 !important; /* 薄いオレンジ背景 */
    padding-left: 30px !important; /* 右にスライド */
}
.nav-widget ul li a:hover::before {
    color: #0066ff !important;
    left: 10px !important; /* 矢印も動く */
}

/* -------------------------------------------------------
   5. プロフィールカードのデザイン強化
------------------------------------------------------- */
/* ヘッダー部分 */
.profile-header {
    text-align: center !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 15px !important;
}

/* 肩書きバッジ */
.profile-role {
    display: inline-block !important;
    background: #0066ff !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
}

/* 名前 */
.profile-name {
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 0 !important;
    color: #333 !important;
}

/* 説明文 */
.profile-desc {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

/* SNSリンクボタン */
.profile-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}
.profile-links a {
    display: inline-block !important;
    font-size: 11px !important;
    background: #fff !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    color: #666 !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important;
    transition: all 0.2s !important;
    font-weight: bold !important;
}
.profile-links a:hover {
    background: #0066ff !important;
    border-color: #0066ff !important;
    color: #fff !important;
}

/* -------------------------------------------------------
   6. サイト内検索窓のデザイン
------------------------------------------------------- */
.cse-wrap {
    margin-top: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* -------------------------------------------------------
   7. スマホでの見た目調整
------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .l-sidebar {
        position: static !important; /* スマホでは固定しない */
        margin-top: 30px !important;
        width: 100% !important;
    }
    
    .sidebar-widget {
        border: none !important;
        box-shadow: none !important;
        background: #f9f9f9 !important; /* 背景色をつけて区切りを明確に */
        margin-bottom: 2px !important;
        border-radius: 0 !important;
    }
    
    .widget-title {
        margin-bottom: 10px !important;
    }
}


/* ==========================================================================
   【サイドバー修正】固定を解除して全表示させる
   2026/01/30 - 画面より長いメニューが切れる問題を解消
   ========================================================================== */

.l-sidebar {
    /* 固定（sticky）を解除し、自然にスクロールするように戻す */
    position: static !important; 
    top: auto !important;
    height: auto !important;
    
    /* デザイン（カード化など）はそのまま維持 */
    width: 220px !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

/* スマホ表示時の念のための指定 */
@media screen and (max-width: 768px) {
    .l-sidebar {
        width: 100% !important;
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   【Google検索窓の改善】2026/01/30
   幅を広げ、文字サイズを調整して使いやすくする
   ========================================================================== */

/* 1. 全体の余白を削除して、横幅いっぱいに広げる */
.gsc-control-cse {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* フォーム周りの隙間も削除 */
.gsc-search-box {
    margin: 0 !important;
}
table.gsc-search-box td.gsc-input {
    padding-right: 0 !important;
}

/* 2. 入力欄（白い箱）のデザイン */
.gsc-input-box {
    border: 1px solid #ddd !important;
    background: #fff !important;
    height: 36px !important; /* 高さを確保 */
    border-radius: 4px 0 0 4px !important; /* 左側だけ角丸 */
    box-shadow: none !important;
}

/* 3. 入力する文字のサイズ調整 */
input.gsc-input {
    font-size: 13px !important; /* 文字を少し小さくして、たくさん表示させる */
    padding: 0 5px !important; /* 内側の余白 */
    background: none !important; /* 背景画像（Googleロゴ）の調整 */
    height: 34px !important; /* 入力エリアの高さ */
    line-height: 34px !important;
}

/* プレースホルダー（Google透かし文字）の位置調整 */
.gsib_a {
    padding: 0 5px !important;
}

/* 4. 検索ボタン（虫眼鏡）のデザイン */
button.gsc-search-button {
    height: 36px !important; /* 入力欄と高さを合わせる */
    background-color: #0066ff !important; /* サイトカラーのオレンジに */
    border: 1px solid #0066ff !important;
    border-radius: 0 4px 4px 0 !important; /* 右側だけ角丸 */
    width: 40px !important; /* 押しやすい幅に */
    margin-left: -1px !important; /* 隙間を埋める */
    cursor: pointer !important;
    outline: none !important;
}

/* ボタン内のアイコン色 */
button.gsc-search-button svg {
    fill: #fff !important; /* 白にする */
    width: 14px !important;
    height: 14px !important;
}

/* 検索結果へのオートコンプリート（候補）の文字サイズ */
.gsc-completion-container {
    font-size: 13px !important;
    font-family: inherit !important;
}



/* ==========================================================================
   【レイアウト調整】隙間を埋めて記事エリアを拡大
   2026/01/30 - 情報サイトに最適な比率へ変更
   ========================================================================== */

/* 1. 記事エリア（右側）の幅を拡大 */
#main {
    /* 修正前：750px → 修正後：760px（限界まで拡大） */
    width: 760px !important;
    
    /* 内部の余白は少し詰めて、文章の可読領域を広げる */
    padding: 25px 20px !important;
    
    /* サイドバーとの距離を適切に保つ */
    float: right !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* 2. サイドバー（左側）の位置調整 */
#menuL, .l-sidebar {
    width: 220px !important;
    float: left !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* 3. 全体の枠組み（計算のズレ防止） */
#wrapper {
    width: 1000px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: space-between !important; /* 両端に振り分ける */
}

/* スマホでは横幅いっぱいに（念のため再定義） */
@media screen and (max-width: 768px) {
    #main {
        width: 100% !important;
        padding: 20px 15px !important;
    }
    #menuL, .l-sidebar {
        width: 100% !important;
    }
}

/* ==========================================================================
   【スマホ不具合修正】＆【レフトメニュー改善】
   2026/01/30 - メニュー開閉の修復とサイドバーのデザイン化
   ========================================================================== */

/* -------------------------------------------------------
   1. スマホメニューの「開きっぱなし」を修正
------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* グローバルナビ（黒いメニュー）を初期状態で隠す */
    .global-nav {
        display: none !important;
        width: 100% !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 99999 !important;
        background: #333 !important;
    }

    /* ハンバーガーボタンを押した時（is-active）だけ表示 */
    .global-nav.is-active {
        display: block !important;
    }

    /* メニュー内のリストは縦積みに */
    .nav-list {
        display: block !important;
    }
    .nav-list > li {
        border-right: none !important;
        border-bottom: 1px solid #444 !important;
    }
}

/* -------------------------------------------------------
   2. シミュレーションボタンの「閉じない」を修正
------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* スマホでは「マウスオーバーで開く」機能を無効化 */
    .site-titlesimu2:hover .launcher-dropdown {
        display: none !important;
    }

    /* クリック（タップ）された時だけ開くようにする */
    .launcher-dropdown.is-open {
        display: block !important;
        position: absolute !important;
        top: 110% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important; /* スマホでは全幅 */
        margin: 0 auto !important;
        max-width: 360px !important;
        z-index: 100001 !important;
    }
}

/* -------------------------------------------------------
   3. レフトメニュー（サイドバー）のデザイン改善
   「見やすく」「クリックしたくなる」カード型デザインへ
------------------------------------------------------- */
/* サイドバーの各ボックス（カード化） */
.sidebar-widget {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important; /* 角丸 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; /* ふんわり影 */
    padding: 20px 15px !important;
    margin-bottom: 25px !important;
}

/* 見出しのデザイン */
.sidebar-widget .widget-title {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #333 !important;
    background: transparent !important;
    border-bottom: 2px solid #0066ff !important; /* オレンジの下線 */
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
}
/* 見出しの左にアクセント */
.sidebar-widget .widget-title::before {
    content: "■" !important;
    color: #0066ff !important;
    font-size: 12px !important;
    margin-right: 6px !important;
    transform: scale(0.8) !important;
}

/* リンクメニューのデザイン */
.nav-widget ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.nav-widget ul li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px dashed #eee !important; /* 点線で区切る */
}
.nav-widget ul li:last-child {
    border-bottom: none !important;
}

/* リンクボタン */
.nav-widget ul li a {
    display: block !important;
    padding: 10px 5px 10px 22px !important; /* 左に矢印分の余白 */
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    position: relative !important;
    transition: all 0.2s !important;
}

/* 矢印アイコン（>） */
.nav-widget ul li a::before {
    content: "\203A" !important; /* ? */
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ccc !important;
    font-weight: bold !important;
    font-size: 16px !important;
    transition: all 0.2s !important;
}

/* ホバー時の動き（PCのみ） */
@media screen and (min-width: 769px) {
    .nav-widget ul li a:hover {
        background-color: #fff9f0 !important; /* 薄いオレンジ背景 */
        color: #0066ff !important;
        padding-left: 26px !important; /* 少し右へ動く */
    }
    .nav-widget ul li a:hover::before {
        color: #0066ff !important;
        left: 9px !important;
    }
}

/* プロフィールエリアの調整 */
.profile-header {
    text-align: center !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
.profile-name {
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 5px 0 !important;
}
.profile-role {
    background: #666 !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    display: inline-block !important;
}


/* ==========================================================================
   【スマホ完全修正】レスポンシブ化 & メニュー開閉修復
   2026/01/30 - PCの固定幅を解除し、スマホで動作するように上書き
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* ---------------------------------------------------
       1. メインエリアのレスポンシブ化（横揺れ・はみ出し防止）
    --------------------------------------------------- */
    /* 全体の枠を画面幅に合わせる */
    #wrapper {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* 記事エリア：固定幅を解除して100%にする */
    #main {
        width: 100% !important;
        float: none !important; /* 横並び解除 */
        padding: 20px 15px !important; /* スマホ用の余白 */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* サイドバー：下に落として幅100% */
    #menuL, .l-sidebar {
        width: 100% !important;
        float: none !important;
        margin: 30px 0 0 !important;
        padding: 0 15px !important;
    }

    /* ---------------------------------------------------
       2. メニュー開閉の修復
       「閉じたら開かない」を防ぐため、表示ルールを単純化
    --------------------------------------------------- */
    /* ホバー（マウス乗せ）での動作を完全に無効化 */
    .site-titlesimu2:hover .launcher-dropdown {
        display: none !important; 
    }

    /* JavaScriptで「is-open」クラスがついた時だけ、最強の優先度で表示 */
    .launcher-dropdown.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* スマホ画面中央に配置 */
        position: absolute !important;
        top: 110% !important; /* ボタンの下 */
        left: 50% !important;
        transform: translateX(-50%) !important; /* ど真ん中 */
        
        width: 94% !important; /* 画面幅ギリギリまで広げる */
        max-width: 360px !important;
        z-index: 2147483647 !important; /* 他の要素より手前に（最大値） */
    }

    /* ---------------------------------------------------
       3. その他の微調整
    --------------------------------------------------- */
    /* ヘッダー内を中央揃えに */
    .l-header__inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding-bottom: 10px !important;
    }

    /* ボタンを押しやすく */
    .site-titlesimu2 {
        margin: 10px auto 0 !important;
        width: 96% !important; /* ほぼ全幅 */
    }
}

/* ==========================================================================
   【緊急修正】はみ出しを強制的に直す・安全マージン確保
   2026/01/30 13:00 - サイドバーの中身を枠内に封じ込める設定
   ========================================================================== */

/* 1. レイアウトの安全マージン確保 */
#wrapper {
    width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
}

/* 記事エリア（右）：幅を少し減らして（760px→740px）安全圏を作る */
#main {
    float: right !important;
    width: 740px !important; /* ★ここを減らしました */
    margin: 15px 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* サイドバー（左）：幅を厳格に固定 */
#menuL, .l-sidebar {
    float: left !important;
    width: 220px !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 2. サイドバーの中身を「絶対に」はみ出させない設定 */
.sidebar-widget {
    width: 100% !important; /* 親(220px)に合わせる */
    max-width: 220px !important; /* 念押し */
    box-sizing: border-box !important; /* 余白を内側に含める */
    
    /* はみ出した部分は強制的に隠す（これが効きます） */
    overflow: hidden !important; 
    
    /* 内部の余白 */
    padding: 15px 10px !important; 
    margin-bottom: 20px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
}

/* 3. 画像・アイコン・検索窓が犯人の場合の対策 */
.sidebar-widget img,
.sidebar-widget iframe,
.sidebar-widget .cse-wrap,
.sidebar-widget input,
.sidebar-widget .profile-body {
    max-width: 100% !important; /* 枠より大きくなるのを禁止 */
    width: auto !important;     /* 自然なサイズに */
    box-sizing: border-box !important;
}

/* プロフィール画像の特例調整 */
.profile-widget img {
    max-width: 100% !important;
    height: auto !important;
}

/* 4. スマホではリセット（全幅表示） */
@media screen and (max-width: 768px) {
    #main, #menuL, .l-sidebar {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
    }
    .sidebar-widget {
        max-width: none !important; /* 幅制限解除 */
    }
}



/* ==========================================================================
   【修正パッチ】レイアウト崩れ・スマホメニュー修正
   （既存のデザインはそのままに、配置だけを強制的に直すコード）
   ========================================================================== */

/* 1. PCでの「サイドバー落ち」を Flexbox で直す */
@media screen and (min-width: 769px) {
    #wrapper {
        display: flex !important;
        flex-direction: row-reverse; /* 右：記事、左：サイドバー */
        justify-content: space-between;
        align-items: flex-start;
        width: 1000px;
        margin: 0 auto;
        overflow: visible !important;
    }

    #main {
        width: 760px !important;
        margin: 15px 0 !important;
        float: none !important; /* float廃止 */
    }

    #menuL, .l-sidebar {
        width: 220px !important;
        margin: 15px 0 !important;
        float: none !important; /* float廃止 */
    }
}

/* 2. サイドバー内の画像や検索窓のはみ出し防止 */
.sidebar-widget, .sidebar-widget img, .gsc-control-cse {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Google検索窓の余白リセット（Chrome対策） */
.gsc-control-cse { padding: 0 !important; }
.gsc-search-box { margin: 0 !important; }

/* 3. スマホメニュー（ハンバーガー）の不具合修正 */
@media screen and (max-width: 768px) {
    /* 記事とサイドバーを縦並びに戻す */
    #wrapper {
        display: block !important;
        width: 100% !important;
    }
    #main, #menuL, .l-sidebar {
        width: 100% !important;
        margin: 0 auto !important;
        float: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* サイドバーを下に落とす */
    #menuL, .l-sidebar {
        margin-top: 30px !important;
    }

    /* 黒いメニューバー：最初は隠す */
    .global-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 99999;
    }
    
    /* ボタンを押した時（is-active）だけ表示 */
    .global-nav.is-active {
        display: block !important;
    }
    
    /* メニューリストを縦並びに */
    .nav-list {
        display: block !important;
    }
    .nav-list > li {
        border-right: none !important;
        border-bottom: 1px solid #555 !important;
    }
}


/* ==========================================================================
   【完全修復】CSS Gridによるレイアウト強制固定
   2026/01/30 - ブラウザの計算誤差を無視して配置を固定する設定
   ========================================================================== */

/* 1. すべての要素のサイズ計算を統一（崩れ防止の基本） */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. PC表示時のレイアウト（CSS Gridを使用） */
@media screen and (min-width: 769px) {
    #wrapper {
        /* グリッドレイアウトを起動 */
        display: grid !important;
        
        /* [左:220px] [隙間:自動] [右:760px] の構成にする */
        grid-template-columns: 220px 760px !important;
        justify-content: space-between !important;
        
        width: 1000px !important;
        margin: 0 auto !important;
        
        /* 古い指定を無効化 */
        float: none !important;
        overflow: visible !important;
    }

    /* 左サイドバー（HTMLでは後にあるが、強制的に左列へ配置） */
    #menuL, .l-sidebar {
        grid-column: 1 / 2 !important; /* 1列目に配置 */
        grid-row: 1 !important;        /* 1行目に配置 */
        
        width: 100% !important; /* グリッド枠いっぱいに */
        margin: 15px 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* 右記事エリア（HTMLでは先にあるが、強制的に右列へ配置） */
    #main {
        grid-column: 2 / 3 !important; /* 2列目に配置 */
        grid-row: 1 !important;        /* 1行目に配置 */
        
        width: 100% !important; /* グリッド枠いっぱいに */
        margin: 15px 0 !important;
        padding: 20px !important;
        float: none !important;
        background-color: #fff !important;
    }
}

/* 3. サイドバーの中身がはみ出さないように封じ込める */
.sidebar-widget {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* はみ出し厳禁 */
}
/* 画像や検索窓も強制的に枠内に収める */
.sidebar-widget img, 
.sidebar-widget iframe, 
.gsc-control-cse,
.cse-wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* 4. Google検索窓のデザイン修正（Chrome対策） */
.gsc-search-box { margin: 0 !important; }
.gsc-control-cse { padding: 0 !important; border: none !important; background: transparent !important; }
input.gsc-input { font-size: 13px !important; }
button.gsc-search-button { background-color: #0066ff !important; border-color: #0066ff !important; }

/* 5. スマホ表示（レスポンシブ）の不具合修正 */
@media screen and (max-width: 768px) {
    /* グリッドを解除して縦並びに戻す */
    #wrapper {
        display: block !important;
        width: 100% !important;
    }
    
    /* 記事エリア */
    #main {
        width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
    }
    
    /* サイドバー */
    #menuL, .l-sidebar {
        width: 100% !important;
        margin-top: 40px !important;
        padding: 0 15px !important;
    }
    
    /* ハンバーガーメニュー初期非表示 */
    .global-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 99999;
    }
    .global-nav.is-active {
        display: block !important;
    }
    
    /* プルダウンメニューはタップ時のみ */
    .site-titlesimu2:hover .launcher-dropdown { display: none !important; }
    .launcher-dropdown.is-open { display: block !important; }
}


/* ==========================================================================
   【最終確定版】シミュレーションボタンのデザイン＆スマホ不具合修正
   ※これを一番下に貼れば、デザインもタップ反応も全て直ります
   ========================================================================== */

/* 1. ボタン全体の配置（PCは右寄せ） */
.site-titlesimu2 {
    display: block !important;
    width: 290px !important;
    margin-left: auto !important; /* 右寄せ */
    margin-right: 0 !important;
    position: relative !important;
    z-index: 10000 !important;
}

/* 2. ボタンの見た目（オレンジ色・影・枠線） */
.btn-trust-inner {
    background: linear-gradient(135deg, #ff8c00, #ff6600) !important;
    border: 2px solid #fff !important;
    outline: 2px solid #ff8c00 !important; /* オレンジの外枠 */
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3) !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
}

/* マウスを乗せた時の動き（PCのみ） */
@media screen and (min-width: 769px) {
    .site-titlesimu2:hover .btn-trust-inner {
        transform: translateY(2px) !important;
        box-shadow: 0 2px 5px rgba(255, 102, 0, 0.2) !important;
    }
}

/* 3. ボタンの中身（アイコン・テキスト）のデザイン */
.trust-icon {
    font-size: 24px !important;
    color: #fff !important;
    margin-right: 10px !important;
    display: inline-block !important;
}

.trust-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

.trust-badge {
    font-size: 10px !important;
    color: #d95400 !important;
    background: #fff !important;
    padding: 1px 8px !important;
    border-radius: 10px !important;
    margin-bottom: 2px !important;
    align-self: flex-start !important;
    font-weight: bold !important;
    display: inline-block !important;
}

.trust-main {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #fff !important;
    white-space: nowrap !important;
}

.trust-info-inline {
    display: none !important;
}

/* 4. スマホ対応（中央寄せ ＆ タップ反応の改善） */
@media screen and (max-width: 768px) {
    /* ボタンの位置を中央へ */
    .site-titlesimu2 {
        width: 96% !important;
        margin: 10px auto 0 !important;
        float: none !important;
    }

    /* --- ★ここが「ボタン反応しない」を直す仕掛け --- */
    
    /* 1. ボタンの大枠（リンク機能を持つ場所） */
    #js-launcher-trigger {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 20000 !important;
        -webkit-tap-highlight-color: transparent; 
    }

    /* 2. 中身の要素（文字やアイコン）は「触れない」ようにする */
    /* これにより、文字の上をタップしても裏側の大枠が反応します */
    #js-launcher-trigger .btn-trust-inner,
    #js-launcher-trigger .trust-icon,
    #js-launcher-trigger .trust-text,
    #js-launcher-trigger .trust-badge,
    #js-launcher-trigger .trust-main,
    #js-launcher-trigger span {
        pointer-events: none !important;
    }
}


/* ==========================================================================
   【スマホ不具合修正】タップ時の挙動修正
   2026/01/30 - 「指を離さないと出ない」問題を解消
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. 「ホバー時は隠す」という設定（これが悪さをしていました） */
    .site-titlesimu2:hover .launcher-dropdown {
        display: none !important;
    }

    /* 2. 「クリックで開いた時」の設定を【最強の優先度】にする */
    /* セレクタを長くして、上の設定よりも強くします */
    .site-titlesimu2 .launcher-dropdown.is-open,
    body .launcher-dropdown.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* 配置の再定義 */
        position: absolute !important;
        top: 110% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 96% !important;
        max-width: 360px !important;
        z-index: 2147483647 !important; /* 最前面 */
    }
}


/* ==========================================================================
   【ハンバーガーボタン修正】謎の楕円を消して正しいデザインにする
   2026/01/30
   ========================================================================== */

/* 1. 基本設定：PCなど広い画面では「完全に隠す」 */
.l-header__hamburger {
    display: none !important;
}

/* 2. スマホ表示時の設定：正しく「三本線」にする */
@media screen and (max-width: 768px) {
    .l-header__hamburger {
        display: block !important;
        /* これが「謎の楕円（デフォルトの枠線と背景）」を消す命令 */
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        
        /* 配置とサイズ */
        position: absolute !important;
        top: 10px !important;
        right: 10px !important; /* 右上に配置 */
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        z-index: 200000 !important; /* 最前面に */
    }

    /* 三本線のデザイン */
    .l-header__hamburger span {
        display: block !important;
        width: 26px !important;
        height: 2px !important;
        background-color: #333 !important; /* 線の色 */
        margin: 6px auto !important; /* 線同士の間隔 */
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    /* メニューが開いた時の「?」印アニメーション（おまけ） */
    .l-header__hamburger.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .l-header__hamburger.is-active span:nth-child(2) {
        opacity: 0 !important;
    }
    .l-header__hamburger.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    
    /* ボタンの位置調整に伴い、オレンジボタンとの重なりを防ぐ */
    .site-titlesimu2 {
        /* ハンバーガーボタン(44px)の分だけ横幅を縮める */
        width: calc(100% - 60px) !important; 
        margin-right: auto !important;
        margin-left: 10px !important;
    }
}



/* ==========================================================================
   【緊急修正】ハンバーガーボタンの位置ズレを直す
   2026/01/30 - ヘッダーを基準点にして右上に配置し直す
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. ヘッダーの中身を「配置の基準点」にする */
    /* これがないと、ボタンがページの変な場所を基準にして飛んでいってしまいます */
    .l-header__inner {
        position: relative !important;
        /* 念のため、高さを確保してボタンがはみ出さないようにする */
        min-height: 60px !important;
        /* 他の要素との重なりを整理 */
        z-index: 10000 !important;
        /* 中身を左寄せ（ロゴ）と右寄せ（ボタン）に分ける設定 */
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important; /* 折り返しを許可 */
    }

    /* 2. ハンバーガーボタンを「基準点の右上」に絶対配置する */
    #js-hamburger, .l-header__hamburger {
        position: absolute !important;
        /* ヘッダーの右上隅に固定 */
        top: 10px !important;
        right: 10px !important;
        /* 他の要素より手前に表示 */
        z-index: 20000 !important;
        
        /* 見た目とクリック範囲の確保（念のため再定義） */
        display: block !important;
        width: 50px !important;
        height: 50px !important;
        background: transparent !important; /* 背景を透明に */
        border: none !important;            /* 枠線を消す */
        cursor: pointer !important;
        pointer-events: auto !important;    /* クリックを許可 */
    }

    /* 3. オレンジ色のシミュレーションボタンの位置調整 */
    /* ハンバーガーボタンと重ならないように、下にずらして幅を調整 */
    .site-titlesimu2 {
        /* ハンバーガーボタンの段の下に来るようにする */
        width: 100% !important;
        margin-top: 20px !important; /* 上に隙間を空ける */
        margin-bottom: 10px !important;
        /* 右寄せを解除 */
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        /* ボタン自体の幅調整 */
        padding: 0 10px !important; 
        box-sizing: border-box !important;
    }
    
    /* オレンジボタンの中身を中央寄せに */
    .site-titlesimu2 .btn-trust-inner {
        justify-content: center !important;
        width: 100% !important;
    }

    /* 4. ロゴの位置調整 */
    .site-title-wrap {
        /* ハンバーガーボタンと被らないように幅を制限 */
        max-width: calc(100% - 60px) !important;
        padding-top: 10px !important; /* ボタンと高さを合わせる */
    }
}

/* ==========================================================================
   【スマホメニュー配色完全修復】白文字・白背景の解消
   2026/01/30 - 全ての背景をダークに統一し、子メニューも見やすく展開
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. メニューリスト全体の背景色を強制的に「ダークカラー」にする */
    /* これで「白背景」が完全に消えます */
    .nav-list,
    .nav-list > li,
    .nav-list > li > a {
        background-color: #1a202c !important; /* 濃い紺色 */
        color: #fff !important;               /* 文字は白 */
        border: none !important;
    }

    /* 各メニューの区切り線 */
    .nav-list > li {
        border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    }

    /* 2. リンク文字のデザイン修正 */
    .nav-list > li > a {
        padding: 18px 20px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        position: relative !important;
        display: block !important;
    }

    /* 矢印アイコン（>）の色調整 */
    .nav-list > li > a::after {
        color: rgba(255,255,255,0.5) !important;
    }

    /* ホバー・タップ時の反応（わかりやすく色を変える） */
    .nav-list > li > a:hover,
    .nav-list > li > a:active {
        background-color: #2d3748 !important; /* 少し明るいグレーに */
        color: #0066ff !important;            /* 文字はオレンジ */
    }


    /* ---------------------------------------------------
       3. 子メニュー（ドロップダウン）の表示設定
       スマホでは「タップして開く」のではなく「最初から全て見せる」形にします
    --------------------------------------------------- */
    
    /* 子メニューのエリア設定 */
    .nav-drop-menu {
        display: block !important;       /* 強制的に表示 */
        position: static !important;     /* 浮かさずにその場に配置 */
        width: 100% !important;
        background-color: #12161f !important; /* 親よりさらに暗い色で区別 */
        box-shadow: none !important;
        border-top: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 子メニューのリスト項目 */
    .nav-drop-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        padding: 0 !important;
    }

    /* 子メニューのリンク文字 */
    .nav-drop-menu li a {
        color: #ccc !important;          /* 親より少し落ち着いた白（グレー） */
        font-size: 14px !important;      /* 文字サイズを少し小さく */
        font-weight: normal !important;
        padding: 12px 20px 12px 40px !important; /* 左にインデント（字下げ）を入れて階層を表現 */
        background: transparent !important;
        text-align: left !important;
    }

    /* 子メニューのタップ時 */
    .nav-drop-menu li a:hover {
        background-color: #d64545 !important;
        color: #fff !important;
    }


    /* ---------------------------------------------------
       4. 地域選択（メガメニュー）の特別対応
       縦に長くなりすぎないよう、2列で表示する
    --------------------------------------------------- */
    ul.nav-area-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        background-color: #12161f !important;
    }
    
    ul.nav-area-grid li {
        width: 50% !important; /* 2列表示 */
        border: none !important;
    }

    ul.nav-area-grid li a {
        padding: 12px 10px 12px 20px !important; /* インデント調整 */
        border: 1px solid rgba(255,255,255,0.05) !important;
    }

    /* 「オール電化」などのフッターリンク */
    .nav-mega-footer {
        background-color: #004d1a !important; /* 暗い緑色 */
        color: #fff !important;
        padding: 15px !important;
    }
}



/* ==========================================================================
   【緊急修正】スマホメニューの位置ズレを強制的に直す
   2026/01/30 - 画面トップ（0px）への吸着を最優先で実行
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. メニュー本体の位置を「画面基準」で強制固定 */
    .global-nav.is-active {
        /* 何があっても画面の左上に張り付かせる設定 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        
        /* サイズと余白の強制リセット */
        width: 100% !important;
        height: 100vh !important; /* 画面の高さいっぱい */
        margin: 0 !important;
        padding-top: 70px !important; /* 閉じるボタン（右上）を避ける余白 */
        
        /* デザイン（ダーク背景）の再定義 */
        background: #1a202c !important;
        z-index: 2147483640 !important; /* ボタンのすぐ後ろ */
        
        /* 表示方法 */
        display: block !important;
        overflow-y: auto !important; /* 長い場合はスクロール */
        transform: none !important;  /* 位置ズレの原因になる変形を解除 */
    }

    /* 2. もし親要素の影響で下に落ちている場合のリセット */
    body, html {
        /* メニューが開いている時に背景が動かないようにする（任意） */
        /* overflow: hidden; をつけるとスクロールロックできますが、今回は位置修正を優先 */
    }

    /* 3. 中身のリスト位置調整 */
    .nav-list {
        margin-top: 0 !important;
        padding-bottom: 100px !important; /* 下までスクロールできるように余白確保 */
    }

    /* 4. ハンバーガーボタン（閉じるボタン）の再・最前面固定 */
    #js-hamburger, .l-header__hamburger {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 2147483647 !important; /* 宇宙一最前面 */
        margin: 0 !important;
    }
}


/* ==========================================================================
   【スマホメニュー修正】親子連動のホバー挙動を修正
   2026/01/30 - 子メニュー操作時に親メニューの色が変わるのを防ぐ
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. 親メニューの「ホバー時（触れている時）」の色変化を無効化する */
    /* これにより、子メニューを操作しても親メニューの色は通常のまま維持されます */
    .nav-list > li:hover > a {
        background-color: #1a202c !important; /* 通常の背景色（ダーク）に戻す */
        color: #fff !important;               /* 通常の文字色（白）に戻す */
    }

    /* 2. 親メニューを「タップした瞬間（指で押した時）」だけ色を変える */
    /* これなら誤作動せず、自分が押した時だけ反応します */
    .nav-list > li > a:active {
        background-color: #2d3748 !important; /* 少し明るいグレー */
        color: #0066ff !important;            /* オレンジ */
        transition: none !important;          /* 一瞬で変える */
    }

    /* 3. 子メニュー自身は、触れたり押したりした時に色を変える */
    .nav-drop-menu li a:hover,
    .nav-drop-menu li a:active {
        background-color: #2d3748 !important;
        color: #0066ff !important;
    }
}


/* ==========================================================================
   【完全版】レイアウト崩れ防止 & タブレット対応
   2026/01/30 - HTML構造に依存しない絶対配置と、可変幅の組み合わせ
   ========================================================================== */

/* 1. 全要素の幅計算を統一 */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. PC・タブレット（画面幅769px以上）の共通設定 */
@media screen and (min-width: 769px) {
    
    /* ▼ サイト全体の枠：幅を固定せず「最大1000px」にする */
    #wrapper {
        display: block !important;       /* GridやFlexを廃止し、単純な箱にする */
        width: 100% !important;          /* 画面に合わせて縮むようにする */
        max-width: 1000px !important;    /* 最大幅は1000px */
        margin: 0 auto !important;       /* 中央寄せ */
        position: relative !important;   /* サイドバー配置の基準点 */
        overflow: visible !important;
        padding: 0 10px !important;      /* タブレットで端が切れないように余白 */
    }

    /* ▼ 右：記事エリア */
    #main {
        /* 「幅760px」という固定をやめ、「残りの幅全部」にする */
        width: auto !important;
        max-width: none !important;
        float: none !important;
        
        /* 左側にサイドバー用のスペース(240px)を空ける */
        margin: 15px 0 15px 240px !important; 
        padding: 20px !important;
        background-color: #fff !important;
        border-radius: 4px !important;
    }

    /* ▼ 左：サイドバー（レフトメニュー） */
    /* HTMLの場所に関係なく、強制的に左上に配置する */
    #menuL, .l-sidebar {
        position: absolute !important;   /* 強制配置 */
        top: 15px !important;            /* 上からの位置 */
        left: 10px !important;           /* 左からの位置（#wrapperのpaddingに合わせる） */
        width: 220px !important;         /* 幅固定 */
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    /* ▼ はみ出し防止（画像や動画） */
    #main img,
    #main iframe,
    .sidebar-widget,
    .sidebar-widget img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Google検索窓の調整 */
    .gsc-search-box { margin: 0 !important; }
    .gsc-control-cse { padding: 0 !important; width: 100% !important; }
}

/* 3. スマホ（画面幅768px以下）の設定 */
@media screen and (max-width: 768px) {
    #wrapper, #main, #menuL, .l-sidebar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        position: static !important; /* 絶対配置を解除 */
        float: none !important;
    }
    
    #main {
        padding: 20px 15px !important;
    }
    
    #menuL, .l-sidebar {
        margin-top: 40px !important;
        padding: 0 15px !important;
    }

    /* メニュー開閉などの不具合防止 */
    .global-nav.is-active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 2147483640 !important;
    }
}


/* ==========================================================================
   【デザイン改善】検索窓のモダン化
   ========================================================================== */
/* 入力欄 */
.gsc-input-box {
    border: 1px solid #ddd !important;
    border-radius: 50px 0 0 50px !important; /* 左側を丸く */
    box-shadow: none !important;
    padding-left: 10px !important;
    background: #f9f9f9 !important;
}

/* 検索ボタン */
button.gsc-search-button {
    background-color: #0066ff !important;
    border-radius: 0 50px 50px 0 !important; /* 右側を丸く */
    width: 50px !important;
}

/* 検索ボタンの虫眼鏡アイコン */
button.gsc-search-button svg {
    width: 18px !important;
    height: 18px !important;
    fill: #fff !important; /* 白いアイコン */
}





/* ==========================================================================
   公式ボタンアニメーション
   ========================================================================== */



/* 公式サイトボタン（画像リンク）の強化 */
#main center a img {
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

#main center a img:hover {
    transform: translateY(-5px) scale(1.02) !important; /* 少し浮き上がって大きく */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    filter: brightness(1.05); /* ほんの少し明るく */
}



.profile-role {
    background: #eef2ff !important;
    color: #4f46e5 !important; /* 知的な印象の青 */
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    border: 1px solid #e0e7ff !important;
}
.profile-name {
    color: #1e293b !important;
    font-size: 1.1em !important;
    margin-top: 10px !important;
}


/* メニューバーに少しだけ奥行きを出す */
.global-nav {
    background: linear-gradient(to bottom, #334155, #1e293b) !important;
    border-bottom: 2px solid #0066ff !important; /* オレンジのアクセント */
}

/* メニューの区切り線を少しおしゃれに */
.nav-list > li {
    border-right: 1px solid rgba(255,255,255,0.05) !important;
}


body {
    /* BIZ UDGothicを最優先に。数字が読みやすくなります */
    font-family: "BIZ UDGothic", "Meiryo", sans-serif !important;
}


/* ==========================================================================
   スマホメニューおよびチェックボックス関連要素の完全非表示
   ========================================================================== */

/* 1. HTMLに追加した新要素（チェックボックス・ラベル）を全デバイスで隠す */
#nav-input, 
#nav-open, 
#nav-close, 
.nav-unshown {
    display: none !important;
}

/* 2. スマホ表示（768px以下）での設定 */
@media screen and (max-width: 768px) {
    /* ハンバーガーボタンを非表示 */
    #js-hamburger, 
    .l-header__hamburger, 
    .hamburger {
        display: none !important;
    }

    /* メニュー本体（プルダウン）を非表示 */
    #js-nav, 
    .global-nav {
        display: none !important;
        visibility: hidden !important;
    }

    /* タイトル周りの調整：中央寄せにしてスッキリさせる */
    .l-header__logo {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        padding: 15px 0 !important;
    }

    .site-title a {
        font-size: 28px !important;
        font-weight: 900 !important;
        color: #1a202c !important;
        text-decoration: none !important;
    }

    /* サブタイトルも不要であれば非表示に */
    .site-desc {
        display: none !important;
    }
}




/* ==========================================================================
   地域別ページ：右寄せ画像（align="right"）のレイアウト修正
   ========================================================================== */

/* 1. 画像自体のサイズと余白を固定し、浮きすぎないようにする */
#main img[align="right"] {
    max-width: 120px !important; /* 元のデザインに近いサイズ */
    height: auto !important;     /* アスペクト比を維持 */
    margin: 0 0 15px 15px !important; /* 下と左に適切な余白を確保 */
    float: right !important;     /* align="right" をCSSで制御 */
}

/* 2. 【重要】h3見出しが画像の下に正しく回り込むように設定 */
#main h3 {
    clear: both !important;      /* 前の要素（画像）の回り込みを強制解除 */
    display: block !important;
    padding-top: 15px !important; /* 見出しの上の余白を確保 */
}

/* 3. 画像が含まれる段落で回り込みを完結させる（モダンな解決策） */
#main p:first-of-type {
    display: flow-root !important; /* これで画像が段落内に収まり、突き抜けなくなります */
}











/* 全体設計：親しみやすく、文字を詰め込まない */
.tp-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 15px;
    color: #444;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 1.5;
    background: #fff;
}

/* (1) 信頼バー（アイコン風リスト） */
.tp-trust-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    background: #f9fafb; padding: 10px 15px; border-radius: 6px; margin-bottom: 25px; border: 1px solid #eee;
}
.tp-trust-title { font-weight: bold; font-size: 12px; color: #666; margin-right: 10px; }
.tp-media-icons { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.tp-media-icons li {
    font-size: 11px; background: #fff; border: 1px solid #ddd; padding: 2px 8px;
    border-radius: 20px; color: #555;
}
.tp-media-icons li.more { background: transparent; border: none; color: #888; }

/* (2) ヒーローエリア（地域選択） */
.tp-hero { text-align: center; margin-bottom: 30px; }
.tp-hero-title { font-size: 22px; color: #1a365d; margin-bottom: 8px; border: none !important; }
.tp-badge { background: #e53e3e; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 4px; vertical-align: middle; }
.tp-hero-lead { font-size: 14px; color: #666; margin-bottom: 20px; }

.tp-area-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-area-item {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; border: 1px solid #dce7f1; padding: 12px 5px;
    text-decoration: none; color: #2d3748; font-weight: bold; font-size: 14px;
    border-radius: 8px; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.ico-area { /* 地域アイコン風の装飾 */
    display: inline-block; width: 24px; height: 24px; line-height: 24px;
    background: #eef6fc; color: #3182ce; text-align: center; border-radius: 50%; font-size: 12px; font-style: normal;
}
.tp-area-item:hover { border-color: #3182ce; background: #ebf8ff; transform: translateY(-2px); }

/* (3) 【最重要】シミュレーションバナー（超強調） */
.tp-sim-banner {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: #fff; padding: 30px 20px; border-radius: 16px; margin-bottom: 40px;
    box-shadow: 0 10px 25px rgba(45, 55, 72, 0.3); text-align: center;
}
.tp-sim-content { position: relative; z-index: 2; }
.tp-sim-sub { display: block; color: #fbbf24; font-weight: bold; font-size: 13px; margin-bottom: 5px; }
.tp-sim-title { font-size: 24px; color: #fff; border: none !important; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.tp-sim-desc { font-size: 14px; opacity: 0.9; margin-bottom: 25px; }

/* キラッと光る巨大ボタン */
.tp-sim-button {
    display: inline-block; width: 80%; max-width: 400px;
    background: linear-gradient(to bottom, #ff9f43, #ff6b00);
    color: #fff !important; padding: 15px 10px; border-radius: 50px;
    text-decoration: none; box-shadow: 0 5px 0 #c05621, 0 10px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.2s; position: relative; overflow: hidden;
}
.btn-main { display: block; font-size: 20px; font-weight: bold; margin-bottom: 3px; }
.btn-sub { display: block; font-size: 12px; opacity: 0.9; }

.tp-sim-button:hover { transform: translateY(3px); box-shadow: 0 2px 0 #c05621, 0 5px 10px rgba(255, 107, 0, 0.4); }
/* ボタンの光沢アニメーション */
.shiny-btn::after {
    content: ""; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg) translate(-100%, -100%); animation: shiny 3s infinite;
}
@keyframes shiny { 0% { transform: rotate(45deg) translate(-100%, -100%); } 20% { transform: rotate(45deg) translate(100%, 100%); } 100% { transform: rotate(45deg) translate(100%, 100%); } }

/* (4) 選び方ナビ（アイコン主役） */
.tp-h2 { font-size: 18px; border-left: 4px solid #3182ce; padding-left: 10px; margin: 30px 0 15px; border-bottom: none !important; }
.tp-icon-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tp-icon-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid #e2e8f0; padding: 15px 5px;
    text-decoration: none; border-radius: 8px; transition: 0.2s;
}
.icon-box { font-size: 28px; margin-bottom: 8px; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background: #f7fafc; }
.bg-blue { background: #ebf8ff; color: #3182ce; }
.bg-green { background: #f0fff4; color: #38a169; }
.bg-orange { background: #fffaf0; color: #dd6b20; }
.bg-red { background: #fff5f5; color: #e53e3e; }
.card-title { font-weight: bold; color: #2d3748; font-size: 13px; margin-bottom: 4px; }
.card-desc { font-size: 10px; color: #718096; }
.tp-icon-card:hover { border-color: #3182ce; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* (5) 更新情報（リスト化してスッキリ） */
.tp-live { font-size: 10px; background: #c6f6d5; color: #22543d; padding: 2px 6px; border-radius: 10px; margin-left: 10px; vertical-align: middle; }
.tp-log-list { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; border-radius: 8px; padding: 15px; }
.tp-log-list li { font-size: 13px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dotted #eee; }
.tp-log-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.log-date { font-weight: bold; color: #718096; margin-right: 10px; font-size: 12px; }
.log-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #fff; margin-right: 8px; }
.log-tag.update { background: #38a169; }
.log-tag.info { background: #3182ce; }

/* スマホ対応 */
@media screen and (max-width: 640px) {
    .tp-area-nav { grid-template-columns: repeat(2, 1fr); }
    .tp-icon-nav { grid-template-columns: repeat(2, 1fr); }
    .tp-sim-banner { padding: 25px 15px; }
    .tp-sim-title { font-size: 20px; }
    .btn-main { font-size: 18px; }
    .tp-trust-bar { flex-direction: column; align-items: flex-start; }
}




/* 条件から選ぶ：セクション全体 */
.tp-selection-box {
    margin: 40px 0;
    padding: 0 10px;
}

/* 見出しのブラッシュアップ */
.tp-selection-title {
    font-size: 18px;
    color: #1a365d;
    border-left: 5px solid #3182ce;
    padding-left: 12px;
    margin-bottom: 20px;
    text-align: left !important;
    border-bottom: none !important;
}

/* グリッドレイアウト（PCは4列、スマホは2列） */
.tp-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* 各カードの装飾 */
.tp-sel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

/* マウスを乗せた時の動き */
.tp-sel-card:hover {
    border-color: #3182ce;
    background: #f7fafc;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* アイコンの土台（背景円） */
.tp-sel-icon {
    width: 40px;
    height: 40px;
    background: #edf6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* 元の画像を少し大きく表示（16px→24px程度に調整） */
.tp-sel-icon img {
    width: 24px;
    height: auto;
    object-fit: contain;
}

/* テキストのスタイル */
.tp-sel-card strong {
    display: block;
    font-size: 14px;
    color: #2d3748;
    margin-bottom: 4px;
}

.tp-sel-card span {
    display: block;
    font-size: 10px;
    color: #718096;
    line-height: 1.3;
}

/* ランキングだけ少し目立たせる（黄色のアクセント） */
.tp-sel-card.highlight {
    background: #fffcf0;
    border-color: #fbd38d;
}
.tp-sel-card.highlight .tp-sel-icon {
    background: #fef3c7;
}

/* スマホ対応（2列表示） */
@media screen and (max-width: 768px) {
    .tp-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tp-sel-card {
        padding: 12px 8px;
    }
    .tp-sel-card strong {
        font-size: 13px;
    }
}