@charset "UTF-8";

/* Google Fonts読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html,body,#container{
	height: 100%;
}
body{
	margin: 0px;
	padding: 0px;
	color: #2a3439;	/*全体の文字色*/
	font-family: 'Noto Sans JP', "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
					/*フォント種類*/
	line-height: 1.8;    /*行間*/
            color: #333;
            margin: 0 auto;
	font-size: 16px;	/*文字サイズ*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
a:hover{
  color: #1a8a34;  /* クリック可能なリンクの色を変更 */
}
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form{
	margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;
}
ul{
	list-style-type: none;
}
ol{
	padding-left: 40px;padding-bottom: 15px;
}
img{
	border: none;max-width: 100%;height: auto;vertical-align: middle;
}
table{
    width: 80%;
    border-collapse: collapse;
    margin: 50px auto;
  }
  th, td{
    border: 0px solid #ccc;
    padding: 8px;
    text-align: center;
    font-family: 'Arial', sans-serif;
  }
  th{
    background-color: #f2f2f2;
    color: #333;
  }
  tr:nth-child(even){
    background-color: #f9f9f9;
  }
}
#reason table td {
  padding: 10px 5px;
}
#reason strong{
  font-size: 1.1em;
}
@media (max-width: 600px) {
  #reason table, #reason tr, #reason td{
    display: block;
    width: 100%;
  }
  #reason td{
    font-size: 1em;
  }
}
iframe{
	width: 100%;
}
div.imagebox{
		   border: 1px dashed #ffffff; /* 枠線 */
		   background-color: #fffffff;  /* 背景色 */
		   width: 300px; /* 横幅 */
		   height: 160px;
		   float: left; /* 左に配置 */
		   margin: 5px; /* 周囲の余白 */
		}
		p.image, p.caption{
		   text-align: left; /* 左寄せ */
		   margin: 5px;        /* 余白・間隔 */
		}
		p.caption{
		   font-size: 80%;  /* 文字サイズ */
		   color: darkblue; /* 文字色 */
		}
/* グリッド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container{
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 2.0rem;
    position: relative;
}
/* ブロックを縦に表示 */
.row{
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.col{
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}
/* 768px以上の表示 */
@media ( min-width : 768px ) {
.row{
    display: flex;
    flex-direction: row;
    padding: 0;
}
.col{
    margin-left: 4%;
}
	
.col:first-child{
	 
    margin-left: 0; 
}

.row .col.span-1{
    flex: 0 0 4.66666666667%;
    max-width: 4.66666666667%;
}
.row .col.span-2{
    flex: 0 0 13.3333333333%;
    max-width: 13.3333333333%;
}
.row .col.span-3{
    flex: 0 0 22%;
    max-width: 22%;
}
.row .col.span-4{
    flex: 0 0 30.6666666667%;
    max-width: 30.6666666667%;
}
.row .col.span-5{
    flex: 0 0 39.3333333333%;
    max-width: 39.3333333333%;
}
.row .col.span-6{
    flex: 0 0 48%;
    max-width: 48%;
}
.row .col.span-7{
    flex: 0 0 56.6666666667%;
    max-width: 56.6666666667%;
}
.row .col.span-8{
    flex: 0 0 65.3333333333%;
    max-width: 65.3333333333%;
}
.row .col.span-9{
    flex: 0 0 74.0%;
    max-width: 74.0%;
}
.row .col.span-10{
    flex: 0 0 82.6666666667%;
    max-width: 82.6666666667%;
}
.row .col.span-11{
    flex: 0 0 91.3333333333%;
    max-width: 91.3333333333%;
}
.row .col.span-12{
    flex: 0 0 100%;
    max-width: 100%;
}

/* オフセット */
.row .col.offset-1{
    margin-left: 8.66666666667%;
}
.row .col.offset-2{
    margin-left: 17.3333333333%;
}
.row .col.offset-3{
    margin-left: 26%;
}
.row .col.offset-4{
    margin-left: 34.6666666667%;
}
.row .col.offset-5{
    margin-left: 43.333333333%;
}
.row .col.offset-6{
    margin-left: 52%;
}
.row .col.offset-7{
    margin-left: 60.6666666667%;
}
.row .col.offset-8{
    margin-left: 69.3333333333%;
}
.row .col.offset-9{
    margin-left: 78.0%;
}
.row .col.offset-10{
    margin-left: 86.6666666667%;
}
.row .col.offset-11{
    margin-left: 95.3333333333%;
}    
}
/*リンク（全般）設定
---------------------------------------------------------------------------*/
a{
	color: #2a3439;		/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}
a:hover{
	color: #59b9d5;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*inner
---------------------------------------------------------------------------*/
.inner{
	max-width: 1200px;	/*サイトの最大幅*/
	margin: 0 auto;
	padding-left: 1% !important;
	padding-right: 1% !important;
}

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

/*トップページのヘッダーと、スライドショーブロック共通設定。他の端末サイズでの再設定が複数あるので変更する際は注意。*/
#top header, #mainimg{
	height: 700px;	/*スライドショー表示領域の高さの設定。*/
}

/*トップページのロゴ画像*/
#top #logo img{
	position: fixed;	/*スクロールしても固定表示させる設定。*/
	left: 10%;	/*左から10%の場所に配置。*/
	top: 50px;	/*上から50pxの場所に配置。*/
	z-index: 1;
	width: 150px;	/*画像の幅*/
}
/*トップページのフリーダイヤル画像*/
#top #tel img{
	position: fixed;	/*スクロールしても固定表示させる設定。*/
	right: 10%;	/*右から10%の場所に配置。*/
	top: 50px;	/*上から50pxの場所に配置。*/
	z-index: 1;
	width: 150px;	/*画像の幅*/
}
/*ヘッダー（サイト名ロゴが入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header{
	width: 100%;
	background: #fff;背景色（古いブラウザ用）*/
		margin-bottom: 30px;	/*ヘッダーの下に空けるスペース*/
}
header #inner{
	max-width: 980px;	/*幅。下の「#contents」の幅に合わせる。*/
	height : 147px;		/*高さ*/
	margin: 0 auto;
	position: relative;
}
/*ロゴ画像*/
header #logo{
	position: absolute;
	left: 1px;	/*ヘッダーブロックに対して左から2pxの場所に配置*/
	top: 30px;	/*ヘッダーブロックに対して上から34pxの場所に配置*/
	width: 370px;	/*画像の幅*/
}
/*電話番号ボックスの設定*/
header address{
	position: absolute;
	right: 10px;	/*ヘッダーブロックに対して右から10pxの場所に配置*/
	top: 40px;		/*ヘッダーブロックに対して上から40pxの場所に配置*/
	font-size: 11px;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広めにとる設定*/
	color: #000;		/*文字色*/
	font-style: normal;
}
/*電話番号の文字設定*/
header address .tel{
	font-size: 18px;	/*文字サイズ*/
	font-weight: bold;	/*太字に*/
	display: block;
}
header address .tel a{
	color: #000;
}
.visually-hidden{
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.visually-hidden{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
/*メインメニューのブロック
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar{
	position: relative;z-index: 10;
	text-align: center;	/*文字を中央に*/
	background: rgba(118, 197, 221, 0.93);	/*背景色*/
	border-bottom: 1px solid #2a3439;	/*下線の幅、線種、色*/
}
#menubar > ul{
	overflow: hidden;
}
/*メニュー１個あたりの設定*/
#menubar ul li{
	float: left;	/*左に回り込み*/
	width: 20%;		/*幅。今回は５個メニューがあるので100÷5=20*/
}
#menubar ul li a{
	text-decoration: none;display: block;
	height: 63px;	/*メニューブロックの高さ*/
	padding-top: 12px;	/*メニューブロックの高さプラス、上に空ける余白。メニューテキストの上下の配置バランスをここで調整して下さい。*/
}
/*飾り文字*/
#menubar ul li span{
	display: block;
	font-size: 10px;	/*文字サイズ*/
	color: #fff;		/*文字色*/
}
/*スマホ用メニューを表示させない*/
#menubar-s{
	display: none;
}
/*３本バーアイコンを表示させない*/
#menubar_hdr{
	display: none;
}
/*ドロップダウンメニュー用
----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul.ddmenu{
	position:absolute;visibility: hidden;padding: 0;height: auto;
	width: 500px;	/*ブロックの幅*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: #59b9d5;	/*背景色*/
	padding: 10px;			/*ブロック内の余白*/
	font-size: 13px;		/*文字サイズ*/
	text-align: left;		/*文字を左よせ*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事。0.2は20%透明度。*/
}
#menubar ul.ddmenu::before{
	content: "▲";
	font-size: 15px;
	color: #59b9d5;
	position: absolute;
	top: -18px;
	left: 27%;
}
/*メニュー１個あたりの設定*/
#menubar ul.ddmenu li{
	width: 50%;		/*幅。２列なので50%。*/
	float: left;	/*左に回り込み*/
}
#menubar ul.ddmenu li a{
	transition: 0s;background: none;height: auto;width: 100%;
	color: #fff;	/*文字色*/
	opacity: 0.7;	/*透明度70%*/
	padding: 0px 5px;	/*上下、左右への余白*/
}
/*マウスオン時*/
#menubar ul.ddmenu li a:hover {
	opacity: 1;	/*100%表示にする*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu .nav-fix-pos#menubar{
	position: fixed;width: 100%;top: 0px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.95);	/*背景色。255,255,255は白の事で0.95は透明度。*/
}
body.is-fixed-menu #contents{
	margin-top: 75px;
}
/*※以下の２ブロックのスタイルの中身は、上の２ブロックのスタイルと単純に合わせておいて下さい。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed .nav-fix-pos#menubar{
	position: fixed;width: 100%;top: 0px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.95);	/*背景色。255,255,255は白の事で0.95は透明度。*/
}
body.is-fixed #contents{
	margin-top: 75px;
}

/*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
#contents{
	position: relative;z-index: 1;
	overflow: hidden;
	background: #fff;	/*背景色*/
	padding: 40px 0px;	/*上下、左右へのブロック内の余白*/
}
/*contentsの中にあるinner*/
#contents .inner{
	padding: 40px 0px;	/*上下、左右へのブロック内の余白*/
}
/*h2タグ*/
#contents h2{
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #59b9d5;		/*文字色*/
}
/*h2タグにclass="type1"を指定した場合*/
#contents h2.type1{
	background : url(../images/bg_company2.jpg) center center / cover no-repeat scroll padding-box border-box transparent;	/*背景色（古いブラウザ用）*/	/*背景画像の読み込み*/
	padding: 50px 0px;	/*上下、左右へのボックス内の余白*/
	color: #fff;	/*文字色*/
}
/*h2タグのspan（装飾用）タグ*/
#contents h2 span{
	display: block;
	font-size: 14px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる設定*/
}
/*h3タグ*/
#contents h3{
	clear: both;
	margin-bottom: 20px;
	font-size: 20px;	/*文字サイズ*/
	color: #009999;
	font-weight:  550;
	border-bottom: 1px solid #ccc;
}
/*h3タグの１文字目*/
#contents h3::first-letter{
	border-left: 3px solid #59b9d5;	/*左側の線の幅、線種、色*/
	padding-left: 20px;	/*線と文字との余白*/
}
/*段落タグ*/
#contents p{
	padding: 0 25px 25px;
}
#contents h2 + p,
#contents h3 + p{
	margin-top: -10px;
}
/*section同士の余白*/
#contents section + section{
	margin-top: 40px;
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
/*mainブロック*/
.main{
	float: left;	/*左に回り込み*/
	width: 75%;		/*メインコンテンツの幅*/
}

/*求人一覧ページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list{
	position: relative;
	overflow: hidden;
	padding: 40px;		/*ボックス内の余白*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	margin-bottom: 50px;		/*ボックス間の余白*/
	box-shadow: 2px 2px 10px rgba(0,0,0,0.15);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.15は透明度15%の事。*/
}
/*ボックス内のh4タグ設定*/
.list h4{
	font-size: 28px;	/*文字サイズ*/
	color: #59b9d5;		/*文字色*/
}
.list h4 a{
	color: #59b9d5;	/*リンクテキストの文字色*/
}
/*ボックス内のp(段落)タグ設定*/
.list p{
	padding: 0px 0px 10px !important;	/*上、左右、下への余白*/
}

/*アイコン（正社員、アルバイト、パート、未経験可、など）
---------------------------------------------------------------------------*/
/*アイコン共通*/
.icon{
	display: inline-block;
	margin: 2px;
	font-size: 12px;	/*文字サイズ*/
	padding: 0 5px;		/*ボックス内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: #eee;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fff, #eee);	/*グラデーション*/
}
.icon a{
	text-decoration: none;
}
/*アイコン色付き（正社員）*/
.icon.color1{
	border: 1px solid #59b9d5;	/*枠線の幅、線種、色*/
	background: #66d5f5;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#66d5f5, #59b9d5);	/*グラデーション*/
	color: #fff !important;	/*文字色*/
}
/*アイコン色付き（アルバイト）*/
.icon.color2{
	border: 1px solid #161995;	/*枠線の幅、線種、色*/
	background: #2b2ebc;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#2b2ebc, #161995);	/*グラデーション*/
	color: #fff;	/*文字色*/
}

/*求人一覧ページの「詳細を見る・応募する」ボタン
---------------------------------------------------------------------------*/
a.btn{
	display: block;text-decoration: none;
	background: #59b9d5;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#66d5f5, #59b9d5);	/*グラデーション*/
	color: #fff;	/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	padding: 10px;		/*ボタン内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
	border: 1px solid #59b9d5;	/*枠線の幅、線種、色*/
}
/*マウスオン時*/
a:hover.btn{
	box-shadow: none;
	background: #fff;	/*背景色*/
	color: #59b9d5;		/*文字色*/
}

