﻿/* --- ページトップボタン（亀のアイコン）の固定設定 --- */

#pagetop {
position: fixed;
bottom: 50px;
right: 30px;
}

@media screen and (max-width:768px) {
#pagetop img {
display:none;
}
}

/*++++++++++++++++ font styles ++++++++++++++++*/

#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 10px;
  bottom: 0;
  opacity: 0;
  transition: all 1s ease;
}
#page_top.show {
    opacity: 0.6;
    transform: none;
 }
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 30px;
  color: #A12568;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'TOP';
  font-size: 18px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #A12568;
}

.btn {
    display:  inline-block;
    color: #fff;
    text-decoration:  none;
    background-color: #2196F3;
    border-radius: 5px;
    position:  relative;
    height: 50px;
    width: 50px;
    cursor:pointer;
}

.btn::before {
    content:  '';
    width: 20px;
    height: 20px;
    display:  block;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(315deg);
    position:  absolute;
    top: 20px;
    bottom:  10px;
    left:  0;
    right:  0;
    margin:  auto;
}
.clearfix:after{content:"."; display:block; clear:both; height:0; visibility:hidden;}
.clearfix 		{ min-height:1px;}

.blue-s{font-size:17px; color:#0000ff;}

.box2 {
    position: relative;
    margin: 2em 0.5em 0em 0.5em;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 22px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box2 p {
    margin: 0; 
    padding: 0;
 font-size: 22px;
}

span.r{padding-right:5px;
font-size: 19px;
    color:#069;  
   text-decoration:none;  
    border-left:solid 3px #ff0000; padding-left:5px; }

span.red{padding-right:5px;
font-size: 19px;
    color:#069;  
   text-decoration:none;  
    border-left:solid 3px #ff0000; padding-left:5px; }

.blue{color:#0000cd;margin-bottom:10px; font-size:22px;}
.r{color:#F00;margin-bottom:10px; font-size:22px;}
.o{color:#C60;font-weight:bold;}
.gr{color:#096;}
.bl{color:#03C;}
.bl-space{color:#03C;margin-top:20px;}
.gl{color:#666;}
.min{font-size:10px !important;}
.big{font-size:18px !important;}

p{padding:5px 0 5px 0;}
.red{font-size:20px; color:#ff0000;}

p.r2 {border-left:solid 5px red;
font-size:22px;
padding-left: 10px;
margin-top:10px;
margin-bottom:-10px;
}

.waku_a { border-bottom:solid 5px green; width:100px; text-align:center; }
.waku_b { border-bottom:solid 5px blue; width:170px; text-align:center; padding-top:15px; }

span.b{padding-right:5px; color:#069; text-decoration:none; border-left:solid 3px #0000ff; padding-left:5px; }
span.g{padding-right:5px; color:#069; text-decoration:none; border-left:solid 3px #008000; padding-left:5px; }
span.m{padding-right:5px; color:#069; text-decoration:none; border-left:solid 3px #800000; padding-left:5px; }
span.go{padding-right:5px; color:#069; text-decoration:none; border-left:solid 3px #daa520; padding-left:5px; }
span.pu{padding-right:5px; color:#069; text-decoration:none; border-left:solid 3px #800080; padding-left:5px; }
span.pi{padding-right:5px; color:#069; text-decoration:none; border-left:solid 3px #ff69b4; padding-left:5px; }


hr.style-d {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}


/*++++++++++++++++ page styles ++++++++++++++++*/
body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; overflow:auto;}
#mainContents{padding:15px 0 0 0; width:1000px; margin:0 auto; }

/*++++++++++++++++ header styles ++++++++++++++++*/
header .top{height:18px; overflow:hidden; background:#000000;}
h1{font-size:14px; float:left; color:#FFF; padding-left:0.6em;}
.sitemap{font-size:12px; float:right; color:#FFF; padding-right:1.6em; text-decoration:none;}
.sitemap:hover{text-decoration:underline;}

header .middle div{height:70px; overflow:hidden; border-bottom:2px solid #630;}
header .middle p{height: 390px;width:1020px; margin:0 auto;padding-left:30px;}

.logo{float:left; padding:8px 0 0 80px;}
.contact{
	float:right; padding:12px 10px 0 3; text-align:right; font-size:14px; line-height:24px; color:#999; font-weight:bold; text-shadow:1px 1px 2px #EEE; text-decoration:none;
}
.contact span{font-size:32px;}

.navi{border-top:1px solid #630; border-bottom:1px solid #630; background:#008000;}
.navi ul{width:1020px; margin:0 auto; border-right:0px solid #ffffff;}
.navi li{float:left; width:16.5%;}
.navi li a{
	display:block; padding:12px 0px 11px 0; text-align:center; font-size:16px; color:#FFF; font-weight:bold; text-decoration:none; letter-spacing:2px; border-left:1px solid #ffffff; border-right:1px solid #ffffff;
}
.navi li a:hover{background:#adff2f;}

/*++++++++++++++++ menu styles ++++++++++++++++*/
#leftColm{ width:240px; float:left; margin-bottom:20px; }
#leftColm h2{ background:#32cd32; font-size:17px; padding:15px 0 8px 0px; font-weight:bold; text-align:center; }
#leftColm ul{border-left:1px solid #CCC; border-right:1px solid #CCC; }
#leftColm a{
	display:block; font-size:16px; color:#069; text-decoration:none; padding:15px; border-top:1px solid #FFF; border-bottom:1px solid #CCC;
	background: linear-gradient(#FFF, #EEE);
}
#leftColm a:hover{ text-decoration:underline; color:#ff0000; background: linear-gradient(#EEE, #FFF); }

/*++++++++++++++++ main styles ++++++++++++++++*/
#rightColm{float:right; width:710px;}
.komidashi{font-size:14px; text-align:right;}
p{font-size:18px; line-height:28px;}
article{padding:0 10px; margin-bottom:35px;}

.index1{ 
	font-size:30px; line-height:36px; color:#666; letter-spacing:2px; padding:12px 12px 8px 12px; margin-bottom:15px; background:#FFF; border-radius: 6px; box-shadow: #666 0px 0px 6px;
}

.index2{ 
	font-size:30px; line-height:30px; color:#333; letter-spacing:2px; padding:12px 12px 8px 12px; margin-bottom:15px; border:2px solid #0000ff; box-shadow: #666 0px 0px 6px; background: linear-gradient(#FFF, #EEE);
}

.index5{ 
	font-size:30px; line-height:30px; color:#000000; letter-spacing:2px; padding:12px 12px 8px 12px; margin-bottom:15px; border-bottom:2px solid #0000ff; box-shadow: #666 0px 0px 6px; background: linear-gradient(#FFF, #EEE);
}

.index3{ font-size:25px; padding:6px; border-left:10px solid #0000ff; border-bottom:1px dotted #0000ff; margin-bottom:15px; }




.index6{  /*+++++++++++++++++++ 小見出し +++++++++++++++++++*/
	font-size:24px;
	padding:6px;
	border-left:10px solid #a52a2a;
	border-bottom:2px dotted #a52a2a;
	margin-bottom:15px;
}



.index7{ font-size:24px; padding:6px; border-left:10px solid #FF9933; border-bottom:3px dotted #F90; width:520px; border-radius: 12px; margin-bottom:15px; }

/*++++++++++++++++ footer styles ++++++++++++++++*/
footer p{text-align:center; font-size:14px; padding:1em 0; background:#008000;}
footer p a{color:#000; text-decoration:none;}
footer p a:hover{text-decoration:underline;}

.notice { position: relative; margin: 4em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; }
.notice .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #ff0000; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; }

/* ▼▼▼ 追加・修正部分：テーブル枠線の設定 ▼▼▼ */

/* A:テーブル全体の基本設定 */
table.abc, table.abcd, table.abcde {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #aaaacc;
    margin-bottom: 20px;
    text-align: left;
}

/* B:セル（見出し・データ）の枠線と余白 */
table.abc th, table.abc td,
table.abcd th, table.abcd td,
table.abcde th, table.abcde td {
    padding: 10px;
    border: 1px solid #aaaacc;
}

/* C:見出し（thead）の背景色 */
table.abc thead th, table.abcd thead th, table.abcde thead th {
    background-color: #eeeeff;
    color: black;
    text-align: center;
}

/* 修正が必要な特定のクラス */
.r1 {
    color: #ff0000;
    font-weight: bold;
}

.marker {
    background-color: #ffff00;
    font-weight: bold;
    padding: 2px 5px;
}

/* レイアウト調整用 */
.bottom50 { margin-bottom: 50px; }
.top50 { margin-top: 50px; }


/* --- データ復旧 独自メニュー アピールセクションのスタイル（PCサイト特化・リッチ版） --- */

.recovery-special-feature.with-illustrations {
  width: 100%;
  max-width: 1000px; /* PC向けに幅を広げる */
  margin: 60px auto; /* 上下の余白を広めに確保 */
  padding: 50px; /* 内側の余白をゆったりと取る */
  font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  line-height: 1.8; /* PCモニター向けに行間を少し広く */
  color: #333;
  background-color: #fff; /* 背景色を明示 */
  border-radius: 16px; /* 丸みを少し強く */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* PC向けに少し深めの影を追加 */
}

/* ヘッダー部分 */
.feature-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.c-menu-icon {
  width: 200px; /* PC画面に合わせてアイコンを少し大きく */
  height: auto;
  display: block;
  margin: 0 auto 20px;
}
.feature-header .badge {
  display: inline-block;
  background-color: #e60012;
  color: #fff;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 1.1em;
  margin-bottom: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  letter-spacing: 1px; /* 文字間隔を少し開けて視認性向上 */
}
.feature-header h2 {
  font-size: 2.2em; /* PC向けに見出しを大きく */
  color: #004098;
  margin: 0;
  line-height: 1.5;
}

/* 画像レスポンシブ対応（共通） */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* イラストコンテナ */
.illustration-container {
  text-align: center;
  margin-bottom: 30px;
}
.illustration-container .illustration {
  max-width: 70%; /* PC画面で大きすぎないよう適度な幅に */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.illustration-container.gray-zone .illustration {
  max-width: 80%; /* グレイゾーンの図は少し小さめに */
}

/* 業界の裏事情ボックス */
.industry-secret-box {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 40px; /* 余白を大きくとる */
  margin: 50px 0;
}
.industry-secret-box h3 {
  color: #444;
  font-size: 1.5em; /* 見出しを大きく */
  margin-top: 0;
  border-bottom: 2px dashed #ccc;
  padding-bottom: 20px;
  margin-bottom: 30px;
  text-align: center;
}
.highlight-text {
  font-weight: bold;
  font-size: 1.25em; /* フォントサイズ拡大 */
  margin-top: 25px;
  text-align: center;
}
.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff66 60%);
  padding: 2px 8px;
}

/* 比較ボックス（他社 vs 当店） */
.comparison-box {
  display: flex;
  flex-wrap: nowrap; /* PC向け：常に横並びにする */
  gap: 40px; /* 左右のボックスの間隔をしっかり取る */
  margin: 50px 0;
  align-items: stretch;
}
.comparison-item {
  flex: 1; /* 左右均等な幅にする（50%ずつ） */
  border-radius: 16px;
  padding: 35px 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* PC向け：ホバーアニメーション用 */
}

/* PCマウス操作向け：ホバー時に少し浮き上がるエフェクト */
.comparison-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.comparison-item h4 {
  margin-top: 0;
  font-size: 1.5em; /* 見出しを大きく */
  text-align: center;
  border-bottom: 3px solid #fff;
  padding-bottom: 20px;
  margin-bottom: 25px;
}
.comparison-item p {
  flex-grow: 1;
  margin-top: auto;
  font-size: 1.1em;
}
.comparison-item.others {
  background-color: #f2f2f2;
  border-top: 8px solid #777; /* 上部のバーを太く */
}
.comparison-item.our-shop {
  background-color: #e6f7ff;
  border-top: 8px solid #00aaff;
}
.comparison-item.our-shop h4 {
  color: #0066cc;
  border-bottom-color: #b3e6ff;
}
.comparison-item strong {
  display: block;
  font-size: 1.5em; /* 強調テキストをさらに大きく */
  margin-top: 25px;
  color: #e60012;
  text-align: center;
}

/* 最後の念押しテキスト */
.conclusion-text {
  text-align: center;
  font-size: 1.4em; /* PC向けにサイズアップ */
  margin-top: 60px;
  padding: 40px;
  background-color: #fffbe6;
  border: 4px solid #ffd700; /* 枠線を太く */
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.text-red {
  color: #e60012;
  font-size: 1.4em; /* さらに強調 */
  display: block;
  margin-top: 15px;
  font-weight: bold;
}