/*********************************************************************************************************************************
General Setting
@charset （外部スタイルシートの文字コード指定）
@import （外部スタイルシートのインポート）
@media （メディアタイプを指定してスタイルを適用）
@supports（ブラウザがCSSの属性や値をサポートしているかどうかで処理を振り分ける）
@supports(display:flexbox){
//ブラウザがdisplay:flexboxをサポートしている場合
}
@supports not(display:flexbox){
//ブラウザがdisplay:flexboxをサポートしていない場合
}
//他の@規則内にネスト
@supports(display:flexbox){
@media(min-width:500px){
//
}
}
*********************************************************************************************************************************/
@charset "UTF-8";
@import url("css/style_Typography.css");
@import url("css/style_GeneralSetting.css");
/*････････････････････････････････････････････････････････････
カスタムプロパティ：
････････････････････････････････････････････････････････････*/
:root{/*要素をスコープとして定義*/
/*カスタムプロパティ【宣言】････ 【呼び出し】･･･････････････････････････････････････････････････････････････････*/
--DarkBlue_01:#01357a; /*紺色01 color:var(--DarkBlue_01); */
--Cyan_01:#bdd4e0; /*水色01 color:var(--Cyan_01); */
--Green_01:#8cc63f; /*緑01 color:var(--Green_01); */
--Green_02:#1d683f; /*緑02 color:var(--Green_02); */
--Gray_01:#d6d9e0; /*灰色01 color:var(--Gray_01); */
--LineGradation_01:linear-gradient(to right, #92cc99 0%, #d0d651 100%) 2;
/*枠線グラデーション（通常・中途入社）border-image:var(--LineGradation_01); */
--LineGradation_02:linear-gradient(to right, #ff9064 0%, #ffd600 100%) 2;
/*枠線グラデーション（新卒入社） border-image:var(--LineGradation_02); */
--Gradation_01:linear-gradient(90deg, #b7daac, #ebe95c 60%);
/*グラデーション（薄緑 → 黄色） background:var(--Gradation_01); */
--Gradation_02:linear-gradient(90deg, #def0e0 0%, #f1f3ca 100%);
/*グラデーション（明るい緑 → 明るい黄色） background:var(--Gradation_02); */
--Gradation_03:linear-gradient(90deg, #93cc99 0%, #cfd552 100%);
/*グラデーション（緑 → 黄色） background:var(--Gradation_03); */
--BK_Pattern_Tree:url(../images/bk_pattern_tree.png) center top repeat !important;
/*パターン背景（年輪） background:var(--BK_Pattern_Tree); */
}
/*body･･････････････････････････････････････････････････････*/
body{
color:var(--DarkBlue_01);
background-color:white;
}
body,
html{
overflow-x:hidden;
}
/*検証用･････････････････････････････････････････････････････*/
.red{
background-color:rgba(255, 0, 0, 0.3);
}
.green{
background-color:rgba(0, 255, 0, 0.3);
}
.yellow{
background-color:rgba(255, 255, 0, 0.3);
}
/*********************************************************************************************************************************
フレーム（基本）
*********************************************************************************************************************************/
main{
z-index:0;
width:100%;
overflow:hidden;
}
#gNavi>div,
#gBtnPageTop>div,
main>#contents>article,
main>#contents>section,
footer>div{
width:100%;
margin-left:auto;
margin-right:auto;
}
/*基本･･･････････････････････････････････････････････････････*/
#contents{
height:auto;
width:100%;
min-width:1200px;
}
#contents>article,
#contents>section{
display:inline-block;
height:auto;
width:100%;
padding-top:100px; /*sectionに背景色を付ける場合*/
padding-bottom:100px; /*sectionに背景色を付ける場合*/
text-align:center;
text-align-last:center;
}
.baseArea{
display:inline-block;
width:100%;
max-width:1200px;
}
.baseArea>*{
display:inline-block;
width:100%;
}
/*div（第一階層）････････････････････････････････････････････*/
.baseArea>div:not(#wpContents){
}
/*タイトル（英語表記）･･･････････････････････････････････････*/
.baseArea>div:not(#wpContents)>em,
.baseArea>div:not(#wpContents)>h2,
.baseArea>div:not(#wpContents)>h3,
.baseArea>div:not(#wpContents)>h4,
.baseArea>div:not(#wpContents)>p{
position:relative;
z-index:50;
width:100%;
}
/*********************************************************************************************************************************
ヘッダー（グローバルナビ）
*********************************************************************************************************************************/
#gNavi{
z-index:960;
position:fixed;
top:0;
left:0;
height:84px;
width:100%;
pointer-events:none;/*ヘッダー背景は#gShieldクリック時に反応*/
box-sizing:border-box;
}
#gNavi>div{
height:84px;
}
/*カーソル反応範囲･････････････*/
#gNavi>div a,
#gNavi>div p,
.gNaviIcon{
pointer-events:auto;
cursor:pointer;
}
#gNavi>div a:hover,
.gNaviIcon:hover{
opacity:1.0;
}
/*･････････････････････････････*/
#gNavi>div>h1{/*ロゴ*/
float:left;
margin:34px auto auto 25px;
}
#gNavi>div>h1 img{
height:auto;
width:130px;
}
.gNaviIcon{/*アイコン ||| */
position:relative;
z-index:990;
display:none;
height:50px;
width:50px;
margin:17px 25px auto auto;
float:right;
}
#gNaviIconMenu{/*ハンバーガーメニュー ||| */
display:none;
position:absolute;
/*topは「ic/JSobj_gNavi.php」で制御*/
left:0;
height:100vh;
width:100vw;
padding-bottom:20%;
background-color:white;
}
#gNaviIconMenu>li{
height:calc(10vh - 8px);
border-bottom:solid 1px white;
box-sizing:border-box;
float:left;/*Mobile横向き対策*/
overflow:hidden;/*Mobile横向き対策*/
}
#gNaviIconMenu>li:last-of-type{
height:80px;/*上位の li 10個分の余白*/
border:none;
}
#gNaviIconMenu>li>a{
display:table-cell;
height:10vh;
width:100vw;
text-align:center;
text-align-last:center;
vertical-align:middle;
background-color:var(--DarkBlue_01);
}
#gNaviIconMenu>li:last-of-type>a{
background:none;
}
#gNaviIconMenu>li>a>p{
display:inline-block !important;
margin-top:-0.8em;
color:white;
font-size:14px;
line-height:2.2em;
text-align:center;
text-align-last:center;
/*heightとwidthは「ic/JSobj_gNavi.php」で制御*/
}
#gNaviIconMenu>li>a>p>span{
font-size:20px;
font-weight:bold;
}
#gNaviMenu{/*ナビメニュー･････････････*/
width:auto;
max-width:1150px;
margin:30px 25px auto auto;
float:right;
}
#gNaviMenu>li{/*ナビメニュー・ボタン*/
position:relative;
display:inline-block;
float:left;
}
#gNaviMenu>li:nth-of-type(n+2){/*2番目以降*/
margin-left:24px;
}
#gNaviMenu>li>a{
}
#gNaviMenu>li>a>*{/*About Us、私たちについて*/
color:#003a74;
font-size:11px;
line-height:1.6em;
}
#gNaviMenu>li>a:hover >*{
color:#b8ef0a;
}
#gNaviMenu>li>a>p{/*About Us*/
font-weight:bold;
}
#gNaviMenu>li>a>span{/*私たちについて*/
font-size:10px;
}
#gNaviMenu>li.btn_goEntry{/*「ENTRY」ボタン*/
margin-top:10px;
}
#gNaviMenu>li.btn_goEntry>a{
color:#003a74;
font-size:11px;
padding:13px 24px !important;
border-radius:30px;
background:linear-gradient(90deg, #92cc99, #d0d651 100%);
}
/*通常リスト、グリッドエリア（横4列）、スライドエリア（横4列）*/
#gNaviMenu>li>div{
display:inline-block;
position:fixed;
top:84px;
left:0;
pointer-events:auto;/*必須*/
}
/*通常リスト････*/
#gNaviMenu>li>div.gNaviMenu_list{
display:none;
position:absolute;
top:51px;
}
#gNaviMenu>li>div.gNaviMenu_list>ul{
display:inline-block;
height:auto;
width:calc(10.0em + 50px);
max-width:calc(10.0em + 50px);
/*background-color:var(--Cyan_04);*/
}
#gNaviMenu>li>div.gNaviMenu_list>ul>li{
display:inline-block;
}
#gNaviMenu>li>div.gNaviMenu_list>ul>li>a{
display:inline-block;
width:10.0em;
max-width:10.0em;
padding:12px 25px;
color:white;
white-space:nowrap;
/*background-color:var(--Cyan_04);*/
}
#gNaviMenu>li>div.gNaviMenu_list>ul>li>a:hover{
/*background-color:var(--Cyan_03);*/
}
/*「c1、c2、カードリスト、一覧リスト、タブBOX」ボタン（※コンテンツページの表示）････････*/
#gNavi_dumBtn{
position:absolute;
top:8px;
right:14px;
}
#gNavi_dumBtn>li{
display:inline-block;
max-height:1em;
margin-right:-5px;
padding:1px 5px 0 5px;
overflow:hidden;
border:solid 1px rgba(255, 255, 255, 0.5);
/*background-color:rgba(255, 255, 255, 0.15);*/
}
#gNavi_dumBtn>li>a>span{
color:rgba(255, 255, 255, 0.75) !important;
font-size:13px;
}
/*ヘッダーの背景色･･････････････*/
#gNavi_bg{
z-index:940;
position:fixed;
top:0;
left:0;
right:0;
bottom:auto;
margin:auto;
height:84px;
width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/
}
/*ヘッダーカバー（サブメニュー開いた時の本体保護層）･･････････････*/
#gNavi_cover{
display:none;
z-index:930;
position:fixed;
top:0;
left:0;
right:0;
bottom:auto;
margin:auto;
height:100vh;
width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/
}
/*ページトップへボタン･･･････････････････････････････････････*/
#gBtnPageTop{
z-index:910;
position:fixed;
top:auto;
bottom:60px;/*btnPageTop()使用時は、bottom値はbtnPageTop()関数内で設定*/
height:62px;
width:100%;
text-align:center;
text-align-last:center;
pointer-events:none;
}
#gBtnPageTop>div{
position:relative;
display:inline-block;
height:62px;
width:1200px;
}
#gBtnPageTop>div *{
display:inline-block;
}
#gBtnPageTop>div>a{
position:absolute;
top:0;
left:auto;
right:60px;
bottom:auto;
height:62px;
width:62px;
pointer-events:auto;
}
#gBtnPageTop>div>a>img{
height:62px;
width:62px;
object-fit:cover;
object-position:center center;/*上に合わせる場合は「center top」*/
}
/*********************************************************************************************************************************
フッター
*********************************************************************************************************************************/
/*･････････････････････････････････････････････････････････････
#footer-top
･････････････････････････････････････････････････････････････*/
#footer-top{
width:100%;
min-width:1200px;
margin-top:-104px;
padding-top:184px;
text-align:center;
text-align-last:center;
background-color:#eaebef;
}
#footer-top>div{/*.baseArea*/
display:inline-block;
width:900px;
max-width:900px;
}
#footer-top>div *{
display:inline-block;
width:100%;
color:var(--DarkBlue_01);
font-size:14px;
font-weight:bold;
letter-spacing:0;
}
#footer-top>div>div#nav{
}
#footer-top>div>div#nav>a{/*ロゴ*/
height:auto;
width:156px !important;
float:left;
}
#footer-top>div>div#nav>a>img{
height:auto;
}
#footer-top>div>div#nav>nav{/*ナビゲーション*/
height:auto;
width:660px;
float:right;
}
#footer-top>div>div#nav>nav>ul{/*nav01、nav02*/
display:flex; /*フレキシブル・コンテナ*/
flex-direction:row; /*水平方向*/
justify-content:space-between; /*子要素を均等間隔で並べる*/
}
#footer-top>div>div#nav>nav>ul.nav02{/*nav01、nav02*/
width:86%;
margin:34px auto 0 7%;
}
#footer-top>div>div#nav>nav>ul *{
width:auto !important;
}
#footer-top>div>div#nav>nav>ul>li{
float:left;
}
#footer-top>div>div#nav>nav>ul>li>a{
}
#footer-top>div>div#nav>nav>ul>li>a>span{
font-size:10.5px;
}
#footer-top>div#copyright{
width:100%;
max-width:100%;
margin-top:80px;
padding:20px 0;
border-top:solid 1px white;
}
#footer-top>div#copyright>p{
display:inline-block;
width:900px !important;
min-width:900px;
margin-left:calc((100% - 900px)/2);
}
#footer-top>div#copyright>p *{
width:auto !important;
font-size:10.5px;
font-weight:normal;
}
#footer-top>div#copyright>p>a{/*プライバシーポリシー*/
float:left;
}
#footer-top>div#copyright>p>span{/*Copyright (c) 2026 SIGNIFI All Rights Reserved.*/
float:right;
}
/*･････････････････････････････････････････････････････････････
#footer
･････････････････････････････････････････････････････････････*/
#footer{
width:100%;
min-width:1200px;
padding-top:77px;
text-align:center;
text-align-last:center;
background-color:#eaebef;
}
#footer>div{/*.baseArea*/
display:inline-block;
width:900px;
max-width:900px;
}
#footer>div *{
display:inline-block;
width:100%;
color:var(--DarkBlue_01);
font-size:14px;
font-weight:bold;
letter-spacing:0;
}
#footer>div>div#nav{
margin-top:80px;
}
#footer>div>div#nav>a{/*ロゴ*/
height:auto;
width:156px !important;
float:left;
}
#footer>div>div#nav>a>img{
height:auto;
}
#footer>div>div#nav>nav{/*ナビゲーション*/
height:auto;
width:660px;
float:right;
}
#footer>div>div#nav>nav>ul{/*nav01、nav02*/
display:flex; /*フレキシブル・コンテナ*/
flex-direction:row; /*水平方向*/
justify-content:space-between; /*子要素を均等間隔で並べる*/
}
#footer>div>div#nav>nav>ul.nav02{/*nav01、nav02*/
width:86%;
margin:34px auto 0 7%;
}
#footer>div>div#nav>nav>ul *{
width:auto !important;
}
#footer>div>div#nav>nav>ul>li{
float:left;
}
#footer>div>div#nav>nav>ul>li>a{
}
#footer>div>div#nav>nav>ul>li>a>span{
font-size:10.5px;
}
#footer>div#copyright{
width:100%;
max-width:100%;
margin-top:80px;
padding:20px 0;
border-top:solid 1px white;
}
#footer>div#copyright>p{
display:inline-block;
width:900px !important;
min-width:900px;
margin-left:calc((100% - 900px)/2);
}
#footer>div#copyright>p *{
width:auto !important;
font-size:10.5px;
font-weight:normal;
}
#footer>div#copyright>p>a{/*プライバシーポリシー*/
float:left;
}
#footer>div#copyright>p>span{/*Copyright (c) 2026 SIGNIFI All Rights Reserved.*/
float:right;
}
/*********************************************************************************************************************************
部品
*********************************************************************************************************************************/
/*通常ボタン01、フッターの通常ボタン01･･･････････････････････*/
.baseArea p.btn01{/*View More、View All*/
display:inline-block;
margin-top:38px !important;
}
.baseArea p.btn01>a{
display:inline-block;
}
.baseArea p.btn01>a>img{
display:inline-block;
height:62px !important;
width:193px !important;
object-fit:contain;
object-position:center center;/*上に合わせる場合は「center top」*/
}
.baseArea p.btn02{/*View All 2*/
display:inline-block;
margin-top:92px !important;
width:100%;
text-align:center;
text-align-last:center;
}
.baseArea p.btn02>a{
display:inline-block;
}
.baseArea p.btn02>a>img{
display:inline-block;
height:72px !important;
width:570px !important;
object-fit:contain;
object-position:center center;/*上に合わせる場合は「center top」*/
}
/*「 詳しくはこちら > 」ボタン･････････････････････････････････
お知らせ一覧 ＞
･････････････････････････････････････････････････････････････*/
.baseArea p.btn_more01L,
.baseArea p.btn_more01C,
.baseArea p.btn_more01R{/*詳しくはこちら*/
display:inline-block;
width:100%;
}
.baseArea p.btn_more01L{/*左寄せ*/
text-align:left !important;
text-align-last:left !important;
}
.baseArea p.btn_more01C{/*中央寄せ*/
text-align:center !important;
text-align-last:center !important;
}
.baseArea p.btn_more01R{/*右寄せ*/
text-align:right !important;
text-align-last:right !important;
}
.baseArea p.btn_more01L>a,
.baseArea p.btn_more01C>a,
.baseArea p.btn_more01R>a{
display:inline-block;
width:auto !important;
margin-top:34px;
white-space:nowrap;/*改行禁止*/
}
/*********************************************************************************************************************************
ページネーション
*********************************************************************************************************************************/
.pagenation{
padding-top:70px;
}
.pagenation:after,.pagenation ul:after{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.pagenation ul{
margin:0;
}
.pagenation li{
float:left;
list-style:none outside none;
margin-left:3px;/*アイコン間の余白*/
}
.pagenation li:first-child{
margin-left:0;
}
.pagenation li.active,
.pagenation li a{/*アクティブ＆他ページのアイコン（共通）*/
color:#fff;
font-size:1.8rem;
font-weight:bold;
padding:1.3rem 1.6rem;
letter-spacing:0;
line-height:1.0em;
}
.pagenation li.active{/*アクティブ・アイコン*/
background-color:var(--Cyan_02);
cursor:not-allowed;
}
.pagenation li a{/*他ページ・アイコン*/
display:block;
background:none repeat scroll 0 0 #ccc;
text-decoration:none;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
background-color:#c6c6c6;/*非アクティブ*/
}
.pagenation li a:hover{/*他ページ・アイコン（マウスオーバー時）*/
background-color:var(--Cyan_02);
opacity:0.8;
transition-duration:500ms;
transition-property:all;
transition-timing-function:ease;
}
.pagenation li a img{/* ＞など画像の左右余白に差が出た時の対処例 */
}
/*********************************************************************************************************************************
JavaScript版 ドロップダウン・メニュー
*********************************************************************************************************************************/
.js_pullDownBox,
.js_pullDownBox>p,/*タイトル*/
.js_pullDownBox>div,/*リストBOX*/
.js_pullDownBox>div>a{/*リスト*/
display:block;
min-height:3.0rem;
width:300px;
line-height:1.7em;
text-align:left;
text-align-last:left;
pointer-events:auto;
/*box-sizing:border-box;*/ /*フルレスポンシブ時、枠線が削れたり補足なるので× */
cursor:pointer;
}
.js_pullDownBox{
z-index:100;
position:relative;
margin-left:-1px;
}
.js_pullDownBox>p{/*タイトル*/
display:table-cell;
padding:0.25em 0.6em;
vertical-align:middle;
white-space:nowrap;/*改行禁止*/
border:solid 1px #999;
background:white url(images/ico_pullDown.png) right center no-repeat;
}
.js_pullDownBox>div{/*リストBOX*/
display:none;
position:absolute;
width:298px;
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
overflow-x:hidden;
background-color:#ffa;
}
.js_pullDownBox>div>a{/*リスト*/
width:298px;
margin:0 1px;/*枠線の分*/
padding:0.25em 0.6em;
white-space:nowrap;/*改行禁止*/
}
.js_pullDownBox>div>a:hover{
opacity:1;
background-color:#dd6;
}
/******************************************************************
pc・tablet・mobileの切り替え
******************************************************************/
.pc{
display:block;
}
.tablet{
display:none;
}
.mobile{
display:none !important;
}
/*********************************************************************************************************************************
メディアクエリ（ ～1200px以下 ）
*********************************************************************************************************************************/
@media(max-width:1200px){
/**************************************************************************************
ヘッダー（グローバルナビ）
**************************************************************************************/
.gNaviIcon{/*アイコン ||| */
display:block;
}
#gNaviMenu{/*ナビメニュー*/
display:none;
}
}
/*********************************************************************************************************************************
メディアクエリ（ ～500px以下 ）
*********************************************************************************************************************************/
@media(max-width:500px){
/*フレーム（基本）･･･････････････････････････････････････････*/
main{
z-index:0;
width:100%;
overflow:hidden;
}
#gNavi>div,
#gBtnPageTop>div,
main>#contents>article,
main>#contents>section,
footer>div{
width:100%;
margin-left:auto;
margin-right:auto;
}
/*基本･･･････････････････････････････････････････････････････*/
#contents{
height:auto;
width:100%;
min-width:1200px;
min-width:500px;
}
#contents>article,
#contents>section{
display:inline-block;
height:auto;
width:100%;
padding-top:100px; /*sectionに背景色を付ける場合*/
padding-bottom:100px; /*sectionに背景色を付ける場合*/
padding-top:120px; /*sectionに背景色を付ける場合*/
padding-bottom:120px; /*sectionに背景色を付ける場合*/
text-align:center;
text-align-last:center;
}
.baseArea{
display:inline-block;
width:100%;
max-width:1200px;
max-width:500px;
}
.baseArea>*{
display:inline-block;
width:100%;
}
/*div（第一階層）････････････････････････････････････････････*/
.baseArea>div:not(#wpContents){
}
/*タイトル（英語表記）･･･････････････････････････････････････*/
.baseArea>div:not(#wpContents)>em,
.baseArea>div:not(#wpContents)>h2,
.baseArea>div:not(#wpContents)>h3,
.baseArea>div:not(#wpContents)>h4,
.baseArea>div:not(#wpContents)>p{
position:relative;
z-index:50;
width:100%;
}
/*********************************************************************************************************************************
ヘッダー（グローバルナビ）
*********************************************************************************************************************************/
#gNavi{
z-index:960;
position:fixed;
top:0;
left:0;
height:84px;
width:100%;
pointer-events:none;/*ヘッダー背景は#gShieldクリック時に反応*/
box-sizing:border-box;
}
#gNavi>div{
height:84px;
}
/*カーソル反応範囲･････････････*/
#gNavi>div a,
#gNavi>div p,
.gNaviIcon{
pointer-events:auto;
cursor:pointer;
}
#gNavi>div a:hover,
.gNaviIcon:hover{
opacity:1.0;
}
/*･････････････････････････････*/
#gNavi>div>h1{/*ロゴ*/
float:left;
margin:34px auto auto 25px;
margin:20px auto auto 25px;
}
#gNavi>div>h1 img{
height:auto;
width:130px;
width:100px;
}
.gNaviIcon{/*アイコン ||| */
display:none;
display:block;
height:50px;
width:50px;
margin:17px 25px auto auto;
float:right;
}
#gNaviIconMenu{/*ハンバーガーメニュー ||| */
display:none;
position:absolute;
/*topは「ic/JSobj_gNavi.php」で制御*/
left:0;
height:100vh;
width:100vw;
padding-bottom:20%;
background-color:white;
}
#gNaviIconMenu>li{
height:calc(10vh - 8px);
border-bottom:solid 1px white;
box-sizing:border-box;
float:left;/*Mobile横向き対策*/
overflow:hidden;/*Mobile横向き対策*/
}
#gNaviIconMenu>li:last-of-type{
height:80px;/*上位の li 10個分の余白*/
border:none;
}
#gNaviIconMenu>li>a{
display:table-cell;
height:10vh;
width:100vw;
text-align:center;
text-align-last:center;
vertical-align:middle;
background-color:var(--DarkBlue_01);
}
#gNaviIconMenu>li:last-of-type>a{
background:none;
}
#gNaviIconMenu>li>a>p{
display:inline-block !important;
margin-top:-0.8em;
color:white;
font-size:14px;
line-height:2.2em;
text-align:center;
text-align-last:center;
/*heightとwidthは「ic/JSobj_gNavi.php」で制御*/
}
#gNaviIconMenu>li>a>p>span{
font-size:20px;
font-weight:bold;
}
#gNaviMenu{/*ナビメニュー･････････････*/
width:auto;
max-width:1150px;
max-width:450px;
margin:30px 25px auto auto;
float:right;
background-color:rgba(255, 0, 0, 0.3);/*red*/
}
#gNaviMenu>li{/*ナビメニュー・ボタン*/
position:relative;
display:inline-block;
float:left;
}
#gNaviMenu>li:nth-of-type(n+2){/*2番目以降*/
margin-left:24px;
}
#gNaviMenu>li>a{
}
#gNaviMenu>li>a>*{/*About Us、私たちについて*/
color:#003a74;
font-size:11px;
line-height:1.6em;
}
#gNaviMenu>li>a:hover >*{
color:#b8ef0a;
}
#gNaviMenu>li>a>p{/*About Us*/
font-weight:bold;
}
#gNaviMenu>li>a>span{/*私たちについて*/
font-size:10px;
}
#gNaviMenu>li.btn_goEntry{/*「ENTRY」ボタン*/
margin-top:10px;
}
#gNaviMenu>li.btn_goEntry>a{
color:#003a74;
font-size:11px;
padding:13px 24px !important;
border-radius:30px;
background:linear-gradient(90deg, #92cc99, #d0d651 100%);
}
/*通常リスト、グリッドエリア（横4列）、スライドエリア（横4列）*/
#gNaviMenu>li>div{
display:inline-block;
position:fixed;
top:84px;
left:0;
pointer-events:auto;/*必須*/
}
/*通常リスト････*/
#gNaviMenu>li>div.gNaviMenu_list{
display:none;
position:absolute;
top:51px;
}
#gNaviMenu>li>div.gNaviMenu_list>ul{
display:inline-block;
height:auto;
width:calc(10.0em + 50px);
max-width:calc(10.0em + 50px);
/*background-color:var(--Cyan_04);*/
}
#gNaviMenu>li>div.gNaviMenu_list>ul>li{
display:inline-block;
}
#gNaviMenu>li>div.gNaviMenu_list>ul>li>a{
display:inline-block;
width:10.0em;
max-width:10.0em;
padding:12px 25px;
color:white;
white-space:nowrap;
/*background-color:var(--Cyan_04);*/
}
#gNaviMenu>li>div.gNaviMenu_list>ul>li>a:hover{
/*background-color:var(--Cyan_03);*/
}
/*「c1、c2、カードリスト、一覧リスト、タブBOX」ボタン（※コンテンツページの表示）････････*/
#gNavi_dumBtn{
position:absolute;
top:8px;
right:14px;
}
#gNavi_dumBtn>li{
display:inline-block;
max-height:1em;
margin-right:-5px;
padding:1px 5px 0 5px;
overflow:hidden;
border:solid 1px rgba(255, 255, 255, 0.5);
/*background-color:rgba(255, 255, 255, 0.15);*/
}
#gNavi_dumBtn>li>a>span{
color:rgba(255, 255, 255, 0.75) !important;
font-size:13px;
}
/*ヘッダーの背景色･･････････････*/
#gNavi_bg{
z-index:940;
position:fixed;
top:0;
left:0;
right:0;
bottom:auto;
margin:auto;
height:84px;
width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/
}
/*ヘッダーカバー（サブメニュー開いた時の本体保護層）･･････････････*/
#gNavi_cover{
display:none;
z-index:930;
position:fixed;
top:0;
left:0;
right:0;
bottom:auto;
margin:auto;
height:100vh;
width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/
}
/*ページトップへボタン･･･････････････････････････････････････*/
#gBtnPageTop{
z-index:910;
position:fixed;
top:auto;
bottom:60px;/*btnPageTop()使用時は、bottom値はbtnPageTop()関数内で設定*/
height:62px;
width:100%;
text-align:center;
text-align-last:center;
pointer-events:none;
}
#gBtnPageTop>div{
position:relative;
display:inline-block;
height:62px;
width:1200px;
}
#gBtnPageTop>div *{
display:inline-block;
}
#gBtnPageTop>div>a{
position:absolute;
top:0;
left:auto;
right:60px;
bottom:auto;
height:62px;
width:62px;
pointer-events:auto;
}
#gBtnPageTop>div>a>img{
height:62px;
width:62px;
object-fit:cover;
object-position:center center;/*上に合わせる場合は「center top」*/
}
/*********************************************************************************************************************************
フッター
*********************************************************************************************************************************/
/*･････････････････････････････････････････････････････････････
#footer-top
･････････････････････････････････････････････････････････････*/
#footer-top{
width:100%;
min-width:1200px;
min-width:500px;
margin-top:-104px;
padding-top:184px;
text-align:center;
text-align-last:center;
background-color:#eaebef;
}
#footer-top>div{/*.baseArea*/
display:inline-block;
width:900px;
max-width:900px;
width:450px;
max-width:450px;
}
#footer-top>div *{
display:inline-block;
width:100%;
color:var(--DarkBlue_01);
font-size:14px;
font-weight:bold;
letter-spacing:0;
}
#footer-top>div>div#nav{
}
#footer-top>div>div#nav>a{/*ロゴ*/
height:auto;
width:156px !important;
float:left;
}
#footer-top>div>div#nav>a>img{
height:auto;
}
#footer-top>div>div#nav>nav{/*ナビゲーション*/
height:auto;
width:660px;
float:right;
width:400px;
margin-left:25px;
float:left;
}
#footer-top>div>div#nav>nav>ul{/*nav01、nav02*/
display:flex; /*フレキシブル・コンテナ*/
flex-direction:row; /*水平方向*/
justify-content:space-between; /*子要素を均等間隔で並べる*/
display:block;
flex-direction:initial;
justify-content:initial;
margin-top:30px;
}
#footer-top>div>div#nav>nav>ul.nav02{/*nav01、nav02*/
width:86%;
margin:34px auto 0 7%;
width:100%;
margin:0 auto 0 0;
}
#footer-top>div>div#nav>nav>ul *{
width:auto !important;
width:41% !important;
white-space:nowrap;/*改行禁止*/
}
#footer-top>div>div#nav>nav>ul>li{
float:left;
display:inline-block;
margin-top:25px;
background:url(images/line_dots.png) center bottom repeat-x;
}
#footer-top>div>div#nav>nav>ul:first-of-type>li:nth-of-type(2),
#footer-top>div>div#nav>nav>ul:first-of-type>li:nth-of-type(4),
#footer-top>div>div#nav>nav>ul.nav02>li:first-of-type,
#footer-top>div>div#nav>nav>ul.nav02>li:nth-of-type(3),
#footer-top>div>div#nav>nav>ul.nav02>li:nth-of-type(5){/**/
float:right;
}
#footer-top>div>div#nav>nav>ul>li>a{
font-size:11px;
font-weight:normal;
}
#footer-top>div>div#nav>nav>ul>li>a>span{
font-size:10.5px;
font-size:18px;
font-weight:bold;
}
#footer-top>div#copyright{
width:100%;
max-width:100%;
margin-top:80px;
padding:20px 0;
border-top:solid 1px white;
}
#footer-top>div#copyright>p{
display:inline-block;
width:900px !important;
min-width:900px;
margin-left:calc((100% - 900px)/2);
width:450px !important;
min-width:450px;
margin-left:25px;
}
#footer-top>div#copyright>p *{
width:auto !important;
font-size:10.5px;
font-size:13px;
font-weight:normal;
}
#footer-top>div#copyright>p>a{/*プライバシーポリシー*/
float:left;
}
#footer-top>div#copyright>p>span{/*Copyright (c) 2026 SIGNIFI All Rights Reserved.*/
float:right;
}
/*･････････････････････････････････････････････････････････････
#footer
･････････････････････････････････････････････････････････････*/
#footer{
width:100%;
min-width:1200px;
min-width:500px;
padding-top:77px;
text-align:center;
text-align-last:center;
background-color:#eaebef;
}
#footer>div{/*.baseArea*/
display:inline-block;
width:900px;
max-width:900px;
width:450px;
max-width:450px;
}
#footer>div *{
display:inline-block;
width:100%;
color:var(--DarkBlue_01);
font-size:14px;
font-weight:bold;
letter-spacing:0;
}
#footer>div>div#nav{
margin-top:80px;
}
#footer>div>div#nav>a{/*ロゴ*/
height:auto;
width:156px !important;
float:left;
}
#footer>div>div#nav>a>img{
height:auto;
}
#footer>div>div#nav>nav{/*ナビゲーション*/
height:auto;
width:660px;
float:right;
width:400px;
margin-left:25px;
float:left;
}
#footer>div>div#nav>nav>ul{/*nav01、nav02*/
display:flex; /*フレキシブル・コンテナ*/
flex-direction:row; /*水平方向*/
justify-content:space-between; /*子要素を均等間隔で並べる*/
display:block;
flex-direction:initial;
justify-content:initial;
margin-top:30px;
}
#footer>div>div#nav>nav>ul.nav02{/*nav01、nav02*/
width:86%;
margin:34px auto 0 7%;
width:100%;
margin:0 auto 0 0;
}
#footer>div>div#nav>nav>ul *{
width:auto !important;
width:41% !important;
white-space:nowrap;/*改行禁止*/
}
#footer>div>div#nav>nav>ul>li{
float:left;
display:inline-block;
margin-top:25px;
background:url(images/line_dots.png) center bottom repeat-x;
}
#footer>div>div#nav>nav>ul:first-of-type>li:nth-of-type(2),
#footer>div>div#nav>nav>ul:first-of-type>li:nth-of-type(4),
#footer>div>div#nav>nav>ul.nav02>li:first-of-type,
#footer>div>div#nav>nav>ul.nav02>li:nth-of-type(3),
#footer>div>div#nav>nav>ul.nav02>li:nth-of-type(5){/**/
float:right;
}
#footer>div>div#nav>nav>ul>li>a{
font-size:11px;
font-weight:normal;
}
#footer>div>div#nav>nav>ul>li>a>span{
font-size:10.5px;
font-size:18px;
font-weight:bold;
}
#footer>div#copyright{
width:100%;
max-width:100%;
margin-top:80px;
padding:20px 0;
border-top:solid 1px white;
}
#footer>div#copyright>p{
display:inline-block;
width:900px !important;
min-width:900px;
margin-left:calc((100% - 900px)/2);
width:450px !important;
min-width:450px;
margin-left:25px;
}
#footer>div#copyright>p *{
width:auto !important;
font-size:10.5px;
font-size:13px;
font-weight:normal;
}
#footer>div#copyright>p>a{/*プライバシーポリシー*/
float:left;
}
#footer>div#copyright>p>span{/*Copyright (c) 2026 SIGNIFI All Rights Reserved.*/
float:right;
}
/*********************************************************************************************************************************
部品
*********************************************************************************************************************************/
/*通常ボタン01、フッターの通常ボタン01･･･････････････････････*/
.baseArea p.btn01{/*View More、View All*/
display:inline-block;
margin-top:38px !important;
margin-top:60px !important;
}
.baseArea p.btn01>a{
display:inline-block;
}
.baseArea p.btn01>a>img{
display:inline-block;
height:62px !important;
width:193px !important;
object-fit:contain;
object-position:center center;/*上に合わせる場合は「center top」*/
}
.baseArea p.btn02{/*View All 2*/
display:inline-block;
margin-top:92px !important;
margin-top:60px !important;
width:100%;
text-align:center;
text-align-last:center;
}
.baseArea p.btn02>a{
display:inline-block;
}
.baseArea p.btn02>a>img{
display:inline-block;
height:72px !important;
width:570px !important;
height:auto !important;
width:450px !important;
object-fit:contain;
object-position:center center;/*上に合わせる場合は「center top」*/
}
/*「 詳しくはこちら > 」ボタン･････････････････････････････････
お知らせ一覧 ＞
･････････････････････････････････････････････････････････････*/
.baseArea p.btn_more01L,
.baseArea p.btn_more01C,
.baseArea p.btn_more01R{/*詳しくはこちら*/
display:inline-block;
width:100%;
}
.baseArea p.btn_more01L{/*左寄せ*/
text-align:left !important;
text-align-last:left !important;
}
.baseArea p.btn_more01C{/*中央寄せ*/
text-align:center !important;
text-align-last:center !important;
}
.baseArea p.btn_more01R{/*右寄せ*/
text-align:right !important;
text-align-last:right !important;
}
.baseArea p.btn_more01L>a,
.baseArea p.btn_more01C>a,
.baseArea p.btn_more01R>a{
display:inline-block;
width:auto !important;
margin-top:34px;
white-space:nowrap;/*改行禁止*/
}
/*********************************************************************************************************************************
ページネーション
*********************************************************************************************************************************/
.pagenation{
padding-top:70px;
}
.pagenation:after,.pagenation ul:after{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.pagenation ul{
margin:0;
}
.pagenation li{
float:left;
list-style:none outside none;
margin-left:3px;/*アイコン間の余白*/
}
.pagenation li:first-child{
margin-left:0;
}
.pagenation li.active,
.pagenation li a{/*アクティブ＆他ページのアイコン（共通）*/
color:#fff;
font-size:1.8rem;
font-weight:bold;
padding:1.3rem 1.6rem;
letter-spacing:0;
line-height:1.0em;
}
.pagenation li.active{/*アクティブ・アイコン*/
background-color:var(--Cyan_02);
cursor:not-allowed;
}
.pagenation li a{/*他ページ・アイコン*/
display:block;
background:none repeat scroll 0 0 #ccc;
text-decoration:none;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
background-color:#c6c6c6;/*非アクティブ*/
}
.pagenation li a:hover{/*他ページ・アイコン（マウスオーバー時）*/
background-color:var(--Cyan_02);
opacity:0.8;
transition-duration:500ms;
transition-property:all;
transition-timing-function:ease;
}
.pagenation li a img{/* ＞など画像の左右余白に差が出た時の対処例 */
}
/*********************************************************************************************************************************
JavaScript版 ドロップダウン・メニュー
*********************************************************************************************************************************/
.js_pullDownBox,
.js_pullDownBox>p,/*タイトル*/
.js_pullDownBox>div,/*リストBOX*/
.js_pullDownBox>div>a{/*リスト*/
display:block;
min-height:3.0rem;
width:300px;
line-height:1.7em;
text-align:left;
text-align-last:left;
pointer-events:auto;
/*box-sizing:border-box;*/ /*フルレスポンシブ時、枠線が削れたり補足なるので× */
cursor:pointer;
}
.js_pullDownBox{
z-index:100;
position:relative;
margin-left:-1px;
}
.js_pullDownBox>p{/*タイトル*/
display:table-cell;
padding:0.25em 0.6em;
vertical-align:middle;
white-space:nowrap;/*改行禁止*/
border:solid 1px #999;
background:white url(images/ico_pullDown.png) right center no-repeat;
}
.js_pullDownBox>div{/*リストBOX*/
display:none;
position:absolute;
width:298px;
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
overflow-x:hidden;
background-color:#ffa;
}
.js_pullDownBox>div>a{/*リスト*/
width:298px;
margin:0 1px;/*枠線の分*/
padding:0.25em 0.6em;
white-space:nowrap;/*改行禁止*/
}
.js_pullDownBox>div>a:hover{
opacity:1;
background-color:#dd6;
}
/******************************************************************
pc・tablet・mobileの切り替え
******************************************************************/
/*マウスオーバー････････････････*/
a:hover,
.pointer:hover{
opacity:1.0;
}
/*pc・tablet・mobileの切り替え････*/
.pc{
display:none !important;
}
.tablet{
display:none !important;
}
.mobile{
display:block !important;
}
.mobile_none{/*「table td」など、mobileのみ非表示にする場合*/
display:none !important;
}
}