/*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
/*ボックス全体を囲むulタグへの設定*/
.list2{
	padding-bottom: 50px;
	overflow: hidden;
}
/*各ボックスの設定*/
.list2 li{
	float: left;	/*左に回り込み*/
	width: 24%;		/*幅*/
	margin: 10px 0.5%;	/*上下、左右へのボックスの外側へ空けるスペース*/
	line-height: 1.5;	/*行間*/
	position: relative;
}
.list2 a{
	display: block;text-decoration: none;
	height: 80px;	/*ボックスの高さ*/
	overflow: hidden;	/*ボックスから飛び出た場合、非表示にする設定*/
	background: #59b9d5;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#66d5f5, #59b9d5);/*背景グラデーション*/
	border-radius: 10px;	/*角丸のサイズ*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.2は20%色がついた状態の事。*/
	padding: 15px;	/*ボックス内の余白*/
	color: #fff;	/*文字色*/
}
/*マウスオン時*/
.list2 a:hover{
	background: #f5f5f5;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#f5f5f5, #e2e2e2);/*背景グラデーション*/
	color: #59b9d5;	/*文字色*/
}
/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
.list2 .img{
	height: 100%;			/*高さ*/
	background: #fff;	/*背景色*/
	float: right;		/*右に回り込み*/
	border-radius: 3px;	/*角丸のサイズ*/
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list2 span{
	font-size: 28px;	/*文字サイズ*/
	position: absolute;
	bottom: 15px;	/*下から15pxの場所に配置*/
	right: 110px;	/*右から110pxの場所に配置*/
}

/*subコンテンツ
---------------------------------------------------------------------------*/
/*subブロック*/
.sub{
	float: right;	/*右に回り込み*/
	width: 22%;		/*サブコンテンツの幅*/
}
/*subコンテンツ内のh2タグ設定*/
.sub h2{
	margin-bottom: 0 !important;
	font-size: 16px !important;	/*文字サイズ*/
	padding: 10px;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*メニューの線の幅、線種、色*/
	color: #333 !important;
}
/*subコンテンツ内の段落タグ設定*/
.sub p{
	margin: 0 !important;
	padding: 10px !important;
}

/*subコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニュー全体の設定*/
.sub ul.submenu{
	margin-bottom: 20px;	/*メニューブロックの下に空けるスペース*/
	border-top: solid 1px #dcdcdc;	/*上の線の線種、幅、色*/
}
/*メニュー１個ごとの設定*/
.sub ul.submenu li a{
	text-decoration: none;display: block;
	padding: 5px 10px;	/*メニュー内の余白。上下、左右への設定。*/
	border-bottom: solid 1px #dcdcdc;	/*下の線の線種、幅、色*/
	border-left: solid 1px #dcdcdc;		/*左の線の線種、幅、色*/
	border-right: solid 1px #dcdcdc;	/*右の線の線種、幅、色*/
}
/*マウスオン時の背景色*/
.sub ul.submenu li a:hover{
	background: #f4f4f4;	/*背景色*/
}
/*h2直下にsubmenuが続いた場合のみ、submenuの上の線を消す設定*/
.sub h2 + ul.submenu{
	border-top: none;
}

/*subコンテンツ内のbox1
---------------------------------------------------------------------------*/
.sub .box1{
	overflow: hidden;
	padding: 10px;			/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックスの下に空けるスペース*/
	border: solid 1px #dcdcdc;	/*線の線種、幅、色*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1) inset;	/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.1は透明度10%の事。insetは内側への影、という意味。*/
}
/*h2直下にbox1が続いた場合のみ、box1の上の線を消す設定*/
.sub h2 + .box1{
	border-top: none;
}
/*box1内のサブメニュー*/
.sub ul.submenu{
	margin-bottom: 0;
}

/*subコンテンツ内のlist-subボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.sub .list-sub{
	position: relative;overflow: hidden;
	border-left: 1px solid #dcdcdc;		/*左の線の線種、幅、色*/
	border-right: 1px solid #dcdcdc;	/*右の線の線種、幅、色*/
	border-bottom: 1px solid #dcdcdc;	/*下の線の線種、幅、色*/
	line-height: 1.5;	/*行間を少し狭くする。基本となる値は一番上のbodyにあります。*/
	font-size: 12px;	/*文字サイズ*/
}
.sub .list-sub a{
	display: block;text-decoration: none;overflow: hidden;
	padding: 5px;	/*ボックス内の余白*/
}
/*マウスオン時のボックス*/
.sub .list-sub a:hover{
	background: #f4f4f4;	/*背景色*/
}
/*h4タグ*/
.sub .list-sub a h4{
	font-weight: bold;	/*太字にする設定*/
	font-size: 16px;	/*文字サイズ*/
}
/*段落(p)タグ*/
.sub .list-sub p{
	padding: 0 !important;
}
/*画像*/
.sub .list-sub figure{
	width: 30%;		/*画像の幅*/
	float: left;	/*左に回り込み*/
	margin-right: 5px;	/*画像右側に空ける余白*/
}

/*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1〜option3、と、newアイコン共通*/
.option1,.option2,.option3,.new{
	font-size: 12px;	/*文字サイズ*/
	text-align: center;
	display: block;
	width: 80px;		/*幅*/
	line-height: 30px;	/*高さ*/
	position: absolute;
	right: 40px;	/*右から40pxの場所に配置*/
	top: 0px;		/*上から0pxの場所に配置*/
}
/*subコンテンツ内で使う場合の追加（変更）設定*/
.sub .option1,.sub .option2,.sub .option3,.sub .new{
	font-size: 10px;	/*文字サイズ*/
	line-height: 16px;	/*行間*/
	right: 0px;		/*右から0pxの場所に配置*/
	transform: rotate(45deg) translate(22px,-10px);	/*45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
}
/*option1*/
.option1{
	color: #FFF;			/*文字色*/
	background: #f83d72;	/*背景色*/
}
/*option2*/
.option2{
	color: #000;			/*文字色*/
	background: #ffd200;	/*背景色*/
}
/*option3*/
.option3{
	color: #FFF;			/*文字色*/
	background: #999;	/*背景色*/
}
/*new*/
.new{
	color: #FFF;			/*文字色*/
	background: #F00;	/*背景色*/
}

/* フッター全体 */
footer {
    clear: both;
    position: relative;
    z-index: 1;
    font-size: 12px;
    background: #59b9d5; /* 現在の色を維持 */
    color: #fff;
    padding-bottom: 20px;
}

footer a { color: #fff; text-decoration: none; }
footer a:hover { opacity: 0.8; }

/* フッターメニュー（4カラム維持） */
#footermenu {
    overflow: hidden;
    padding: 30px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

#footermenu ul {
    float: left;
    width: 23%; /* 4つでぴったり収まるサイズ */
    padding: 0 1%;
    text-align: left;
    line-height: 1.8;
    box-sizing: border-box;
}

#footermenu li.title { font-size: 14px; font-weight: bold; margin-bottom: 10px; }

/* ロゴエリア用スタイル */
.footer-logos {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    margin: 0 5%;
}

.footer-logos img {
    height: 40px; /* 全てのロゴの高さを揃える */
    margin: 0 15px;
    vertical-align: middle;
}
/* ロゴエリアの整列 */
.footer-logos {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: 0 5%;
}
.footer-logos img {
    height: 70px; /* 全てのロゴの高さを一定に */
    margin: 0 10px;
    vertical-align: middle;
}

/* 既存の #copyright を少し調整 */
#copyright {
    text-align: center;
    padding: 10px 0 20px 0;
    color: #fff;
}
#copyright a { color: #fff; text-decoration: none; }
#copyright { text-align: center; padding: 20px; font-size: 11px; }

/*コピーライト
---------------------------------------------------------------------------*/
#copyright{
	clear: both;
	text-align: center;
	background: #666;	/*背景色*/
}
#copyright a{
	text-decoration: none;
}
#copyright a:hover{
	color: #666;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*見出しを含まないお知らせブロック*/
#new dl{
	background: #eee;	/*背景色*/
	padding: 20px;		/*ブロック内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
}
/*日付設定*/
#new dt{
	float: left;
	width: 9em;		/*幅*/
	color: #59b9d5;	/*文字色*/
	letter-spacing: 0.1em;
}
/*記事設定*/
#new dd{
	padding-left: 9em;
}

/*ta1設定
---------------------------------------------------------------------------*/
/*ta1テーブル*/
.ta1{
	width: 100%;
	margin: 0 0 20px;
}
.ta1, .ta1 td, .ta1 th{
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
	width: auto;
	text-align: left;	/*左よせ*/
	background: #f6f5f2;	/*背景色*/
	font-size: 18px;	/*文字サイズ*/
}
/*ta1の左側ボックス*/
.ta1 th{
	width: 140px;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img{
	width: 100%;
}
/*labelタグを２列表示にする（CMS用）*/
.ta1.cms td label{
	display: block;
	float: left;
	width: 50%;
}

/*よく頂く質問
---------------------------------------------------------------------------*/
/*外側ブロック*/
.faq{
	padding: 0px 20px;	/*上下、左右への余白*/
}
/*質問*/
.faq dt{
	color: #59b9d5;	/*文字色*/
	font-weight: bold;	/*太字にする設定*/
	background: url(../images/faq_q.png) no-repeat left center;	/*背景アイコン*/
	padding-left: 30px;	/*背景アイコンに重ならないよう左に余白を作る*/
}
/*回答*/
.faq dd{
	background: url(../images/faq_a.png) no-repeat left top;	/*背景アイコン*/
	padding-left: 30px;	/*背景アイコンに重ならないよう左に余白を作る*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	margin-bottom: 20px;	/*ボックスの下側（外側）に空けるスペース*/
	padding-bottom: 20px;	/*ボックス内の下側に空けるスペース*/
}

/*inputボタン
---------------------------------------------------------------------------*/
#contents input.btn[type="submit"],
#contents input.btn[type="button"],
#contents input.btn[type="reset"]{
	padding: 5px 10px;		/*上下、左右へのボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	font-size: 20px;		/*文字サイズ*/
	border-radius: 3px;		/*角丸のサイズ*/
	background: #eee;		/*背景色*/
}
/*マウスオン時の設定*/
#contents input.btn[type="submit"]:hover,
#contents input.btn[type="button"]:hover,
#contents input.btn[type="reset"]:hover{
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon{
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*ヘッダーにメニューが固定される分、リンク先が隠れるのを防ぐ為のスタイル。※ページ内へのリンクで使う。
---------------------------------------------------------------------------*/
.link{
	display: block;
	margin-top: -100px;
	padding-top: 100px;
}

/*ページの上部へボタン「↑」設定
---------------------------------------------------------------------------*/
@keyframes scroll {0% {opacity: 0;}100% {opacity: 1;}}
body .nav-fix-pos-pagetop a{
	display: none;
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a{
	display: block;
	text-decoration: none;
	text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 1;
	position: fixed;
	bottom: 20px;	/*下から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #666;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover{
	background: #999;	/*背景色*/
}

/*その他
---------------------------------------------------------------------------*/
.look{
	background: #ccc;padding: 5px 10px;border-radius: 4px;
}
.mb15,.mb1em{
	margin-bottom: 15px !important;
}
.mb30{
	margin-bottom: 30px !important;
}
.mb50{
	margin-bottom: 50px !important;
}
.p0{
	padding:0 !important;
}
.clear{
	clear: both;
}
ul.disc{
	padding: 0em 25px 15px;list-style: disc;
}
.color1, .color1 a{
	color: #59b9d5 !important;
}
.pr{
	font-size: 10px;
}
.wl{
	width: 96%;
}
.ws{
	width: 50%;
}
.c{
	text-align: center !important;
}
.r{
	text-align: right !important;
}
.l{
	text-align: left !important;
}
.w50{
	overflow: hidden;width: 50%;
}
.fl{
	float: left;
}
img.fl{
	float: left;width:30%;margin-right: 20px;margin-bottom: 20px;
}
.fr{
	float: right;
}
img.fr{
	float: right;width:30%;margin-left: 20px;margin-bottom: 20px;
}
.photo{
	padding: 10px;background: #fff;border: 5px solid #fff;box-shadow: 2px 4px 5px rgba(0,0,0,0.2);
}
.big1{
	font-size: 22px;
}
.sub .big1{
	font-size: 12px;
}
.mini1{
	font-size: 11px;display: inline-block;line-height: 1.5;
}
.sh{
	display: none;
}
.date{
	text-align: right;color: #999;font-size: 11px;
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------
※ここから数ブロック（420px以下環境まで）は、スライドショー表示領域の高さとロゴサイズの再設定です。
面倒ですができるだけ綺麗に表示できるよう細かく設定して下さい。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*PCの場合*/
.pc{
	display:inline!important;
}
.mb{
	display:none!important;
}
@media screen and (max-width: 1000px) {
/*タブレット、スマホの場合*/
.pc{
	display:none!important;
}
.mb{
	display:inline!important;
}
}

/*画面幅1500px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1500px){

	#top header, #mainimg{
	height: 900px;
}

}

/*画面幅2000px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:2000px){

	#top header, #mainimg{
	height: 1200px;
}

}

/*画面幅1200px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){

	#top header, #mainimg{
	height: 600px;
}

}

/*画面幅1000px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

	#top header, #mainimg{
	height: 470px;
}
	#top #logo img{
	left: 1%;top: 20px;width: 200px;
}

}

/*画面幅800px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

	#top header, #mainimg{
	height: 380px;
}

}

/*画面幅620px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:620px){

	#top header, #mainimg{
	height: 300px;
}
	#top #logo img{
	left: 1%;top: 10px;width: 120px;
}

}

/*画面幅500px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:500px){

	#top header, #mainimg{
	height: 240px;
}

}

/*画面幅420px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:420px){

	#top header, #mainimg{
	height: 190px;
}
	#top #logo img{
	left: 1%;top: 10px;width: 90px;
}

}



/*画面幅1000px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

/*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 li{
	width: 49%;		/*幅*/
	margin: 10px 0.5%;	/*上下、左右へのボックスの外側へ空けるスペース*/
}

}



/*画面を横向きにした場合の高さが500px以下の場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:500px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar-s ul li a{
	padding: 10px;		/*メニュー内の余白*/
	float: left;		/*左に回り込み*/
	width: 40%;			/*幅*/
	margin-left: 4%;	/*メニューの左側に空けるスペース*/
}

}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
@keyframes menu1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s{
	display: block;overflow: hidden;
	position: fixed;z-index: 100;
	top: 0px;
	width: 100%;
	background: rgba(0,0,0,0.8);	/*背景色*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5s;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
}
/*メニュー１個あたりの設定*/
#menubar-s ul li a{
	display: block;text-decoration: none;
	padding: 10px 15px;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	color: #fff;		/*文字色*/
	font-size: 16px;	/*文字サイズ*/
}
/*飾り文字*/
#menubar-s ul li span{
	display: block;
	font-size: 10px;	/*文字サイズ*/
	color: #999;		/*文字色*/
}
/*PC用メニューを非表示にする*/
#menubar{
	display: none;
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr{
	display: block;
	position: fixed;z-index: 100;
	top: 8px;		/*上から8pxの場所に配置*/
	right: 10px;	/*右から10pxの場所に配置*/
	border-radius: 50%;	/*円形にする*/
	border: 1px solid #fff;
}
/*アイコン共通設定*/
.close#menubar_hdr,
.open#menubar_hdr{
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
.close#menubar_hdr{
	background: #59b9d5 url(../images/icon_menu.png) no-repeat center top/50px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
/*閉じるアイコン*/
.open#menubar_hdr{
	background: #59b9d5 url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*fixmenuから折りたたみメニューになるのでリセット。*/
body.is-fixed-menu #contents{
	margin-top: 0px;
}

/*main,subコンテンツ
---------------------------------------------------------------------------*/
.main,.sub{
	float: none;
	width: auto;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n .sub,body.s-n #footermenu{
	display: none;
}
.big1{
	font-size: 20px;
}
.w50{
	overflow: hidden;width: auto;
}
.fl{
	float: none;
}
.fr{
	float: none;
}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body{
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*inner
---------------------------------------------------------------------------*/
.inner{
	padding-left: 2% !important;
	padding-right: 2% !important;
}

/*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
#contents{
	padding: 20px 0px;	/*上下、左右へのブロック内の余白*/
}
/*contentsの中にあるinner*/
#contents .inner{
	padding: 20px 0px;	/*上下、左右へのブロック内の余白*/
}
/*h2,h3タグ*/
#contents h2{
	font-size: 20px;	/*文字サイズ*/
}
/*h2タグのspan（装飾用）タグ*/
#contents h2 span{
	font-size: 10px;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
}
/*h3タグ*/
#contents h3{
	font-size: 20px;	/*文字サイズ*/
	padding-left: 10px;
}
/*h3タグの１文字目*/
#contents h3::first-letter{
	padding-left: 10px;	/*線と文字との余白*/
}
/*段落タグ*/
#contents p{
	padding: 0 10px 20px;
}

/*求人一覧ページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list{
	padding: 10px;		/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックス間の余白*/
}
/*ボックス内のh4タグ設定*/
.list h4{
	font-size: 20px;	/*文字サイズ*/
}

/*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 li{
	width: auto;		/*幅*/
	margin: 0 0 10px;	/*上、左右、下へのボックスの外側へ空けるスペース*/
}
.list2 a{
	height: auto;	/*ボックスの高さ*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
.list2 .img{
	height: auto;
	width: 10%;
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list2 span{
	font-size: 20px;/*文字サイズ*/
	right: 20%;		/*右から20%の場所に配置*/
	bottom: 6px;	/*下から6pxの場所に配置*/
}

/*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1〜option3、と、newアイコン共通*/
.option1,.option2,.option3,.new{
	font-size: 10px;	/*文字サイズ*/
	width: 50px;		/*幅*/
	line-height: 20px;	/*高さ*/
	right: 10px;	/*右から10pxの場所に配置*/
}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu{
	display: none;	/*画面領域が狭いので非表示に。*/
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th{
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th{
	width: 100px;
}

/*その他
---------------------------------------------------------------------------*/
.photo{
	padding: 5px;border: 2px solid #fff;
}
.ws,.wl{
	width: 94%;
}
.fl{
	float: none;
}
img.fl{
	float: none;display: block;width:90%;margin: 0 auto 20px;
}
.fr{
	float: none;
}
img.fr{
	float: none;display: block;width:90%;margin: 0 auto 20px;
}
.big1{
	font-size: 16px;
}
.sh{
	display:block;
}
.pc{
	display:none;
}
.youtube{
    position:relative;
    padding-bottom: 56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
}

@media (max-width: 540px) {
　　横幅が540px以下の場合に適用するCSSを記入
}
@media (min-width: 541px) {
　　横幅が541px以上の場合に適用するCSSを記入
}

/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px){

/*ta1設定
---------------------------------------------------------------------------*/
/*labelタグを2列から1列表示にする（CMS用）*/
.ta1.cms td label{
	float: none;
	width: 100%;
}
article ul li,article ol li{
	margin-top: 24px;
}
article ul > : last-child, article ol > : last-child
{margin-bottom: 24px}
}

（width: 30% の3列）スマホの時だけ縦に並ぶ
-------------------------------------------------------------------------
@media (max-width: 768px) {
  #HPB_TABLE_6_B_240520164138, 
  #HPB_TABLE_6_B_240520164138 tbody, 
  #HPB_TABLE_6_B_240520164138 tr, 
  #HPB_TABLE_6_B_240520164138 td {
    display: block !important;
    width: 100% !important;
  }
  .hpb-cnt-tb-cell5 {
    margin-bottom: 30px; /* 各機能の間に余白を作る */
    border-bottom: 1px solid #eee; /* 区切り線 */
  }
}

-------------------------------------------------------------------

 /*サービスページ（service.html）
---------------------------------------------------------------------------*/
.product-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 14px;
	margin-bottom: 2em;
}
.product-table td{
	text-align: center;
	padding: 12px 6px 18px 6px;
	background: #f8fcff;
	border-radius: 12px;
	box-shadow: 0 2px 8px #eee;
	transition: box-shadow 0.2s;
}
.product-table td:hover{
	box-shadow: 0 4px 14px #b8e1ef;
}
.product-table img{
	width: 80px;
	height: 80px;
	object-fit: contain;
	margin-bottom: 8px;
}
.product-title{
	font-weight: bold;
	font-size: 1.08em;
	color: #009999;
	margin-bottom: 4px;
}
.product-caption{
	font-size: 0.96em;
	color: #444;
	min-height: 2.2em;
	margin-bottom: 7px;
}
@media (max-width: 900px){
	.product-table, .product-table tbody, .product-table tr{
		display: block;
		width: 100%;
	}
	.product-table tr{
		margin-bottom: 10px;
	}
	.product-table td{
		display: block;
		width: 94%;
		margin: 0 auto 18px auto;
		box-sizing: border-box;
	}
}

/*お問い合わせボタン（共通で使える）
---------------------------------------------------------------------------*/
.contact-btn{
	display: inline-block;
	background: linear-gradient(90deg, #00b16a 0%, #009999 100%);
	color: #fff !important;
	padding: 16px 38px;
	border-radius: 32px;
	font-weight: bold;
	font-size: 1.25em;
	text-decoration: none;
	margin: 18px 0 8px 0;
	box-shadow: 0 4px 12px rgba(0,150,120,0.14);
	transition: background 0.3s;
	letter-spacing: 0.03em;
	text-align: center;
}
.contact-btn:hover{
	background: linear-gradient(90deg, #009999 0%, #00b16a 100%);
	color: #fff !important;
}
@media (max-width: 600px){
	.contact-btn{
		width: 90vw;
		font-size: 1.1em;
	}
}

/*ビジネスフォンページ（businessphone.html）
---------------------------------------------------------------------------*/
/* テーブル全体フォントサイズ */
.small-table{
	font-size: 0.95em;
}
.small-table, .small-table td, .small-table th{
	border: none !important;
}

/* サービス・メーカーセルのデザイン */
.hpb-cnt-tb-cell5{
	background: #f8fcfa;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,150,120,0.08);
	padding: 18px 14px 14px 14px;
	vertical-align: top;
	text-align: left;
	margin-bottom: 18px;
	box-sizing: border-box;
}
.hpb-cnt-tb-cell5 h3{
	color: #009999;
	font-size: 1.1em;
	margin: 0 0 8px 0;
	letter-spacing: 0.03em;
}
.hpb-cnt-tb-cell5 ul{
	margin: 0 0 10px 1.2em;
	padding: 0;
	font-size: 1em;
	line-height: 1.7;
}
.hpb-cnt-tb-cell5 ul li{
	margin-bottom: 0.2em;
}
.hpb-cnt-tb-cell5 img{
	width: 100%;
	max-width: 220px;
	height: auto;
	border-radius: 10px;
	margin: 12px auto 0 auto;
	box-shadow: 0 2px 8px rgba(0,150,120,0.07);
	display: block;
}
@media (max-width: 700px){
	.hpb-cnt-tb3, .hpb-cnt-tb3 tbody, .hpb-cnt-tb3 tr{
		display: block;
		width: 100% !important;
	}
	.hpb-cnt-tb3 td,
	.hpb-cnt-tb-cell5{
		display: block;
		width: 100% !important;
		margin-bottom: 24px;
		padding: 16px 10px 14px 10px;
	}
	.hpb-cnt-tb-cell5 h3{
		font-size: 1.15em;
		margin-top: 0;
	}
	.hpb-cnt-tb-cell5 img{
		max-width: 100%;
		margin: 10px auto 0 auto;
	}
	.small-table{
		font-size: 1em;
	}
}

/* ステップカードデザイン */
.flow-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 18px 14px;
	margin-bottom: 32px;
}
.flow-step{
	background: #f8fcfa;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,150,120,0.08);
	padding: 18px 18px 14px 18px;
	vertical-align: top;
	text-align: left;
	position: relative;
}
.flow-step h4{
	color: #009999;
	font-size: 1.1em;
	margin: 0 0 8px 0;
	letter-spacing: 0.03em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.flow-step img.step-icon{
	width: 38px;
	height: 38px;
	vertical-align: middle;
	border-radius: 8px;
	margin-right: 6px;
}
.flow-step img.step-img{
	width: 120px;
	max-width: 45vw;
	float: right;
	border-radius: 10px;
	margin-left: 18px;
	margin-bottom: 8px;
	box-shadow: 0 2px 8px rgba(0,150,120,0.07);
}
@media (max-width: 700px){
	.flow-table, .flow-table tr, .flow-table td{
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		margin-bottom: 18px;
	}
	.flow-step img.step-img{
		float: none;
		display: block;
		margin: 10px auto 10px auto;
		width: 80vw;
		max-width: 220px;
	}
}

/* 対応エリアリスト */
.area-list{
	margin: 0 0 1em 1.2em;
	padding: 0;
	font-size: 1em;
	line-height: 1.7;
}
.area-list li{
	margin-bottom: 0.2em;
	list-style: disc inside;
}

/*ナースコールシステムページ（nursecallsystem.html）
---------------------------------------------------------------------------*/

/* お悩みセクション */
.section-container{
	padding: 2rem 1rem;
	max-width: 1200px;
	margin: 0 auto;
}
.problems-section{
	text-align: center;
}
.problems-section h2{
	font-size: 2rem;
	font-weight: bold;
	color: #333;
	margin-bottom: 2.5rem;
}
.problem-row{
	display: grid;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	grid-template-columns: 1fr;
}
.staff-resident-row{
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 767px){
	.staff-resident-row{
		grid-template-columns: 1fr;
	}
}
.problem-card{
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
}
.problem-card img{
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: cover;
	border-radius: 0.75rem;
	margin-bottom: 1rem;
}
.problem-card h3{
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}
.problem-card ul{
	list-style: disc;
	list-style-position: inside;
	text-align: left;
	padding: 0;
	margin: 0;
	font-size: 1rem;
	color: #555;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex-grow: 1;
}

/* ３つのポイント（メリット）セクション */
.benefits-section{
	padding: 30px 15px;
	background-color: #f5f8fa;
}
.benefits-section h2{
	font-size: 26px;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 40px;
}
.benefits-container{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: stretch;
}
.benefit-card{
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	padding: 25px;
	max-width: 350px;
	flex: 1 1 300px;
	text-align: center;
	border-top: 5px solid #009999;
}
.benefit-icon{
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
}
.benefit-card h3{
	font-size: 18px;
	font-weight: bold;
	color: #009999;
	margin-bottom: 10px;
}
.benefit-card p.main-text{
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	margin-bottom: 10px;
}
.benefit-card p.sub-text{
	font-size: 14px;
	color: #777;
	line-height: 1.5;
}
@media (max-width: 768px){
	.benefits-section h2{
		font-size: 22px;
	}
	.benefit-card{
		padding: 20px;
	}
	.benefit-card h3{
		font-size: 17px;
	}
}

/* 構成セクション */
.component-section{
	padding: 30px 15px;
}
.component-section h2{
	font-size: 26px;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 40px;
}
.component-container{
	display: grid;
	gap: 30px;
}
.component-card{
	background-color: #fff;
	border: 3px solid #f9c290;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	padding: 20px;
}
.component-card-title{
	background-color: #f9c290;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 8px 15px;
	border-radius: 5px 5px 0 0;
	position: relative;
	top: -20px;
	margin-bottom: -10px;
	display: inline-block;
}
.component-card-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
}
.component-card-content img{
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 20px;
}
.component-card-content ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.component-card-content li{
	font-size: 15px;
	line-height: 1.6;
	color: #555;
	margin-bottom: 10px;
}
.component-card-content li::before{
	content: '●';
	color: #f9c290;
	font-weight: bold;
	margin-right: 8px;
}
.component-card-content .sub-text{
	font-size: 12px;
	color: #888;
	margin-top: 10px;
}
.responsive-grid{
	display: grid;
	gap: 20px;
}
@media (min-width: 769px){
	.component-card-content{
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
	.component-card-content img{
		width: 40%;
		min-width: 200px;
		margin-right: 30px;
		margin-bottom: 0;
	}
	.component-card-content .text-container{
		flex-grow: 1;
	}
	.responsive-grid{
		grid-template-columns: 1fr 1fr;
	}
}

/* CTAセクション */
.cta-section{
	text-align: center;
	padding: 3rem 1rem;
	background-color: #f8f9fa;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.cta-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
@media (min-width: 768px){
	.cta-container{
		flex-direction: row;
	}
}
.cta-button{
	display: inline-block;
	padding: 1.2rem 2.5rem;
	background-color: #007bff;
	color: #fff;
	font-size: 1.25rem;
	font-weight: bold;
	border-radius: 30px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
}
.cta-button:hover{
	background-color: #0056b3;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
}
.cta-image{
	width: 80px;
	height: auto;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cta-support-text{
	margin-top: 2rem;
	font-size: 1rem;
	color: #555;
	line-height: 1.5;
}
.cta-support-text p{
	margin: 0;
}
.cta-support-text .phone-number{
	font-size: 2rem;
	font-weight: bold;
	color: #009999;
	text-decoration: none;
	display: inline-block;
	margin-top: 0.5rem;
}

/* サイドバナー（固定お問い合わせパネル）
---------------------------------------------------------------------------*/
.side-contact-panel{
	position: fixed;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 1000;
}
.side-contact-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #0055a5 60%, #0099cc 100%);
	color: white;
	font-weight: bold;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,0,40,0.2);
	transition: background 0.3s, transform 0.2s;
	font-size: 1.1em;
	width: 48px;
	min-height: 120px;
	padding: 0;
}
.side-contact-btn:hover{
	background: linear-gradient(90deg, #007ecc 60%, #00bbee 100%);
	transform: translateY(-2px) scale(1.05);
}
.side-tel-btn{
	background: linear-gradient(90deg, #007a00 60%, #00aa00 100%);
	color: #fff;
	display: none;
}
.side-tel-btn:hover{
	background: linear-gradient(90deg, #005d00 60%, #008000 100%);
}
.side-line-btn{
	background: linear-gradient(90deg, #06c755 60%, #00e676 100%);
	color: #fff;
}
.side-line-btn:hover{
	background: linear-gradient(90deg, #00b900 60%, #00ff99 100%);
}
.side-vertical-text{
	writing-mode: vertical-lr;
	text-orientation: mixed;
	white-space: nowrap;
	font-size: 1.15em;
	padding: 0.5em 0;
}
@media (max-width: 700px){
	.side-contact-panel{
		position: fixed;
		bottom: 10px;
		right: 0;
		left: 0;
		top: auto;
		transform: none;
		flex-direction: row;
		justify-content: center;
		gap: 6px;
		padding: 0 10px;
		background: rgba(255,255,255,0.95);
		box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
		border-radius: 12px 12px 0 0;
	}
	.side-contact-btn{
		width: 48%;
		min-height: 48px;
		font-size: 1em;
		padding: 0;
	}
	.side-vertical-text{
		writing-mode: horizontal-tb;
		text-orientation: initial;
		font-size: 1em;
		padding: 0.5em 0;
	}
	.side-tel-btn{
		display: flex;
	}
}

/*===========================================================================
  オートロックページ（autolock.html）
===========================================================================*/

/* セクション全体の調整 */
.autolock-section{
	max-width: 900px;
	margin: 40px auto;
	padding: 0 20px;
	line-height: 1.8;
	color: #333;
}

.autolock-section h3{
	font-size: 1.5rem;
	padding: 10px 15px;
	margin-bottom: 25px;
	background-color: #f8f9fa;
	border-radius: 0 4px 4px 0;
}

.autolock-section p{
	margin-bottom: 30px;
	font-size: 1.05rem;
	text-align: justify;
}

.autolock-section strong{
	color: #d9534f;
	font-weight: bold;
}

.autolock-section img{
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}

/* お悩みリスト */
.anxiety-list ul{
	list-style: none;
	padding-left: 0;
}

.anxiety-list li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 15px;
	font-weight: bold;
	color: #444;
}

.anxiety-list li::before{
	content: '？';
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	background: #009999;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 22px;
	font-size: 14px;
}

/* 画像の回り込み調整 */
.anxiety-img,
.solution-img{
	max-width: 45%;
	margin: 10px;
}

/* ランキングテーブル */
.table-scroll{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1em;
}

.table-scroll table{
	min-width: 600px;
	border-collapse: collapse;
	width: 100%;
	background: #fff;
}

.table-scroll th,
.table-scroll td{
	padding: 8px 10px;
	border: 1px solid #cce3ee;
	text-align: center;
	font-size: 1em;
}

.table-scroll th{
	background: #f0f8ff;
	color: #009999;
	font-weight: bold;
}

.rank-number{
	color: #e67e22;
	font-weight: bold;
	font-size: 1.1em;
}

.highlight{
	background: #ffeabf;
	border-radius: 4px;
	padding: 2px 4px;
}

/* 従来型インターホンカード */
.brand-list{
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: center;
	margin: 2em 0;
}

.brand-card{
	flex: 1 1 340px;
	max-width: 360px;
	background: #f8fcff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.09);
	padding: 18px 14px 22px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.brand-card img.brand-logo{
	width: 110px;
	height: auto;
	margin-bottom: 10px;
}

.brand-card img.product-img{
	width: 90%;
	max-width: 280px;
	height: auto;
	border-radius: 8px;
	margin: 0 auto 12px auto;
}

.brand-card h4{
	color: #009999;
	margin: 10px 0 6px;
	font-size: 1.1rem;
}

.brand-card p{
	font-size: 0.97rem;
	color: #333;
	margin: 0 0 10px 0;
}

/* IP型カード */
.product-list{
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: center;
	margin: 2em 0;
}

.product-card{
	flex: 1 1 320px;
	max-width: 340px;
	background: #f8fcff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.09);
	padding: 18px 14px 22px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

.product-card img.product-img{
	width: 100%;
	max-width: 260px;
	height: auto;
	border-radius: 8px;
	margin: 0 auto 12px auto;
}

.product-card h4{
	color: #009999;
	margin: 10px 0 6px;
	font-size: 1.1rem;
}

.product-card p{
	font-size: 0.97rem;
	color: #333;
	margin: 0 0 10px 0;
}

/* 施工事例カード */
.case-list{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}

.case-card{
	width: 320px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	box-shadow: 0 2px 8px #eee;
	overflow: hidden;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
}

.case-card img{
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.case-card .case-title{
	font-weight: bold;
	font-size: 1.1em;
	margin: 12px 0 6px 0;
	padding: 0 16px;
	color: #0078D7;
}

.case-card .case-info{
	font-size: 0.95em;
	color: #333;
	padding: 0 16px 8px 16px;
}

.case-card .case-tags{
	font-size: 0.85em;
	color: #666;
	padding: 0 16px 8px 16px;
}

.case-card .case-detail{
	padding: 0 16px 12px 16px;
	font-size: 0.95em;
	color: #444;
}

/* レスポンシブ */
@media (max-width: 900px){
	.brand-list{
		flex-direction: column;
		align-items: center;
	}

	.brand-card{
		max-width: 95vw;
	}

	.product-list{
		flex-direction: column;
		align-items: center;
	}

	.product-card{
		max-width: 95vw;
	}
}

@media (max-width: 800px){
	.case-list{
		flex-direction: column;
		align-items: center;
	}

	.case-card{
		width: 95%;
	}
}

@media (max-width: 768px){
	.autolock-section img{
		float: none !important;
		display: block;
		margin: 0 auto 20px auto;
		width: 100%;
	}

	.autolock-section h3{
		font-size: 1.3rem;
	}

	.anxiety-img,
	.solution-img{
		float: none !important;
		width: 100% !important;
		max-width: 100%;
		margin: 0 0 20px 0;
	}
}

@media (max-width: 600px){
	.table-scroll table{
		min-width: 480px;
		font-size: 0.97em;
	}

	.product-card{
		width: 95vw !important;
		max-width: none !important;
		margin-bottom: 20px;
	}
}
/*===========================================================================
  リンクボタン
===========================================================================*/
.btn-banner {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.btn-banner:hover {
  background-color: #0056b3;
  color: #fff;
}

/*===========================================================================
　会社情報（corporate.html）
===========================================================================*/

.company-section-list{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  margin-bottom: 2.5em;
}
.company-section-item{
  flex: 1 1 340px;
  max-width: 420px;
  background: #f8fcff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 20px 18px 24px 18px;
  text-align: center;
  box-sizing: border-box;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.company-section-item img{
  max-width: 180px;
  height: auto;
  margin-bottom: 12px;
  border-radius: 8px;
}
.company-section-title{
  font-weight: bold;
  font-size: 1.12em;
  color: #009999;
  margin-bottom: 8px;
}
.company-section-desc{
  font-size: 0.98em;
  color: #333;
  min-height: 2.2em;
  margin-bottom: 12px;
}
.btn-banner{
  display: inline-block;
  background: linear-gradient(90deg, #0078D7 0%, #00BFFF 100%);
  color: #fff !important;
  padding: 10px 28px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  margin-top: 8px;
  box-shadow: 0 4px 8px rgba(0,120,215,0.14);
  transition: background 0.3s;
}
.btn-banner:hover{
  background: linear-gradient(90deg, #005ea2 0%, #0080c0 100%);
}
@media (max-width: 900px) {
  .company-section-item { max-width: 95vw; }
  .company-section-list { gap: 16px; }
}

/* ===================================================
   Akuvox IPインターホン ページ統合スタイルシート
   =================================================== */

/* -------------------------------------------------
   施工事例カード
   ------------------------------------------------- */
.case-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.case-card {
  width: 340px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 2px 8px #eee;
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.case-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.case-card .case-title {
  font-weight: bold;
  font-size: 1.1em;
  margin: 12px 0 6px 0;
  padding: 0 16px;
  color: #0078D7;
}

.case-card .case-info {
  font-size: 0.95em;
  color: #333;
  padding: 0 16px 8px 16px;
}

.case-card .case-tags {
  font-size: 0.85em;
  color: #666;
  padding: 0 16px 8px 16px;
}

.case-card .case-detail {
  padding: 0 16px 12px 16px;
  font-size: 0.95em;
  color: #444;
}

@media (max-width: 800px) {
  .case-list {
    flex-direction: column;
    align-items: center;
  }
  .case-card {
    width: 95%;
  }
}

/* -------------------------------------------------
   お問い合わせ・無料お見積りボタン
   ------------------------------------------------- */
.contact-btn {
  display: inline-block;
  background: linear-gradient(90deg, #00b16a 0%, #009999 100%);
  color: #fff !important;
  padding: 16px 38px;
  border-radius: 32px;
  font-weight: bold;
  font-size: 1.25em;
  text-decoration: none;
  margin: 18px 0 8px 0;
  box-shadow: 0 4px 12px rgba(0, 150, 120, 0.14);
  transition: background 0.3s;
  letter-spacing: 0.03em;
  text-align: center;
}

.contact-btn:hover {
  background: linear-gradient(90deg, #009999 0%, #00b16a 100%);
  color: #fff !important;
}

@media (max-width: 600px) {
  .contact-btn {
    width: 90vw;
    font-size: 1.1em;
  }
}

/* -------------------------------------------------
   お支払方法バナーボタン
   ------------------------------------------------- */
.btn-banner {
  display: inline-block;
  background: linear-gradient(90deg, #0078D7 0%, #00BFFF 100%);
  color: #fff !important;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
  margin-top: 16px;
  box-shadow: 0 4px 8px rgba(0, 120, 215, 0.14);
  transition: background 0.3s;
  text-align: center;
}

.btn-banner:hover {
  background: linear-gradient(90deg, #005ea2 0%, #0080c0 100%);
}

/* -------------------------------------------------
   サイドバナー（固定パネル）
   ------------------------------------------------- */
.side-contact-panel {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1000;
}

.side-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #0055a5 60%, #0099cc 100%);
  color: white;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 40, 0.2);
  transition: background 0.3s, transform 0.2s;
  font-size: 1.1em;
  width: 48px;
  min-height: 120px;
  padding: 0;
}

.side-contact-btn:hover {
  background: linear-gradient(90deg, #007ecc 60%, #00bbee 100%);
  transform: translateY(-2px) scale(1.05);
}

.side-tel-btn {
  background: linear-gradient(90deg, #007a00 60%, #00aa00 100%);
  color: #fff;
  display: none; /* PCでは非表示 */
}

.side-tel-btn:hover {
  background: linear-gradient(90deg, #005d00 60%, #008000 100%);
}

.side-line-btn {
  background: linear-gradient(90deg, #06c755 60%, #00e676 100%);
  color: #fff;
}

.side-line-btn:hover {
  background: linear-gradient(90deg, #00b900 60%, #00ff99 100%);
}

.side-vertical-text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: 1.15em;
  padding: 0.5em 0;
}

@media (max-width: 700px) {
  .side-contact-panel {
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 0;
    top: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px 12px 0 0;
  }
  .side-contact-btn {
    width: 48%;
    min-height: 48px;
    font-size: 1em;
    padding: 0;
  }
  .side-vertical-text {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    font-size: 1em;
    padding: 0.5em 0;
  }
  .side-tel-btn {
    display: flex; /* モバイルで表示 */
  }
}

/* -------------------------------------------------
   STEP / 商品カード共通
   ------------------------------------------------- */
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin: 2em 0;
}

.product-card {
  background: #f8fcff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}

.rank-number {
  font-weight: bold;
  color: #0078D7;
}

/* 4×2 スリム工程カード */
.step-card {
  flex: 1 1 200px;
  max-width: 220px;
  padding: 15px 10px;
  min-height: auto;
  margin: 0 auto;
}

.step-card img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .step-card {
    flex: 1 1 45%;
    max-width: 95%;
  }
}

/*トップページ（index.html）
---------------------------------------------------------------------------*/

/* サービスセクション */
.service-section{
	background-color: #f8f9fb;
	padding: 60px 20px;
}

.service-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}

.service-card{
	background: #ffffff;
	padding: 25px 20px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.service-card h3{
	font-size: 1.2rem;
	margin-bottom: 15px;
	color: #333;
	line-height: 1.4;
}

.service-card p{
	font-size: 0.95rem;
	color: #555;
	line-height: 1.6;
}

/*ビルNYCシステム・旧テーブルレイアウト用
---------------------------------------------------------------------------*/

/* 特長テーブル（hpb-cnt-tb3） */
.hpb-cnt-tb3{
	width: 95%;
	margin: 0 auto 20px auto;
	border-collapse: collapse;
	box-shadow: none;
	border-radius: 0;
}

.hpb-cnt-tb3 td{
	border: none;
	text-align: left;
	vertical-align: top;
	padding: 15px;
	font-size: 15px;
	line-height: 1.8;
	background: transparent;
}

.hpb-cnt-tb3 .hpb-cnt-tb-cell5{
	background: #f8fcfa;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,150,120,0.08);
	padding: 18px 14px 14px 14px;
	margin-bottom: 18px;
}

.hpb-cnt-tb3 .hpb-cnt-tb-cell5 font{
	font-size: 1.1em !important;
	font-weight: bold;
	color: #009999;
}

.hpb-cnt-tb3 .hpb-cnt-tb-cell3{
	background: #f9f9f9;
	border-radius: 8px;
	padding: 20px;
	font-size: 14px;
	line-height: 1.8;
	color: #555;
}

/* 仕様テーブル（hpb-cnt-tb1） */
.hpb-cnt-tb1{
	width: 95%;
	margin: 0 auto 20px auto;
	border-collapse: collapse;
	border: 1px solid #ccc;
	box-shadow: none;
	border-radius: 0;
}

.hpb-cnt-tb1 td{
	border: 1px solid #ccc;
	padding: 10px 15px;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

.hpb-cnt-tb1 .hpb-cnt-tb-cell1{
	background: #a7c2f5;
	font-weight: bold;
	font-size: 15px;
	color: #333;
	padding: 12px 15px;
}

.hpb-cnt-tb1 .hpb-cnt-tb-cell2{
	background: #fff;
}

/* 既存CSSのtable共通スタイルを上書きしてリセット */
.hpb-cnt-tb3,
.hpb-cnt-tb1{
	border-radius: 0;
	overflow: visible;
}

.hpb-cnt-tb3 tr:nth-child(even),
.hpb-cnt-tb1 tr:nth-child(even){
	background-color: transparent;
}

.hpb-cnt-tb3 tr:hover,
.hpb-cnt-tb1 tr:hover{
	background-color: transparent;
}

.hpb-cnt-tb3 th,
.hpb-cnt-tb1 th{
	background-color: transparent;
}

/* スマホ対応 */
@media (max-width: 768px){
	.hpb-cnt-tb3,
	.hpb-cnt-tb3 tbody,
	.hpb-cnt-tb3 tr,
	.hpb-cnt-tb3 td{
		display: block !important;
		width: 100% !important;
	}

	.hpb-cnt-tb3 .hpb-cnt-tb-cell5{
		margin-bottom: 20px;
	}

	.hpb-cnt-tb1{
		font-size: 13px;
	}

	.hpb-cnt-tb1 td{
		padding: 8px 10px;
	}
}

/*宅配ボックスページ（delivery_box.html）
---------------------------------------------------------------------------*/

.main-container{
	max-width: 1240px;
	margin: 0 auto;
	padding: 2.5em 1em 3em 1em;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,40,0.10);
}

/* 5つ並びのカード */
.problem-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2em 0;
	margin-bottom: 2em;
}
.problem-item{
	width: 19%;
	min-width: 180px;
	background: #f8fbff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,40,0.07);
	padding: 1.2em 1em 1.6em 1em;
	text-align: center;
	margin-bottom: 0.5em;
	transition: transform .2s, box-shadow .2s;
}
.problem-item:hover{
	transform: translateY(-6px) scale(1.04);
	box-shadow: 0 8px 24px rgba(0,0,40,0.13);
}
.problem-item img{
	width: 100%;
	max-width: 120px;
	height: auto;
	border-radius: 8px;
	margin: 0 auto 0.6em auto;
	display: block;
}
.problem-item p{
	margin-top: 0.6em;
	font-weight: bold;
	color: #003366;
	font-size: 1.08em;
}

/* サービス特徴リスト */
.service-feature-section ul,
.solution-section ul{
	background: #eaf4fc;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0,0,40,0.04);
	padding: 1.2em 2em;
	margin: 1.5em auto 2em auto;
	font-size: 1.06em;
	max-width: 640px;
	text-align: left;
	line-height: 1.8;
}
.service-feature-section li,
.solution-section li{
	margin-bottom: 0.8em;
}

/* 特徴カード（4列） */
.feature-cards{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	justify-content: space-between;
	margin-bottom: 2em;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.feature-cards .problem-item{
	width: calc(25% - 1.5em);
	min-width: 180px;
	background: #f8fbff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,40,0.07);
	padding: 1.3em 1em 1.7em 1em;
	text-align: center;
	transition: transform .2s, box-shadow .2s;
	margin-bottom: 0;
	box-sizing: border-box;
}
@media (max-width: 1100px){
	.feature-cards .problem-item{
		width: 47%;
		min-width: 160px;
		margin-bottom: 1em;
	}
}
@media (max-width: 700px){
	.feature-cards{
		flex-direction: column;
		gap: 1.2em;
	}
	.feature-cards .problem-item{
		width: 100%;
		min-width: 0;
	}
}

/* イメージ画像（大きめ） */
.usage-image-large{
	display: block;
	margin: 2.5em auto 2em auto;
	width: 100%;
	max-width: 950px;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 2px 16px rgba(0,0,40,0.09);
}

/* 操作手順カード */
.operation-section .problem-list{
	gap: 2em 1.5em;
}
.operation-section .problem-item{
	width: 18%;
	min-width: 170px;
	max-width: 230px;
	padding: 1em 0.7em 1.2em 0.7em;
}

/* FAQ */
.faq-section{
	background: #f8fbff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,40,0.06);
	padding: 2em 2em;
	margin: 2.5em auto;
}
.faq-section dt{
	margin-top: 1.2em;
	font-weight: bold;
	color: #0055a5;
}
.faq-section dd{
	margin-left: 0;
	margin-bottom: 0.7em;
	color: #222;
}

/* 注意書き */
.note{
	color: #0055a5;
	background: #eaf4fc;
	border-radius: 7px;
	padding: 0.9em 1em;
	margin: 2em 0 0 0;
	text-align: center;
	font-size: 1em;
}

/* レスポンシブ */
@media (max-width: 1100px){
	.main-container{
		max-width: 99vw;
		padding: 1.2em 0.5em;
	}
	.problem-item, .operation-section .problem-item{
		width: 31%;
		min-width: 150px;
	}
	.usage-image-large{
		max-width: 100%;
	}
}
@media (max-width: 900px){
	.problem-item, .operation-section .problem-item{
		width: 47%;
		min-width: 140px;
	}
	.problem-list{
		gap: 1.2em 0;
	}
	.faq-section{
		padding: 1.2em 0.5em;
	}
}
@media (max-width: 700px){
	.problem-list{
		flex-direction: column;
		gap: 1em;
	}
	.problem-item, .operation-section .problem-item{
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
	.usage-image-large{
		max-width: 100%;
	}
	.main-container{
		padding: 0.5em 0.2em;
	}
}

/*Aitoruページ（product-aitoru.html）
---------------------------------------------------------------------------*/

/* 特徴・導入セクション */
.intro-section{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 20px 0;
	margin-bottom: 40px;
}
.intro-text{
	flex: 1 1 400px;
}
.intro-text h3{
	color: #005caf;
	font-size: 1.5rem;
	margin-bottom: 15px;
}
.intro-image{
	flex: 1 1 300px;
	text-align: center;
}
.intro-image img{
	width: 100%;
	max-width: 400px;
	height: auto;
	border-radius: 8px;
}
@media (max-width: 600px){
	.intro-text h3{
		font-size: 1.25rem;
	}
}

/* 管理セクション */
.management-section{
	padding: 60px 0;
	background-color: #fff;
}
.section-title{
	text-align: center;
	color: #005caf;
	font-size: 2rem;
	margin-bottom: 60px;
}
.info-row{
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 60px;
}
.info-row.reverse{
	flex-direction: row-reverse;
}
.info-image{
	flex: 1;
	text-align: center;
}
.info-image img{
	width: 100%;
	max-width: 500px;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.info-text{
	flex: 1;
}
.info-text h3{
	color: #005caf;
	font-size: 1.5rem;
	margin-bottom: 20px;
	border-bottom: 2px solid #005caf;
	padding-bottom: 10px;
	display: inline-block;
}
.info-text p{
	line-height: 1.8;
	color: #333;
}
@media (max-width: 768px){
	.info-row, .info-row.reverse{
		flex-direction: column;
		margin-bottom: 40px;
		gap: 20px;
	}
	.section-title{
		font-size: 1.5rem;
		margin-bottom: 40px;
	}
}

/* Before/After カード */
.features-grid{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
}
.scene-card{
	flex: 1 1 300px;
	max-width: 380px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
}
.comparison-images{
	display: flex;
	height: 140px;
	background: #eee;
}
.img-box{
	flex: 1;
	position: relative;
	overflow: hidden;
}
.img-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.img-box.before img{
	filter: grayscale(100%) contrast(0.8);
}
.img-box span{
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
	z-index: 1;
}
.img-box.after span{
	background: #005caf;
}
.card-content{
	padding: 15px 20px 20px;
	text-align: left;
}
.problem-text{
	font-size: 13px;
	color: #777;
	margin-bottom: 12px;
	border-left: 3px solid #ccc;
	padding-left: 10px;
	line-height: 1.4;
}
.solution-title{
	font-weight: bold;
	color: #005caf;
	font-size: 17px;
	margin-bottom: 8px;
	line-height: 1.3;
}
.solution-desc{
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}
@media (max-width: 600px){
	.scene-card{
		max-width: 100%;
		flex-basis: 100%;
	}
	.comparison-images{
		height: 120px;
	}
}

/* CTAセクション */
.cta-section{
  background-color: #f0f7ff;
  padding: 60px 20px;
  text-align: center;
  border-radius: 12px;
  margin: 60px 0;
}
.cta-section h2{
  color: #005caf;
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.cta-section p{
  color: #555;
  margin-bottom: 30px;
}
.btn{
  display: inline-block;
  padding: 16px 40px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  min-width: 250px;
}
.btn-main{
  background-color: #005caf;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 92, 175, 0.3);
}
.btn-main:hover{
  background-color: #00458a;
  transform: translateY(-2px);
}
.cta-tel{
  margin-top: 30px;
  font-size: 0.9rem;
}
.cta-tel span{
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
}
@media (max-width: 600px) {
  .sp-only{
	display: block;
}
  .cta-section h2{
	font-size: 1.4rem;
}
  .btn{
	width: 100%; box-sizing: border-box;
}
}

/* 利用シーン */
.aitoru-use-cases{
	padding: 80px 20px;
	background-color: #f9fafb;
}
.aitoru-container{
	max-width: 1100px;
	margin: 0 auto;
}
.aitoru-header{
	text-align: center;
	margin-bottom: 60px;
}
.aitoru-header h2{
	font-size: 2.25rem;
	font-weight: 800;
	margin-bottom: 1rem;
}
.aitoru-header p{
	color: #4b5563;
	line-height: 1.6;
	max-width: 700px;
	margin: 0 auto;
}
.aitoru-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}
.aitoru-card{
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #f3f4f6;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}
.aitoru-card:hover{
	transform: translateY(-8px);
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.aitoru-img-box{
	height: 200px;
	position: relative;
	overflow: hidden;
}
.aitoru-img-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.aitoru-card:hover .aitoru-img-box img{
	transform: scale(1.1);
}
.aitoru-badge{
	position: absolute;
	top: 16px;
	left: 16px;
	color: #fff;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.aitoru-body{
	padding: 24px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.aitoru-body h3{
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 12px;
}
.aitoru-body .sub-copy{
	font-weight: 700;
	font-size: 0.875rem;
	margin-bottom: 16px;
}
.aitoru-body .desc{
	font-size: 0.875rem;
	line-height: 1.7;
	color: #4b5563;
	margin-bottom: 24px;
}
.aitoru-footer{
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #f9fafb;
	font-size: 11px;
	color: #9ca3af;
}

/* バリエーションカラー */
.color-shop{ border-left: 4px solid #dc2626; color: #dc2626; padding-left: 10px; }
.bg-shop{ background-color: #dc2626; }
.color-office{ border-left: 4px solid #2563eb; color: #2563eb; padding-left: 10px; }
.bg-office{ background-color: #2563eb; }
.color-comm{ border-left: 4px solid #f97316; color: #f97316; padding-left: 10px; }
.bg-comm{ background-color: #f97316; }
.color-med{ border-left: 4px solid #10b981; color: #10b981; padding-left: 10px; }
.bg-med{ background-color: #10b981; }
.color-store{ border-left: 4px solid #9333ea; color: #9333ea; padding-left: 10px; }
.bg-store{ background-color: #9333ea; }
.color-hotel{ border-left: 4px solid #4f46e5; color: #4f46e5; padding-left: 10px; }
.bg-hotel{ background-color: #4f46e5; }

/* 宿泊施設（ワイド）用 */
.card-wide{
	grid-column: span 2;
}
@media (max-width: 768px){
	.card-wide{
		grid-column: span 1;
	}
	.aitoru-header h2{
		font-size: 1.75rem;
	}
}

/* 画像コンテナ */
.aitoru-image-container{
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.aitoru-image-wrapper{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	line-height: 0;
}
.aitoru-image-wrapper img{
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 768px){
	.aitoru-image-wrapper{
		border-radius: 12px;
	}
}

/* ヒーローエリア */
.aitoru-hero-impact{
	position: relative;
	padding: 60px 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #f3f4f6;
}
.aitoru-hero-container{
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 60px;
}
.aitoru-hero-content{
	flex: 1.2;
}
.aitoru-hero-tag{
	display: inline-block;
	background: #eff6ff;
	color: #2563eb;
	padding: 6px 16px;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 24px;
	border: 1px solid #bfdbfe;
}
.aitoru-main-title{
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 24px;
	letter-spacing: -0.02em;
}
.aitoru-main-title span{
	display: block;
	color: #dc2626;
	font-size: 1.25rem;
	margin-bottom: 12px;
	font-weight: 700;
}
.aitoru-hero-impact p.main-copy{
	font-size: 1.1rem;
	line-height: 1.8;
	color: #4b5563;
	margin-bottom: 40px;
}
.aitoru-benefit-points{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}
.aitoru-benefit-item{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #ffffff;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}
.benefit-alert{ border-left: 6px solid #ef4444; background: #fffafb; }
.benefit-efficiency{ border-left: 6px solid #10b981; background: #f6fdf9; }
.benefit-install{ border-left: 6px solid #3b82f6; background: #f8faff; }
.aitoru-benefit-item:hover{
	transform: translateX(10px);
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}
.aitoru-icon-circle{
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
	font-size: 1.25rem;
	color: #ffffff;
}
.bg-alert{ background-color: #ef4444; }
.bg-efficiency{ background-color: #10b981; }
.bg-install{ background-color: #3b82f6; }
.aitoru-benefit-text b{
	display: block;
	color: #111827;
	margin-bottom: 8px;
	font-size: 1.15rem;
}
.aitoru-benefit-text span{
	font-size: 0.95rem;
	color: #4b5563;
	line-height: 1.6;
	display: block;
}
.aitoru-hero-visual{
	flex: 1;
	position: relative;
}
.aitoru-main-visual-box{
	background: #ffffff;
	padding: 12px;
	border-radius: 20px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	border: 1px solid #f3f4f6;
}
.aitoru-main-visual-box img{
	width: 100%;
	border-radius: 12px;
	display: block;
}
.status-alert{
	position: absolute;
	background: #ffffff;
	color: #2563eb;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	border-left: 4px solid #2563eb;
	bottom: 20px;
	right: -20px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2;
}
@media (max-width: 1024px){
	.aitoru-hero-container{
		flex-direction: column;
		gap: 40px;
	}
	.aitoru-main-title{
		font-size: 2.2rem;
	}
	.status-alert{
		right: 10%;
		bottom: -10px;
	}
}

/* コンセプト動画セクション */
.aitoru-video-section{
	padding: 100px 20px;
	color: #ffffff;
	text-align: center;
}
.aitoru-video-container{
	max-width: 900px;
	margin: 0 auto;
}
.aitoru-video-header{
	margin-bottom: 40px;
}
.aitoru-video-header h2{
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 16px;
	color: #f8fafc;
}
.aitoru-video-header p{
	color: #94a3b8;
	font-size: 1rem;
	line-height: 1.6;
}
.aitoru-video-wrapper{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	background: #000;
}
.aitoru-video-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.aitoru-video-footer{
	margin-top: 32px;
	font-size: 0.9rem;
	color: #64748b;
}
@media (max-width: 768px){
	.aitoru-video-section{
		padding: 60px 15px;
	}
	.aitoru-video-header h2{
		font-size: 1.5rem;
	}
}

/*お知らせページ - 商号変更（2026.05.01.sts.html）
---------------------------------------------------------------------------*/

/* 全体設定 */
.sts-page-wrapper{
	color: #333;
	line-height: 2;
	max-width: 850px;
	margin: 50px auto;
	padding: 60px;
	background-color: #fff;
	border: 1px solid #eee;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ヘッダー */
.sts-header{
	text-align: center;
	margin-bottom: 60px;
}
.sts-header h1{
	font-size: 28px;
	letter-spacing: 0.1em;
	color: #004098;
	display: inline-block;
	position: relative;
	padding-bottom: 15px;
}
.sts-header h1::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background-color: #004098;
}

/* 新商号カード */
.new-name-card{
	background-color: #f8f9fa;
	padding: 40px;
	text-align: center;
	margin: 40px 0;
	border-top: 4px solid #004098;
	border-radius: 0 0 8px 8px;
}
.label-new{
	display: block;
	font-size: 13px;
	color: #888;
	margin-bottom: 10px;
	letter-spacing: 0.2em;
}
.name-ja{
	display: block;
	font-size: 32px;
	font-weight: bold;
	color: #004098;
	margin-bottom: 10px;
}
.name-en{
	display: block;
	font-size: 16px;
	color: #666;
}
.name-sts{
	display: block;
	font-size: 20px;
	font-weight: bold;
	color: #004098;
	margin-top: 15px;
	border-top: 1px solid #ddd;
	display: inline-block;
	padding-top: 5px;
}

/* 変更なしセクション */
.no-change-section{
	text-align: center;
	margin: 50px 0;
	padding: 25px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.no-change-section strong{
	color: #004098;
	font-size: 17px;
}

/* 三和グループセクション */
.group-section{
	background-color: #fcfcfc;
	padding: 40px;
	margin-top: 60px;
	border: 1px solid #eee;
}
.group-section h2{
	font-size: 20px;
	color: #004098;
	margin-top: 0;
	margin-bottom: 20px;
	text-align: center;
}
.group-intro-text{
	font-size: 14px;
	margin-bottom: 30px;
}

/* ロゴ並び */
.group-logos{
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}
.logo-item{
	flex: 1;
	background: #fff;
	padding: 20px;
	border: 1px solid #f0f0f0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.logo-item img{
	max-width: 180px;
	height: auto;
	margin-bottom: 15px;
}
.logo-item span{
	font-size: 13px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}
.logo-item a{
	font-size: 12px;
	color: #004098;
	text-decoration: none;
	word-break: break-all;
}
.logo-item a:hover{
	text-decoration: underline;
}

/* お問い合わせ先 */
.contact-section{
	margin-top: 60px;
}
.contact-section h2{
	font-size: 18px;
	border-left: 4px solid #004098;
	padding-left: 15px;
	margin-bottom: 25px;
}
.contact-grid{
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.contact-item{
	flex: 1;
	font-size: 14px;
	background: #fff;
	padding: 20px;
	border: 1px solid #eee;
}
.contact-item strong{
	display: block;
	margin-bottom: 10px;
	color: #004098;
}
.signature{
	text-align: right;
	margin-top: 60px;
	font-size: 14px;
}

/* 株式譲渡リンクボタン */
.history-link{
	text-align: center;
	margin-top: 20px;
}
.history-link a{
	font-size: 14px;
	color: #004098;
	text-decoration: none;
	font-weight: bold;
}

@media (max-width: 600px){
	.sts-page-wrapper{
		padding: 30px 20px;
	}
	.group-logos, .contact-grid{
		flex-direction: column;
	}
	.name-ja{
		font-size: 24px;
	}
}

/*お知らせページ - 商号変更（2026.05.01.sts.html）
---------------------------------------------------------------------------*/

/* 全体設定 */
.sts-page-wrapper{
	color: #333;
	line-height: 2;
	max-width: 850px;
	margin: 50px auto;
	padding: 60px;
	background-color: #fff;
	border: 1px solid #eee;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ヘッダー */
.sts-header{
	text-align: center;
	margin-bottom: 60px;
}
.sts-header h1{
	font-size: 28px;
	letter-spacing: 0.1em;
	color: #004098;
	display: inline-block;
	position: relative;
	padding-bottom: 15px;
}
.sts-header h1::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background-color: #004098;
}

/* 新商号カード */
.new-name-card{
	background-color: #f8f9fa;
	padding: 40px;
	text-align: center;
	margin: 40px 0;
	border-top: 4px solid #004098;
	border-radius: 0 0 8px 8px;
}
.label-new{
	display: block;
	font-size: 13px;
	color: #888;
	margin-bottom: 10px;
	letter-spacing: 0.2em;
}
.name-ja{
	display: block;
	font-size: 32px;
	font-weight: bold;
	color: #004098;
	margin-bottom: 10px;
}
.name-en{
	display: block;
	font-size: 16px;
	color: #666;
}
.name-sts{
	display: block;
	font-size: 20px;
	font-weight: bold;
	color: #004098;
	margin-top: 15px;
	border-top: 1px solid #ddd;
	display: inline-block;
	padding-top: 5px;
}

/* 変更なしセクション */
.no-change-section{
	text-align: center;
	margin: 50px 0;
	padding: 25px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.no-change-section strong{
	color: #004098;
	font-size: 17px;
}

/* 三和グループセクション */
.group-section{
	background-color: #fcfcfc;
	padding: 40px;
	margin-top: 60px;
	border: 1px solid #eee;
}
.group-section h2{
	font-size: 20px;
	color: #004098;
	margin-top: 0;
	margin-bottom: 20px;
	text-align: center;
}
.group-intro-text{
	font-size: 14px;
	margin-bottom: 30px;
}

/* ロゴ並び */
.group-logos{
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}
.logo-item{
	flex: 1;
	background: #fff;
	padding: 20px;
	border: 1px solid #f0f0f0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.logo-item img{
	max-width: 180px;
	height: auto;
	margin-bottom: 15px;
}
.logo-item span{
	font-size: 13px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}
.logo-item a{
	font-size: 12px;
	color: #004098;
	text-decoration: none;
	word-break: break-all;
}
.logo-item a:hover{
	text-decoration: underline;
}

/* お問い合わせ先 */
.contact-section{
	margin-top: 60px;
}
.contact-section h2{
	font-size: 18px;
	border-left: 4px solid #004098;
	padding-left: 15px;
	margin-bottom: 25px;
}
.contact-grid{
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.contact-item{
	flex: 1;
	font-size: 14px;
	background: #fff;
	padding: 20px;
	border: 1px solid #eee;
}
.contact-item strong{
	display: block;
	margin-bottom: 10px;
	color: #004098;
}
.signature{
	text-align: right;
	margin-top: 60px;
	font-size: 14px;
}

/* 株式譲渡リンクボタン */
.history-link{
	text-align: center;
	margin-top: 20px;
}
.history-link a{
	font-size: 14px;
	color: #004098;
	text-decoration: none;
	font-weight: bold;
}

@media (max-width: 600px){
	.sts-page-wrapper{
		padding: 30px 20px;
	}
	.group-logos, .contact-grid{
		flex-direction: column;
	}
	.name-ja{
		font-size: 24px;
	}
}

/* ===========================
   採用情報
   =========================== */
.recruit-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px;
  margin-bottom: 2em;
}
.recruit-table td{
  text-align: center;
  padding: 12px 6px 18px 6px;
  background: #f8fcff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #eee;
  transition: box-shadow 0.2s;
}
.recruit-table td:hover{
  box-shadow: 0 4px 14px #b8e1ef;
}
.recruit-table img{
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 8px;
}
.recruit-title{
  font-weight: bold;
  font-size: 1.08em;
  color: #009999;
  margin-bottom: 4px;
}
.recruit-caption{
  font-size: 0.96em;
  color: #444;
  min-height: 2.2em;
  margin-bottom: 7px;
}
.btn-banner{
  display: inline-block;
  background: linear-gradient(90deg, #0078D7 0%, #00BFFF 100%);
  color: #fff !important;
  padding: 8px 22px;
  border-radius: 24px;
  font-weight: bold;
  font-size: 0.98em;
  text-decoration: none;
  margin-top: 8px;
  margin-bottom: 2px;
  box-shadow: 0 2px 6px rgba(0,120,215,0.13);
  transition: background 0.3s;
}
.btn-banner:hover{
  background: linear-gradient(90deg, #005ea2 0%, #0080c0 100%);
}
@media (max-width: 900px) {
  .recruit-table, .recruit-table tbody, .recruit-table tr{
    display: block;
    width: 100%;
  }
  .recruit-table tr{
    margin-bottom: 10px;
  }
  .recruit-table td{
    display: block;
    width: 94%;
    margin: 0 auto 18px auto;
    box-sizing: border-box;
  }
}
.recruit-img-float{
  float: right;
  width: 350px;
  max-width: 45vw;
  min-width: 180px;
  margin-left: 22px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px #eee;
}
@media (max-width: 700px) {
  .recruit-img-float{
    float: none;
    display: block;
    margin: 0 auto 14px auto;
    width: 100%;
    max-width: 100%;
  }
}
.faq-section{
  margin-top: 3em;
  padding: 1.5em;
  background: #f0f8ff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #ccc;
  max-width: 100%;
}
.faq-section h2{
  font-size: 1.6em;
  color: #0078d7;
  margin-bottom: 1em;
  border-bottom: 2px solid #00bfff;
  padding-bottom: 0.3em;
}
.faq-section dl dt{
  font-weight: bold;
  margin-top: 1em;
  color: #004a8f;
  cursor: pointer;
}
.faq-section dl dd{
  margin-left: 1em;
  margin-top: 0.3em;
  color: #333;
  line-height: 1.5;
}
.company-section-list{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  margin-bottom: 2.5em;
}
.company-section-item{
  flex: 1 1 340px;
  max-width: 420px;
  background: #f8fcff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 20px 18px 24px 18px;
  text-align: center;
  box-sizing: border-box;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.company-section-item img{
  max-width: 180px;
  height: auto;
  margin-bottom: 12px;
  border-radius: 8px;
}
.company-section-title{
  font-weight: bold;
  font-size: 1.12em;
  color: #009999;
  margin-bottom: 8px;
}
.company-section-desc{
  font-size: 0.98em;
  color: #333;
  min-height: 2.2em;
  margin-bottom: 12px;
}
.btn-banner{
  display: inline-block;
  background: linear-gradient(90deg, #0078D7 0%, #00BFFF 100%);
  color: #fff !important;
  padding: 10px 28px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  margin-top: 8px;
  box-shadow: 0 4px 8px rgba(0,120,215,0.14);
  transition: background 0.3s;
}
.btn-banner:hover{
  background: linear-gradient(90deg, #005ea2 0%, #0080c0 100%);
}
@media (max-width: 900px) {
  .company-section-item { max-width: 95vw; }
  .company-section-list { gap: 16px; }
}
/* ===========================
   福利厚生セクション
   =========================== */

.benefits-section{
  max-width: 960px;
  margin: 60px auto;
  padding: 0 20px;
}

.benefits-title{
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  position: relative;
  padding-bottom: 16px;
}

.benefits-title::after{
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0066cc;
  margin: 12px auto 0;
  border-radius: 2px;
}

.benefits-title-en{
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #0066cc;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.benefits-lead{
  text-align: center;
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 40px;
  line-height: 1.8;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.benefits-category{
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 28px 24px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.benefits-category:hover{
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.08);
  transform: translateY(-2px);
}

.benefits-category-icon{
  font-size: 2rem;
  margin-bottom: 12px;
}

.benefits-category-title{
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0066cc;
}

.benefits-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list li{
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.93rem;
  color: #444;
  line-height: 1.7;
}

.benefits-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #0066cc;
  font-weight: 700;
  font-size: 0.85rem;
}

.benefits-list li:last-child{
  margin-bottom: 0;
}

.benefits-note{
  display: inline-block;
  font-size: 0.8rem;
  color: #888;
  margin-left: 4px;
}

/* ===========================
   レスポンシブ（スマホ対応）
   =========================== */

@media screen and (max-width: 768px) {
  .benefits-section{
    margin: 40px auto;
    padding: 0 16px;
  }

  .benefits-title{
    font-size: 1.5rem;
  }

  .benefits-lead{
    font-size: 0.9rem;
    margin-bottom: 28px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .benefits-category{
    padding: 22px 20px;
  }

  .benefits-category-title{
    font-size: 1rem;
  }

  .benefits-list li{
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 480px) {
  .benefits-category{
    padding: 18px 16px;
    border-radius: 8px;
  }

  .benefits-category-icon{
    font-size: 1.6rem;
  }
}

/*採用・営業職ページ（recruit_eigyo.html）
---------------------------------------------------------------------------*/

/* 共通スタイル */
.recruit-section{
	width: 100%;
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 0 16px;
	font-size: 15px;
	line-height: 1.8;
	color: #333;
}

/* ファーストビュー */
.recruit-hero{
	text-align: center;
	padding: 48px 20px;
	background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
	border-radius: 12px;
	margin-bottom: 48px;
}
.recruit-hero .main-copy{
	font-size: 22px;
	font-weight: 700;
	color: #1a5ca1;
	line-height: 1.6;
	margin-bottom: 20px;
}
.recruit-hero .sub-copy{
	font-size: 15px;
	color: #555;
	line-height: 1.9;
}

/* 数字バッジ */
.recruit-badges{
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 24px 0;
}
.recruit-badges .badge-item{
	background: #fff;
	border: 2px solid #1a5ca1;
	border-radius: 8px;
	padding: 12px 20px;
	text-align: center;
	min-width: 140px;
}
.recruit-badges .badge-item .badge-number{
	font-size: 24px;
	font-weight: 700;
	color: #1a5ca1;
	display: block;
}
.recruit-badges .badge-item .badge-label{
	font-size: 12px;
	color: #666;
	display: block;
	margin-top: 4px;
}

/* 魅力カード */
.appeal-cards{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.appeal-card{
	flex: 1;
	min-width: 260px;
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	border-top: 4px solid #1a5ca1;
}
.appeal-card .card-number{
	font-size: 13px;
	font-weight: 700;
	color: #1a5ca1;
	margin-bottom: 8px;
}
.appeal-card h4{
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin: 0 0 12px 0;
}
.appeal-card p{
	font-size: 14px;
	color: #555;
	margin: 0;
	line-height: 1.8;
}

/* 仕事内容 */
.job-content{
	background: #f8fbff;
	border-radius: 10px;
	padding: 32px;
	margin-bottom: 48px;
}
.job-content ul{
	margin: 12px 0;
	padding-left: 1.2em;
	list-style: disc;
}
.job-content ul li{
	margin-bottom: 8px;
}
.job-content .job-note{
	margin-top: 16px;
	padding: 12px 16px;
	background: #fff;
	border-left: 4px solid #1a5ca1;
	border-radius: 4px;
	font-size: 14px;
	color: #555;
}

/* 仕事の流れ（ステップ） */
.step-list{
	margin-bottom: 48px;
}
.step-item{
	display: flex;
	align-items: flex-start;
	margin-bottom: 24px;
	padding: 20px 24px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.step-number{
	min-width: 48px;
	height: 48px;
	background: #1a5ca1;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	margin-right: 20px;
	flex-shrink: 0;
}
.step-content h4{
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin: 0 0 8px 0;
}
.step-content p{
	font-size: 14px;
	color: #555;
	margin: 0;
	line-height: 1.7;
}

/* 1日の流れ（タイムライン） */
.daily-flow{
	margin-bottom: 48px;
}
.daily-flow-list{
	position: relative;
	padding-left: 32px;
}
.daily-flow-list::before{
	content: '';
	position: absolute;
	left: 10px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	background: linear-gradient(to bottom, #1a5ca1, #64b5f6);
	border-radius: 3px;
}
.daily-flow-item{
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: #f8fbff;
	border-radius: 8px;
	transition: background 0.2s;
}
.daily-flow-item:hover{
	background: #e8f2ff;
}
.daily-flow-item::before{
	content: '';
	position: absolute;
	left: -28px;
	top: 18px;
	width: 12px;
	height: 12px;
	background: #1a5ca1;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #1a5ca1;
}
.daily-flow-time{
	font-weight: 700;
	color: #1a5ca1;
	min-width: 60px;
	font-size: 15px;
}
.daily-flow-content{
	font-size: 15px;
	color: #333;
	line-height: 1.6;
	padding-left: 12px;
}
.daily-flow-note{
	margin-top: 16px;
	padding: 12px 16px;
	background: #fff9e6;
	border-left: 4px solid #ffc107;
	border-radius: 4px;
	font-size: 13px;
	color: #666;
}
.daily-flow-item.lunch{
	background: #fff8e1;
}
.daily-flow-item.lunch::before{
	background: #ffc107;
	box-shadow: 0 0 0 2px #ffc107;
}

/* 募集要項テーブル（営業職用） */
.recruit-section .recruit-table{
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 48px;
}
.recruit-section .recruit-table th,
.recruit-section .recruit-table td{
	padding: 20px 24px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
}
.recruit-section .recruit-table th{
	width: 160px;
	background: #f0f7ff;
	font-weight: 600;
	color: #1a5ca1;
	white-space: nowrap;
	border-radius: 4px 0 0 4px;
}
.recruit-section .recruit-table td{
	background: #fff;
}
.recruit-section .recruit-table td ul{
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}
.recruit-section .recruit-table td ul li{
	margin-bottom: 4px;
}
.recruit-section .recruit-table .highlight{
	display: inline-block;
	background: #fff3cd;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600;
	color: #856404;
}
.recruit-section .recruit-table .badge{
	display: inline-block;
	background: #1a5ca1;
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 13px;
	margin-right: 6px;
}

/* 求める人物像 */
.persona-section{
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.persona-box{
	flex: 1;
	min-width: 250px;
	padding: 20px 24px;
	border-radius: 8px;
}
.persona-box.welcome{
	background: #e8f5e9;
	border-left: 4px solid #4caf50;
}
.persona-box.not-fit{
	background: #fce4ec;
	border-left: 4px solid #e57373;
}
.persona-box h4{
	margin: 0 0 12px 0;
	font-size: 15px;
	font-weight: 600;
}
.persona-box ul{
	margin: 0;
	padding-left: 1.2em;
}
.persona-box ul li{
	margin-bottom: 8px;
}

/* 研修フロー */
.training-flow{
	margin-bottom: 48px;
}
.training-step{
	display: flex;
	align-items: flex-start;
	margin-bottom: 16px;
	padding: 16px 20px;
	background: #f8fbff;
	border-radius: 8px;
	border-left: 4px solid #64b5f6;
}
.training-period{
	min-width: 100px;
	font-weight: 700;
	color: #1a5ca1;
	font-size: 14px;
}
.training-detail{
	font-size: 14px;
	color: #444;
	line-height: 1.7;
}

/* CTA */
.recruit-cta{
	text-align: center;
	padding: 40px 20px;
	background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
	border-radius: 12px;
	margin-bottom: 48px;
}
.recruit-cta p{
	font-size: 15px;
	color: #444;
	line-height: 1.8;
	margin-bottom: 24px;
}
.recruit-cta .cta-button{
	display: inline-block;
	background: #1a5ca1;
	color: #fff;
	padding: 16px 40px;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.3s;
}
.recruit-cta .cta-button:hover{
	background: #15497d;
}

/* スマホ対応 */
@media screen and (max-width: 768px){
	.recruit-hero .main-copy{
		font-size: 18px;
	}
	.recruit-badges{
		flex-direction: column;
		align-items: center;
	}
	.recruit-badges .badge-item{
		width: 80%;
	}
	.appeal-cards{
		flex-direction: column;
	}
	.step-item{
		flex-direction: column;
	}
	.step-number{
		margin-bottom: 12px;
		margin-right: 0;
	}
	.daily-flow-list{
		padding-left: 24px;
	}
	.daily-flow-item{
		flex-direction: column;
	}
	.daily-flow-item::before{
		left: -20px;
		top: 14px;
		width: 10px;
		height: 10px;
	}
	.daily-flow-content{
		padding-left: 0;
		margin-top: 4px;
	}
	.recruit-section .recruit-table,
	.recruit-section .recruit-table tbody,
	.recruit-section .recruit-table tr,
	.recruit-section .recruit-table th,
	.recruit-section .recruit-table td{
		display: block;
		width: 100%;
	}
	.recruit-section .recruit-table th{
		padding: 12px 16px 4px;
		border-bottom: none;
		border-radius: 4px 4px 0 0;
	}
	.recruit-section .recruit-table td{
		padding: 8px 16px 20px;
		border-bottom: 1px solid #e0e0e0;
	}
	.persona-section{
		flex-direction: column;
	}
	.training-step{
		flex-direction: column;
	}
	.training-period{
		margin-bottom: 8px;
	}
	.job-content{
		padding: 20px 16px;
	}
}

/*株式譲渡のお知らせページ（/2026.02.26.sanwa.html）
---------------------------------------------------------------------------*/
/* 全体の枠組み */
.notice-container{
  max-width: 800px;
  margin: 0 auto;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
  line-height: 1.8; 
}

/* タイトル */
.notice-title{
  font-size: 24px;
  color: #003366;
  text-align: center;
  border-bottom: 2px solid #003366;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

/* 本文の段落 */
.notice-body p{
  margin-bottom: 1.5em;
}

/* 強調ボックス（業務継続の安心感） */
.highlight-box{
  background-color: #f0f7ff; 
  border-left: 4px solid #0055a4;
  padding: 15px 20px;
  margin: 30px 0;
}
.highlight-box p{
  margin: 0;
  color: #003366;
}

/* 日付と署名（右寄せ） */
.notice-date{
  text-align: right;
  margin-top: 40px;
  margin-bottom: 50px;
}

/* 情報セクション（役員・会社概要）の枠 */
.info-section{
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 8px; 
}

/* 見出し */
.info-heading{
  font-size: 18px;
  color: #003366;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 10px;
}

/* 役員リストの整列 */
.info-list{
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}
.info-list li{
  display: flex;
  margin-bottom: 8px;
}
.info-list li span{
  width: 150px; /* 役職名の幅を揃える */
  font-weight: bold;
}

/* 会社概要の整列 */
.info-dl{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.info-dl dt{
  width: 25%;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.info-dl dd{
  width: 75%;
  margin: 0;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
/*後付けオートロックページ（retrofit-autolock.html）
---------------------------------------------------------------------------*/

/* 画像とキャプション */
.autolock-img-wrap{
	text-align: center;
	margin: 1.5em 0 0.5em 0;
}

.autolock-img-wrap img{
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.autolock-caption{
	display: block;
	text-align: right;
	color: #ff3333;
	font-size: 0.95em;
	margin-top: 0.2em;
}

/* タイトル */
.autolock-title{
	font-size: 1.2em;
	color: #222;
	margin: 1.5em 0 1em 0;
}

/* テーブル */
.autolock-table-wrap{
	overflow-x: auto;
	margin-bottom: 1.5em;
}

.autolock-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 340px;
	font-size: 1em;
	background: #fff;
}

.autolock-table th,
.autolock-table td{
	border: 1px solid #ddd;
	padding: 0.9em 0.7em;
	text-align: left;
}

.autolock-table th{
	background: #f5f5f5;
	font-weight: bold;
	color: #333;
}

.autolock-table tr:nth-child(even){
	background: #fafbfc;
}

/* 特長セクション（Flex横並び） */
.autolock-feature-flex{
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	align-items: flex-start;
	margin-bottom: 1.5em;
}

.autolock-feature-list{
	flex: 2 1 320px;
	display: flex;
	flex-direction: column;
	gap: 1.3em;
}

.autolock-feature-item{
	display: flex;
	align-items: flex-start;
	gap: 1em;
}

.autolock-icon{
	width: 50px;
	height: 60px;
	flex-shrink: 0;
	margin-top: 0.3em;
}

.autolock-feature-heading{
	font-size: 1.1em;
	font-weight: bold;
	color: #0066cc;
	margin-bottom: 0.2em;
	display: inline-block;
}

.autolock-feature-image{
	flex: 1 1 260px;
	min-width: 200px;
	text-align: center;
}

.autolock-feature-image img{
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 商品カードセクション */
.autolock-products{
	padding: 1.2em 0.7em;
	background: #fafbfc;
}

.autolock-section-title{
	font-size: 1.2em;
	color: #0055a5;
	text-align: center;
	margin-bottom: 1.5em;
	font-weight: bold;
}

.autolock-card{
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	margin-bottom: 1.5em;
	padding: 1.2em 1em;
}

.autolock-card-title{
	font-size: 1.08em;
	color: #0066cc;
	margin-bottom: 0.7em;
	font-weight: bold;
}

.autolock-card .autolock-feature-list{
	list-style: disc inside;
	margin-bottom: 0.7em;
	color: #222;
	line-height: 1.7;
	flex: none;
	display: block;
	gap: 0;
}

.autolock-card .autolock-feature-list li{
	margin-bottom: 0.3em;
}

.autolock-recommend{
	background: #eaf4ff;
	color: #0055a5;
	padding: 0.5em 0.8em;
	border-radius: 6px;
	font-size: 0.98em;
	margin-top: 0.5em;
}

/* インフォボックス */
.autolock-info{
	background: #f4f8fb;
	border-left: 4px solid #0099cc;
	border-radius: 8px;
	padding: 1em 0.9em;
	margin-top: 2em;
}

.autolock-info h4{
	font-size: 1em;
	color: #0099cc;
	margin-bottom: 0.4em;
	font-weight: bold;
}

.autolock-info ul{
	margin-bottom: 0.7em;
	padding-left: 1.1em;
}

.autolock-info li{
	margin-bottom: 0.3em;
	line-height: 1.6;
}

.autolock-summary{
	color: #333;
	font-size: 1em;
	margin-top: 0.7em;
	line-height: 1.7;
}

/* ダウンロードボタン */
.download-btn{
	display: inline-block;
	background: #ffe5e5;
	color: #d10000;
	padding: 0.6em 1.4em;
	border-radius: 0.4em;
	font-size: 1.15em;
	font-weight: bold;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	margin: 0.5em 0;
}

.download-btn:hover,
.download-btn:focus{
	background: #d10000;
	color: #fff;
}

/* FAQセクション */
.faq-section{
	margin-top: 3em;
	padding: 1.5em;
	background: #f0f8ff;
	border-radius: 12px;
	box-shadow: 0 2px 8px #ccc;
	max-width: 100%;
}

.faq-section h2{
	font-size: 1.6em;
	color: #0078d7;
	margin-bottom: 1em;
	border-bottom: 2px solid #00bfff;
	padding-bottom: 0.3em;
}

.faq-section dl dt{
	font-weight: bold;
	margin-top: 1em;
	color: #004a8f;
	cursor: pointer;
}

.faq-section dl dd{
	margin-left: 1em;
	margin-top: 0.3em;
	color: #333;
	line-height: 1.5;
}

/* レスポンシブ */
@media (max-width: 700px){
	.autolock-feature-flex{
		flex-direction: column;
		gap: 1.2em;
	}

	.autolock-feature-image{
		margin-top: 1em;
		min-width: 0;
	}
}

@media (max-width: 600px){
	.autolock-table th,
	.autolock-table td{
		font-size: 0.98em;
		padding: 0.7em 0.5em;
	}

	.autolock-title{
		font-size: 1.08em;
	}

	.autolock-products{
		padding: 0.8em 0.1em;
	}

	.autolock-card{
		padding: 1em 0.5em;
	}

	.autolock-section-title{
		font-size: 1em;
	}

	.autolock-card-title{
		font-size: 1em;
	}

	.autolock-recommend,
	.autolock-summary{
		font-size: 0.97em;
	}
}
/* トビラフォンページ（product_tobilaphone.html）
---------------------------------------------------------------------------*/

/* 特徴セクション */
.feature-section{
	max-width: 1000px;
	margin: 40px auto;
	padding: 20px;
	color: #333;
}

.section-title{
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 40px;
	color: #004488;
	border-bottom: 2px solid #004488;
	display: inline-block;
	padding-bottom: 10px;
	width: 100%;
}

.feature-container{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}

.feature-card{
	flex: 1;
	min-width: 280px;
	background: #f9f9f9;
	border-top: 4px solid #004488;
	padding: 25px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feature-number{
	font-size: 1.2rem;
	font-weight: bold;
	color: #004488;
	margin-bottom: 10px;
	display: block;
}

.feature-card h4{
	font-size: 1.15rem;
	font-weight: bold;
	margin: 0 0 15px 0;
	line-height: 1.4;
	color: #333;
}

.feature-text{
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

/* イントロ（画像＋テキスト横並び） */
.intro-container{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 30px;
	margin: 40px auto;
	max-width: 1000px;
	line-height: 1.8;
}

.intro-container .intro-text{
	flex: 1;
}

.intro-container .intro-image{
	flex-shrink: 0;
	width: 320px;
	height: auto;
	border-radius: 8px;
}

.highlight-text{
	font-size: 125%;
	font-weight: bold;
	color: #004488;
	display: block;
	margin-bottom: 15px;
}

/* デモボタン */
.demo-button-container{
	text-align: center;
	margin: 40px auto;
	padding: 20px;
}

.demo-button{
	display: inline-block;
	background: linear-gradient(135deg, #0055aa 0%, #003377 100%);
	color: #ffffff !important;
	text-decoration: none !important;
	font-size: 1.25rem;
	font-weight: bold;
	padding: 20px 45px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.demo-button:hover{
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
	color: #ffffff !important;
}

.demo-sub-text{
	display: block;
	font-size: 0.9rem;
	margin-bottom: 8px;
	color: #444;
	font-weight: normal;
}

/* 仕様テーブル */
.spec-section{
	max-width: 900px;
	margin: 40px auto;
	color: #333;
	line-height: 1.6;
}

.spec-title{
	font-size: 1.2rem;
	border-left: 5px solid #004488;
	padding: 5px 15px;
	margin-bottom: 15px;
	color: #004488;
}

.spec-table{
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;
	font-size: 0.95rem;
}

.spec-table th,
.spec-table td{
	border: 1px solid #ccc;
	padding: 12px;
}

.spec-table th{
	background-color: #f2f6fa;
	width: 30%;
	text-align: center;
	font-weight: bold;
}

.browser-table td{
	text-align: center;
	background-color: #fff;
}

.note-box{
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 30px;
}

/* 対応回線リスト */
.carrier-list{
	background-color: #fff;
	border: 1px solid #004488;
	padding: 25px;
	border-radius: 8px;
}

.carrier-item{
	margin-bottom: 20px;
}

.carrier-name{
	color: #004488;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.carrier-detail{
	font-size: 0.85rem;
	padding-left: 1.2em;
	text-indent: -1.2em;
}

/* 挨拶セクション */
.closing-section{
	max-width: 900px;
	margin: 60px auto;
	text-align: center;
	padding: 40px 20px;
	background-color: #f0f5fa;
	border-radius: 15px;
}

.closing-message{
	font-size: 1.3rem;
	color: #004488;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 30px;
}

.closing-lead{
	font-size: 1.1rem;
	margin-bottom: 40px;
	color: #333;
	text-align: left;
	display: inline-block;
}

.support-badge{
	display: inline-block;
	background: #fff;
	border: 2px solid #004488;
	color: #004488;
	padding: 10px 20px;
	font-weight: bold;
	border-radius: 5px;
	margin-bottom: 30px;
}

/* レスポンシブ */
@media (max-width: 768px){
	.feature-container{
		flex-direction: column;
	}

	.intro-container{
		flex-direction: column-reverse;
		gap: 20px;
	}

	.intro-container .intro-image{
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}

	.intro-container .intro-text{
		width: 100%;
	}

	.demo-button{
		width: 90%;
		font-size: 1.1rem;
		padding: 15px 20px;
	}
}

@media (max-width: 600px){
	.spec-table th,
	.spec-table td{
		display: block;
		width: 100% !important;
		text-align: left;
	}

	.spec-table th{
		background-color: #e1eaf2;
	}
}

/*オートロックページ（ip-interphone.html）
---------------------------------------------------------------------------*/

.case-list{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  margin: 2em auto;
  max-width: 1200px;
}
.case-card{
  flex: 1 1 280px;
  max-width: 320px;
  background: #f8fcff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.case-card img{
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}
.case-card h5{
  font-size: 1.05em;
  margin: 4px 0 6px;
  color: #009999;
}
.case-card .tags{
  font-size: 0.85em;
  color: #666;
  margin: 0 0 6px 0;
}
.case-card .desc{
  font-size: 0.92em;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .case-list { flex-direction: column; align-items: center; }
  .case-card { max-width: 94vw; }
}

/* --- 共通レイアウト設定（他のページに足りない可能性があるもの） --- */
.product-list{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin: 2em 0;
}

.product-card{
  background: #f8fcff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}

.rank-number{
  font-weight: bold;
  color: #0078D7;
}

/* --- 今回の「4x2スリム工程」専用の微調整 --- */
.step-card{
  flex: 1 1 200px;
  max-width: 220px;
  padding: 15px 10px;
  min-height: auto;
  margin: 0 auto;
}

.step-card img{
  max-width: 100%;
  height: auto;
}

/* モバイル対応：画面が狭いときはカードの最大幅を解除して横にいっぱい広げる */
@media (max-width: 600px) {
  .step-card{
    flex: 1 1 45%; /* スマホで2列、または1列にする調整 */
    max-width: 95%;
  }
}
/* --- ihub 特徴 --- */
  /* コンテナ */
  .features{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding: 16px;
  }

  /* 各特長ボックス */
  .feature-item{
    flex: 1 1 280px; /* 最小280px、伸縮する */
    max-width: 340px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  /* アイコン画像 */
  .feature-icon{
    width: 220px;
    height: 150px;
    margin-bottom: 16px;
  }

  /* タイトル */
  .feature-title{
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
    color: #222;
  }

  /* 説明文 */
  .feature-desc{
    font-size: 14px;
    line-height: 1.5;
    color: #555;
  }

  /* モバイル対応：画面幅600px以下は1列 */
  @media (max-width: 600px) {
    .features{
      gap: 16px;
      padding: 12px;
    }
    .feature-item{
      max-width: 100%;
      flex-basis: 100%;
      padding: 16px;
    }
  }
#HPB_TABLE_1_A_250812105455 th,#HPB_TABLE_1_A_250812105455 td{
	padding-top : 2px; padding-left : 2px; padding-right : 2px; padding-bottom : 2px;
}
/* --- ihub 特徴 END --- */


  /* Akuvoxリスト */

  /* コンテナ全体 */
  .akuvox-list{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 1.5em;
  }
  /* 各カード */
  .akuvox-card{
    flex: 1 1 300px;
    max-width: 320px;
    background: #f8fcff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 16px;
    text-align: center;
  }
  .akuvox-card img.product-img{
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .akuvox-card h4{
    color: #009999;
    margin: 12px 0 6px;
    font-size: 1.1rem;
  }
  .akuvox-card p{
    margin: 6px 0 12px;
    font-size: 0.95rem;
    color: #333;
  }
  /* 詳しくはこちらボタン */
  .btn-banner{
    display: inline-block;
    background: linear-gradient(90deg, #0078D7 0%, #00BFFF 100%);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,120,215,0.3);
  }
  .btn-banner:hover{
    background: linear-gradient(90deg, #005ea2 0%, #0080c0 100%);
  }
  /* 親リンクの余白調整 */
  .akuvox-list-section{
    max-width: 1080px;
    margin: 0 auto 3em;
    padding: 0 16px;
  }

  .akuvox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    margin-top: 1.5em;
  }
  .akuvox-card {
    flex: 1 1 300px;
    max-width: 320px;
    background: #f8fcff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 16px;
    text-align: center;
  }
  /* 画像のサイズをカード幅に合わせて自動調整 */
  .akuvox-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
  }
  .akuvox-card h4 { color: #009999; margin: 12px 0 6px; }
  .akuvox-card p { font-size: 14px; text-align: left; color: #333; }
  .btn-banner {
    display: inline-block;
    background: linear-gradient(90deg, #0078D7 0%, #00BFFF 100%);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
  }
｝

/* --- トビラフォンBiz --- */
  /* 共通設定 */
  .feature-section{
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
  }
  .section-title{
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #004488; /* 誠実な青色 */
    border-bottom: 2px solid #004488;
    display: inline-block;
    padding-bottom: 10px;
    width: 100%;
  }
  .feature-container{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
  }
  /* 各カードの設定 */
  .feature-card{
    flex: 1;
    min-width: 280px;
    background: #f9f9f9;
    border-top: 4px solid #004488;
    padding: 25px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  .feature-number{
    font-size: 1.2rem;
    font-weight: bold;
    color: #004488;
    margin-bottom: 10px;
    display: block;
  }
  .feature-card h4{
    font-size: 1.15rem;
    font-weight: bold;
    margin: 0 0 15px 0;
    line-height: 1.4;
    color: #333;
  }
  .feature-text{
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
  }
  /* スマホ対応 */
  @media (max-width: 768px) {
    .feature-container {
      flex-direction: column;
    }
  }
  /* END 特徴 */

/* 画像 */
  .intro-container{
    display: flex;
    flex-direction: row; /* PCでは横並び */
    align-items: flex-start;
    gap: 30px;
    margin: 40px auto;
    max-width: 1000px;
    line-height: 1.8;
  }

  .intro-text {
    flex: 1; /* テキストを広げる */
  }

  .intro-image{
    flex-shrink: 0;
    width: 320px; /* PCでの画像サイズ */
    height: auto;
    border-radius: 8px; /* 角を少し丸くすると馴染みます */
  }

  .highlight-text{
    font-size: 125%;
    font-weight: bold;
    color: #004488;
    display: block;
    margin-bottom: 15px;
  }

  /* スマホ対応設定 */
  @media (max-width: 768px) {
    .intro-container {
      flex-direction: column-reverse; /* スマホでは「文章が先、画像が後」または「逆」に。ここでは文章を先に読ませるためcolumn-reverse */
      gap: 20px;
    }
    .intro-image{
      width: 100%; /* スマホでは横幅いっぱいに */
      max-width: 400px;
      margin: 0 auto;
    }
    .intro-text{
      width: 100%;
    }
  }
  .demo-button-container{
    text-align: center;
    margin: 40px auto;
    padding: 20px;
  }

  .demo-button{
    display: inline-block;
    background: linear-gradient(135deg, #0055aa 0%, #003377 100%); /* 深みのある青 */
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 20px 45px;
    border-radius: 50px; /* 丸みのあるデザイン */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
  }

  .demo-button:hover{
    transform: translateY(-3px); /* 少し浮き上がる */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
    color: #ffffff !important;
  }

  .demo-sub-text{
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #444;
    font-weight: normal;
  }

  /* スマホでの見栄え調整 */
  @media (max-width: 768px) {
    .demo-button{
      width: 90%;
      font-size: 1.1rem;
      padding: 15px 20px;
    }
  }
/* END画像 */

  /* 仕様 */
  .spec-section{
    max-width: 900px;
    margin: 40px auto;
    font-family: sans-serif;
    color: #333;
    line-height: 1.6;
  }

  .spec-title{
    font-size: 1.2rem;
    border-left: 5px solid #004488;
    padding: 5px 15px;
    margin-bottom: 15px;
    color: #004488;
  }

  /* テーブルの共通デザイン */
  .spec-table{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 0.95rem;
  }

  .spec-table th, .spec-table td{
    border: 1px solid #ccc;
    padding: 12px;
  }

  .spec-table th{
    background-color: #f2f6fa;
    width: 30%;
    text-align: center;
    font-weight: bold;
  }

  /* ブラウザ表の特別調整 */
  .browser-table td{
    text-align: center;
    background-color: #fff;
  }

  /* 注釈のスタイル */
  .note-box{
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 30px;
  }

  /* 対応回線（リスト形式） */
  .carrier-list{
    background-color: #fff;
    border: 1px solid #004488;
    padding: 25px;
    border-radius: 8px;
  }

  .carrier-item{
    margin-bottom: 20px;
  }

  .carrier-name{
    color: #004488;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }

  .carrier-detail{
    font-size: 0.85rem;
    padding-left: 1.2em;
    text-indent: -1.2em;
  }

  /* スマホ対応 */
  @media (max-width: 600px) {
    .spec-table th, .spec-table td{
      display: block;
      width: 100% !important;
      text-align: left;
    }
    .spec-table th{
      background-color: #e1eaf2;
    }
  }
  /* END仕様 */

  /* 挨拶 */
  .closing-section{
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
    padding: 40px 20px;
    background-color: #f0f5fa;
    border-radius: 15px;
  }

  .closing-message{
    font-size: 1.3rem;
    color: #004488;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 30px;
  }

  .closing-lead{
    font-size: 1.1rem;
    margin-bottom: 40px;
    color: #333;
    text-align: left;
    display: inline-block;
  }

  .support-badge{
    display: inline-block;
    background: #fff;
    border: 2px solid #004488;
    color: #004488;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 30px;
  }
}
  /* END挨拶 */



  /* メインビジュアル */
/* CSS */
.hero-container {
  position: relative;  
}
.hero-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
}

.hero-text {
  position: absolute;
  top: 30%;
  left: 5%;
  transform: translateY(-50%);
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* 影を少し強めて可読性を向上 */
}

.hero-title {
  font-size: 3rem;
  margin: 0 0 1rem 0;
  font-weight: bold;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin: 0;
}

/* スマホ用設定 */
@media (max-width: 768px) {
  .hero-text { left: 5%; right: 5%; }
  .hero-title { font-size: 1.8rem; }
  .hero-subtitle { font-size: 0.9rem; }
}
}
  /*  ENDメインビジュアル */



/* 目次全体を囲むコンテナ */
.tableOfContents {
    background-color: #f8f9fa; /* 落ち着いた薄いグレーの背景 */
    border: 1px solid #e9ecef;
    border-radius: 8px; /* 角を少し丸くする */
    padding: 24px;
    margin: 32px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* 「目次」というタイトルのデザイン */
.tableOfContents > div:first-child {
    font-size: 1.15rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0066cc; /* アクセントのボーダーライン */
    display: inline-block;
}

/* 目次のリスト全体（ol） */
.tableOfContents ol {
    margin: 0;
    padding-left: 1.5rem;
    counter-reset: h2-counter; /* H2の自動連番用 */
    list-style: none; /* デフォルトの数字を一旦消す */
}

/* H2リストアイテム */
.tableOfContents .h2_li {
    counter-increment: h2-counter;
    margin-bottom: 12px;
    font-weight: 600;
}

/* H2のカスタム数字（1., 2., 3. ...） */
.tableOfContents .h2_li > a::before {
    content: counter(h2-counter) ". ";
    color: #0066cc;
    margin-right: 4px;
}

/* H3リスト（下層の箇条書き） */
.tableOfContents ul {
    margin: 8px 0 4px 0;
    padding-left: 1.2rem;
    list-style: none; /* デフォルトの点を消す */
}

/* H3リストアイテム */
.tableOfContents .h3_li {
    margin-bottom: 8px;
    font-weight: normal;
    font-size: 0.95rem;
}

/* H3のマーカー（控えめなドットやハイフン） */
.tableOfContents .h3_li > a::before {
    content: "・";
    color: #666666;
    margin-right: 4px;
}

/* リンク共通のデザイン */
.tableOfContents a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* リンクにマウスを乗せたとき */
.tableOfContents a:hover {
    color: #004080;
    text-decoration: underline;
}
/* END目次全体を囲むコンテナ */




/* お客様の声 */
/* 全体のコンテナ */
.customer-reviews-section {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: sans-serif;
}

.section-title {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 30px;
  color: #333;
}

/* グリッドレイアウト（PCでは2カラム、スマホでは1カラム） */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr; /* スマホでは縦並び */
  }
}

/* カードのデザイン */
.review-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  overflow: hidden; /* 画像のはみ出しを防ぐ */
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}

/* 写真エリア */
.review-image-area {
  width: 100%;
  height: 280px; /* 写真の高さを固定しておしゃれに */
  overflow: hidden;
  background: #f0f0f0;
}

.review-image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が歪まないようにトリミング */
  transition: transform 0.3s ease;
}

.review-card:hover .review-image-area img {
  transform: scale(1.03); /* マウスホバーで写真が少し拡大するおしゃれな演出 */
}

/* テキストエリア */
.review-content-area {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ヘッダー（タグと属性） */
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.review-tag {
  background: #eef2f7;
  color: #2c5282;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.review-attribute {
  color: #666;
}

/* 本文 */
.review-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* ENDお客様の声 */