とdivに付けて使う*/
div.bg-cream{
background-color:#F4F1E8 !important;
border:1px solid #d6cfc0;
border-radius:6px;
}
/* フォント */
h1 {
font-size: 20px;
line-height: 1.5;
font-weight: 700;
color:#ffff00;
vertical-align:middle;
}
h1z {
font-size: 20px;
line-height: 1.5;
margin: 0 0 12px;
font-weight: 700;
color:#2F000E;
vertical-align:middle;
}
h2 {
font-size: 16px;
line-height: 1.5;
margin: 24px 0 8px;
font-weight: 700;
vertical-align:middle;
}
h3 {
font-size: 15px;
line-height: 1.5;
margin: 8px 0 8px;
font-weight: 500;
color:#333333;
vertical-align:middle;
}
.h30bw{font-size:30px;vertical-align:middle;font-weight:700;color:#ffffff;}
.h20bw{font-size:20px;vertical-align:middle;font-weight:700;color:#ffffff;}
.h20bb{font-size:20px;vertical-align:middle;font-weight:700;color:#23364d;}
.h18{font-size:18px;vertical-align:middle;}
.h18b{font-size:18px;vertical-align:middle;font-weight:700;}
.h18bz{font-size:18px;vertical-align:middle;font-weight:700;color:#2f000e;}
.h18bb{font-size:18px;vertical-align:middle;font-weight:700;color:#23364d;}
.h16bw{font-size:16px;vertical-align:middle;font-weight:700;color:#ffffff;}
.h16{font-size:16px;vertical-align:middle;}
.h16b{font-size:16px;vertical-align:middle;font-weight:700;}
.h16bb{font-size:16px;color:#2f5597;font-weight:700;}
.h16br{font-size:16px;color:#d90000;vertical-align:middle;font-weight:700;}
.h16bz{font-size:16px;vertical-align:middle;font-weight:700;color:#2f000e;}
.h15{font-size:15px;color:#000;vertical-align:middle;}
.h15b{font-size:15px;vertical-align:middle;font-weight:700;}
.h15bb{font-size:15px;color:#2f5597;font-weight:700;}
.h15r{font-size:15px;color:#d90000;vertical-align:middle;}
.h15rb{font-size:15px;color:#d90000;font-weight:700;}
.h15cb{font-size:15px;color:#4A3F2C;vertical-align:middle;font-weight:700;}
.h15db{font-size:15px;color:#23364D;vertical-align:middle;font-weight:700;}
.h14{font-size:14px;color:#000;vertical-align:middle;}
.h14b{font-size:14px;vertical-align:middle;font-weight:700;}
.h14w{font-size:14px;color:#fff;vertical-align:middle;}
.h14r{font-size:14px;color:#d90000;vertical-align:middle;}
.h14rb{font-size:14px;color:#d90000;vertical-align:middle;font-weight:700;}
.h13{font-size:13px;color:#000;vertical-align:middle;}
.h13b{font-size:13px;color:#000;vertical-align:middle;font-weight:700;}
.h13r{font-size:13px;color:#d90000;}
.h13rb{font-size:13px;color:#d90000;font-weight:700;}
.h12{font-size:12px;vertical-align:middle;}
.h12w{font-size:12px;text-align:start;color:#fff;vertical-align:middle;}
.h12wb{font-size:12px;color:#fff;vertical-align:middle;font-weight:700;}
.h11{font-size:11px;vertical-align:middle;}
.h10{font-size:10px;vertical-align:middle;}
.h10w{font-size:10px;color:#fff;vertical-align:middle;}
.h10wb{font-size:10px;color:#fff;vertical-align:middle;font-weight:700;}
.h9{font-size:9px;vertical-align:middle;}
.h9w{font-size:9px;color:#fff;}
/* リンクの色 使い方→
ふるさと納税 上限額とは何か */
.link-white-bold,
.link-white-bold:visited {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.link-white-bold:hover,
.link-white-bold:focus {
color: #ffffff;
text-decoration: underline;
}
.link-black-normal,
.link-black-normal:visited {
color: #000000;
font-weight: 400;
line-height: 1.3;
text-decoration: none;
}
.link-black-normal:hover,
.link-black-normal:focus {
color: #2f5597;
text-decoration: none;
}
/* 揃え */
.text-start{text-align:left!important;}
.text-end{text-align:right!important;}
.text-center{text-align:center!important;}
/* 余白 */
.m-0{margin:0!important;}
.m-1{margin:.25rem!important;}
.m-2{margin:.5rem!important;}
.m-3{margin:1rem!important;}
.m-4{margin:1.5rem!important;}
.m-5{margin:3rem!important;}
.m-auto{margin:auto!important;}
.mx-0{margin-right:0!important;margin-left:0!important;}
.mx-1{margin-right:.25rem!important;margin-left:.25rem!important;}
.mx-2{margin-right:.5rem!important;margin-left:.5rem!important;}
.mx-3{margin-right:1rem!important;margin-left:1rem!important;}
.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important;}
.mx-5{margin-right:3rem!important;margin-left:3rem!important;}
.mx-auto{margin-right:auto!important;margin-left:auto!important;}
.my-0{margin-top:0!important;margin-bottom:0!important;}
.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important;}
.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important;}
.my-3{margin-top:1rem!important;margin-bottom:1rem!important;}
.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important;}
.my-5{margin-top:3rem!important;margin-bottom:3rem!important;}
.my-auto{margin-top:auto!important;margin-bottom:auto!important;}
.mt-0{margin-top:0!important;}
.mt-1{margin-top:.25rem!important;}
.mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:1rem!important;}
.mt-4{margin-top:1.5rem!important;}
.mt-4n{margin-top:2.5rem!important;}
.mt-5{margin-top:3rem!important;}
.mt-auto{margin-top:auto!important;}
.me-0{margin-right:0!important;}
.me-1{margin-right:.25rem!important;}
.me-2{margin-right:.5rem!important;}
.me-3{margin-right:1rem!important;}
.me-4{margin-right:1.5rem!important;}
.me-5{margin-right:3rem!important;}
.me-auto{margin-right:auto!important;}
.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:.25rem!important;}
.mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;}
.mb-4{margin-bottom:1.5rem!important;}
.mb-5{margin-bottom:3rem!important;}
.mb-auto{margin-bottom:auto!important;}
.ms-0{margin-left:0!important;}
.ms-1{margin-left:.25rem!important;}
.ms-2{margin-left:.5rem!important;}
.ms-3{margin-left:1rem!important;}
.ms-4{margin-left:1.5rem!important;}
.ms-5{margin-left:3rem!important;}
.ms-10{margin-left:6rem!important;}
.ms-20{margin-left:16rem!important;}
.ms-auto{margin-left:auto!important;}
.p-0{padding:0!important;}
.p-1{padding:.25rem!important;}
.p-2{padding:.5rem!important;}
.p-3{padding:1rem!important;}
.p-4{padding:1.5rem!important;}
.p-5{padding:3rem!important;}
.px-0{padding-right:0!important;padding-left:0!important;}
.px-1{padding-right:.25rem!important;padding-left:.25rem!important;}
.px-2{padding-right:.5rem!important;padding-left:.5rem!important;}
.px-3{padding-right:1rem!important;padding-left:1rem!important;}
.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important;}
.px-5{padding-right:3rem!important;padding-left:3rem!important;}
.py-0{padding-top:0!important;padding-bottom:0!important;}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important;}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important;}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important;}
.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}
.py-5{padding-top:3rem!important;padding-bottom:3rem!important;}
.pt-0{padding-top:0!important;}
.pt-1{padding-top:.25rem!important;}
.pt-2{padding-top:.5rem!important;}
.pt-3{padding-top:1rem!important;}
.pt-4{padding-top:1.5rem!important;}
.pt-5{padding-top:3rem!important;}
.pe-0{padding-right:0!important;}
.pe-1{padding-right:.25rem!important;}
.pe-2{padding-right:.5rem!important;}
.pe-3{padding-right:1rem!important;}
.pe-4{padding-right:1.5rem!important;}
.pe-5{padding-right:3rem!important;}
.pb-0{padding-bottom:0!important;}
.pb-1{padding-bottom:.25rem!important;}
.pb-2{padding-bottom:.5rem!important;}
.pb-3{padding-bottom:1rem!important;}
.pb-4{padding-bottom:1.5rem!important;}
.pb-5{padding-bottom:3rem!important;}
.ps-0{padding-left:0!important;}
.ps-1{padding-left:.25rem!important;}
.ps-2{padding-left:.5rem!important;}
.ps-3{padding-left:1rem!important;}
.ps-4{padding-left:1.5rem!important;}
.ps-5{padding-left:3rem!important;}
.ps-10{padding-left:6rem!important;}
.gap-0{gap:0!important;}
.gap-01{gap:.1rem!important;}
.gap-1{gap:.25rem!important;}
.gap-2{gap:.5rem!important;}
.gap-3{gap:1rem!important;}
.gap-4{gap:1.5rem!important;}
.gap-5{gap:3rem!important;}
/* 特徴の見出しbox */
.gap-box{background-color:#e9eff7;height:100%;padding:2px;}
.gap-box2{background-color:#e1e1e1;height:100%;padding:2px;border-radius: 16px;}
/* row gap-1 / gap-2 のとき「外側の余白」を下地に依存せず見せる */
.row.gap-1 .gap-box{box-shadow:0 0 0 4px #fff;}
.row.gap-2 .gap-box{box-shadow:0 0 0 7px #fff;}
/* rowの横並びの間隔を狭くする 使用方法→
*/
.row-box-tight {
margin-left: -4px;
margin-right: -4px;
}
.row-box-tight > [class*="col-"] {
padding-left: 4px;
padding-right: 4px;
}
/* carousel-caption内の「ふるさと名人のページへ」リンクを黒に固定 */
.carousel-caption a,
.carousel-caption a:link,
.carousel-caption a:visited,
.carousel-caption a:hover,
.carousel-caption a:focus{
color: #000 !important;
}
.hero-carousel-full{
width: 100%;
background: #f3f3f3;
}
.hero-carousel-full .carousel,
.hero-carousel-full .carousel-inner,
.hero-carousel-full .carousel-item{
width: 100%;
}
.hero-carousel-full .carousel-item img{
display: block;
width: 100%;
height: auto;
}
/* table-base（外枠:#333 / 内側罫線:#888）*/
table.table-base{
width: 100%;
border-collapse: collapse; /* 罫線を1本にまとめる */
border: 1px solid #333; /* 外枠 */
background: #fff;
}
/* 内側罫線（th/td） */
table.table-base th,
table.table-base td{
border: 1px solid #888; /* 内側 */
padding: 6px 8px; /* 余白は好みで */
vertical-align: middle;
}
/* 背景色青（th/td） */
/* th は見出し扱い：背景色を付ける */
table.table-base th{
background: #DFE7F0 !important;
}
/* 背景色青：2行目見出し（th2） */
/* 使い方
| 中見出し |
中見出し |
*/
table.table-base th.th2{
background: #EDF2F7 !important;
font-weight: 500;/* 少し太い */
}
/* 背景色緑（th/td） */
/* th は見出し扱い：背景色を付ける */
table.table-base th.tg{
background-color: #E6EEEA !important;
font-weight: 500;/* 少し太い */
}
/* 背景色緑：2行目見出し（th2） */
/* 使い方
| 中見出し |
中見出し |
*/
table.table-base th.tg2{
background-color: #F2F4F3 !important;
}
.th-ddd{
background-color:#e7eef8 !important;
--bs-table-bg:#e7eef8 !important;
} /* 薄い青 */
.th-ccc{
background-color:#bfd1ea !important;
--bs-table-bg:#bfd1ea !important;
} /* 濃い青 */
.th-eee{
background-color:#d3e0f2 !important;
--bs-table-bg:#d3e0f2 !important;
} /* 中間の青 */
/* クリーム色 テーブルのどんな指定にも負けない*/
table.table-base th.th-cream,
table.table-base td.th-cream,
table.table th.th-cream,
table.table td.th-cream,
th.th-cream,
td.th-cream{
background-color:#F4F1E8 !important;
--bs-table-bg:#F4F1E8 !important;
--bs-table-accent-bg:#F4F1E8 !important;
}
.bg-ddd{background-color: #e7eef8 !important; } /* 薄い青 */
.bg-ccc{background-color: #bfd1ea !important; } /* 濃い青 */
.bg-eee{background-color: #d3e0f2 !important; } /* 中間の青 */
.bg-cream{
background-color:#F4F1E8 !important;
border:1px solid #d6cfc0;
} /* クリーム色 */
/* 購入申込みのメルアド入力欄の枠線を見えなくするためだけ */
.apply-formbox{
border: 0 !important;
box-shadow: none !important;
}
/* 会計トップ画面用 */
.hero-books {
display: block;
width: 100vw;
margin-left: calc(50% - 50vw);
min-height: 448px;
background-image: url("../images/kaikei/shikkuikabe_hakkiri.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 30px 0;
box-sizing: border-box;
text-decoration: none;
}
.hero-message {
max-width: 1040px;
min-height: 360px;
width: calc(100% - 80px);
margin: 0 auto;
padding: 70px 80px 55px;
background-color: #23384f;
color: #ffffff;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}
.hero-main {
margin: 0;
text-align: right;
font-size: clamp(28px, 4vw, 42px);
font-weight: normal;
line-height:2.5;
letter-spacing: 0.04em;
}
:root {
/* 1段目navbar */
--kaikei-nav-bg: #E7EEF8;
--kaikei-nav-text: #4A3F2C;
--kaikei-nav-hover-text: #23364D;
--kaikei-nav-hover-bg: #bfd1ea;
/* 2段目navbar */
--kaikei-subnav-bg: #bfd1ea;
--kaikei-subnav-text: #3D4F63;
--kaikei-subnav-hover-text: #c00000;
--kaikei-subnav-border: #AFC3DE;
}
/* ==================================================
nav全体
================================================== */
nav.kaikei-navbar {
background-color: var(--kaikei-nav-bg) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
/* ==================================================
鹿谷会計 navbar sticky設定
※ 旧 .navbar-sticky の代わりに kaikei-navbar 専用で管理
================================================== */
nav.kaikei-navbar.navbar-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1080;
width: 100%;
overflow: visible;
transition: box-shadow .18s ease;
background-color: var(--kaikei-nav-bg) !important;
}
nav.kaikei-navbar.navbar-sticky.is-scrolled {
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
/* Bootstrap の container-fluid の左右余白を消す */
nav.kaikei-navbar > .container-fluid {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: flex;
flex-wrap: wrap;
justify-content: center !important;
align-items: stretch;
}
/* ==================================================
スマホ用ブランド
PCでは非表示、スマホでは表示
================================================== */
nav.kaikei-navbar .kaikei-mobile-brand {
display: none !important;
cursor: default;
color: var(--kaikei-nav-text) !important;
font-size: 15px;
white-space: nowrap;
background-color: transparent !important;
}
nav.kaikei-navbar .kaikei-mobile-brand,
nav.kaikei-navbar .kaikei-mobile-brand:link,
nav.kaikei-navbar .kaikei-mobile-brand:visited,
nav.kaikei-navbar .kaikei-mobile-brand:hover,
nav.kaikei-navbar .kaikei-mobile-brand:focus,
nav.kaikei-navbar .kaikei-mobile-brand:active {
color: var(--kaikei-nav-text) !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* ==================================================
折りたたみ領域
================================================== */
nav.kaikei-navbar .navbar-collapse {
justify-content: center !important;
}
nav.kaikei-navbar .kaikei-navbar-collapse {
flex: 0 0 100% !important;
width: 100% !important;
max-width: none !important;
justify-content: center !important;
}
/* 1段目・2段目を縦に並べる箱 */
nav.kaikei-navbar .kaikei-navbar-lines {
width: 100% !important;
max-width: none !important;
display: flex;
flex-direction: column;
align-items: stretch !important;
}
/* ==================================================
1段目 navbar
Home / 販売ソフト / 会社概要 / 代表メッセージ
著書案内 / ログイン / お問合せ
================================================== */
nav.kaikei-navbar .kaikei-main-nav {
width: 100% !important;
display: flex;
justify-content: center !important;
align-items: stretch;
flex-wrap: wrap;
margin: 0 !important;
padding: 0 !important;
background-color: var(--kaikei-nav-bg) !important;
}
/* 1段目 通常時 */
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:link,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:visited {
color: var(--kaikei-nav-text) !important;
background-color: transparent !important;
font-weight: 600;
padding: 8px 12px;
text-decoration: none !important;
}
/* 1段目 hover / focus / active */
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:hover,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:focus,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:active {
color: var(--kaikei-nav-hover-text) !important;
background-color: var(--kaikei-nav-hover-bg) !important;
text-decoration: none !important;
}
/* 1段目 現在ページ */
nav.kaikei-navbar .kaikei-main-nav .nav-item.active-page-dark > .nav-link,
nav.kaikei-navbar .kaikei-main-nav .nav-item.active > .nav-link {
color: var(--kaikei-nav-hover-text) !important;
background-color: var(--kaikei-nav-hover-bg) !important;
text-decoration: none !important;
}
/* 1段目 現在ページをhoverしても色を維持 */
nav.kaikei-navbar .kaikei-main-nav .nav-item.active-page-dark > .nav-link:hover,
nav.kaikei-navbar .kaikei-main-nav .nav-item.active-page-dark > .nav-link:focus,
nav.kaikei-navbar .kaikei-main-nav .nav-item.active > .nav-link:hover,
nav.kaikei-navbar .kaikei-main-nav .nav-item.active > .nav-link:focus {
color: var(--kaikei-nav-hover-text) !important;
background-color: var(--kaikei-nav-hover-bg) !important;
text-decoration: none !important;
}
/* ==================================================
2段目 navbar
ふるさと名人 / 贈与名人 / 開発コンセプト / ソフト購入・デモ
================================================== */
/* 2段目の横幅いっぱいのバー */
nav.kaikei-navbar .kaikei-soft-subnav-bar {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background-color: var(--kaikei-subnav-bg) !important;
display: flex;
justify-content: center !important;
align-items: stretch;
}
/* 2段目のul本体 */
nav.kaikei-navbar .kaikei-soft-subnav {
display: flex;
justify-content: center !important;
align-items: stretch;
flex-wrap: wrap;
margin: 0 !important;
padding: 0 !important;
background-color: transparent !important;
}
/* 2段目 通常時 */
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:link,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:visited {
color: var(--kaikei-subnav-text) !important;
background-color: transparent !important;
font-weight: 600;
padding: 7px 16px;
text-decoration: none !important;
}
/* 2段目 hover：背景は変えず、文字色だけ赤 */
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:hover,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:focus,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:active {
color: var(--kaikei-subnav-hover-text) !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* 2段目 現在ページ */
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active-page-dark > .nav-link,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active > .nav-link {
color: var(--kaikei-subnav-hover-text) !important;
background-color: transparent !important;
font-weight: 700;
text-decoration: none !important;
}
/* 2段目 現在ページのhover */
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active-page-dark > .nav-link:hover,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active-page-dark > .nav-link:focus,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active > .nav-link:hover,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active > .nav-link:focus {
color: var(--kaikei-subnav-hover-text) !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* ==================================================
ハンバーガーボタン
================================================== */
nav.kaikei-navbar .navbar-toggler {
border: 1px solid var(--kaikei-nav-text) !important;
background-color: var(--kaikei-nav-bg) !important;
padding: 4px 8px;
}
nav.kaikei-navbar .navbar-toggler:focus {
box-shadow: 0 0 0 2px rgba(74, 63, 44, 0.25) !important;
}
/* ハンバーガーアイコン */
nav.kaikei-navbar .navbar-toggler-icon {
width: 1.5em;
height: 1.5em;
background-image:
linear-gradient(to bottom, #4A3F2C 0%, #4A3F2C 100%),
linear-gradient(to bottom, #4A3F2C 0%, #4A3F2C 100%),
linear-gradient(to bottom, #4A3F2C 0%, #4A3F2C 100%) !important;
background-size: 100% 2px, 100% 2px, 100% 2px;
background-position: center 4px, center center, center calc(100% - 4px);
background-repeat: no-repeat;
}
/* ==================================================
スマホ表示
Bootstrap lg 未満
================================================== */
@media screen and (max-width: 991.98px) {
/* スマホでは上部の大きいロゴ画像を非表示 */
img[src="images/logo/kaikei_top_ue_4c.jpg"],
img[src="images/logo/top_ue_logo_yokoitiretsu.jpg"] {
display: none !important;
}
nav.kaikei-navbar > .container-fluid {
justify-content: space-between !important;
}
/* スマホでは「丸鹿＋鹿谷総研/鹿谷会計」を表示 */
nav.kaikei-navbar .kaikei-mobile-brand {
display: flex !important;
align-items: center;
color: var(--kaikei-nav-text) !important;
background-color: transparent !important;
padding-left: 10px;
}
/* スマホ展開メニュー全体 */
nav.kaikei-navbar .navbar-collapse {
flex: 0 0 100% !important;
width: 100% !important;
background-color: var(--kaikei-nav-bg) !important;
border-top: 1px solid #e0e0e0;
margin-top: 4px;
}
nav.kaikei-navbar .kaikei-navbar-lines {
width: 100% !important;
align-items: stretch !important;
}
/* スマホ 1段目 */
nav.kaikei-navbar .kaikei-main-nav {
width: 100% !important;
display: block !important;
background-color: var(--kaikei-nav-bg) !important;
}
nav.kaikei-navbar .kaikei-main-nav .nav-item {
display: block !important;
width: 100% !important;
}
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:link,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:visited {
color: var(--kaikei-nav-text) !important;
background-color: transparent !important;
padding: 10px 14px !important;
border-bottom: 1px solid #e0e0e0;
text-decoration: none !important;
}
/* スマホ時：ログイン2行表示は左寄せにする */
nav.kaikei-navbar .kaikei-login-nav-link {
align-items: flex-start !important;
justify-content: center !important;
text-align: left !important;
width: 100% !important;
}
nav.kaikei-navbar .kaikei-login-nav-small,
nav.kaikei-navbar .kaikei-login-nav-main {
width: 100% !important;
text-align: left !important;
}
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:hover,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:focus,
nav.kaikei-navbar .kaikei-main-nav .nav-item .nav-link:active,
nav.kaikei-navbar .kaikei-main-nav .nav-item.active-page-dark > .nav-link,
nav.kaikei-navbar .kaikei-main-nav .nav-item.active > .nav-link {
color: var(--kaikei-nav-hover-text) !important;
background-color: var(--kaikei-nav-hover-bg) !important;
text-decoration: none !important;
}
/* スマホ 2段目 */
nav.kaikei-navbar .kaikei-soft-subnav-bar {
width: 100% !important;
background-color: var(--kaikei-subnav-bg) !important;
border-top: 2px solid var(--kaikei-subnav-border);
margin-top: 4px !important;
}
nav.kaikei-navbar .kaikei-soft-subnav {
width: 100% !important;
display: block !important;
background-color: transparent !important;
}
nav.kaikei-navbar .kaikei-soft-subnav .nav-item {
display: block !important;
width: 100% !important;
}
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:link,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:visited {
color: var(--kaikei-subnav-text) !important;
background-color: transparent !important;
padding: 10px 18px !important;
border-bottom: 1px solid var(--kaikei-subnav-border);
text-decoration: none !important;
}
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:hover,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:focus,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item .nav-link:active {
color: var(--kaikei-subnav-hover-text) !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* スマホ 2段目 現在ページ */
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active-page-dark > .nav-link,
nav.kaikei-navbar .kaikei-soft-subnav .nav-item.active > .nav-link {
color: var(--kaikei-subnav-hover-text) !important;
background-color: transparent !important;
font-weight: 700;
text-decoration: none !important;
}
}
/* ログインだけ2行表示 */
nav.kaikei-navbar .kaikei-login-nav-link {
line-height: 1.1 !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
min-height: 38px;
}
nav.kaikei-navbar .kaikei-login-nav-small {
display: block;
font-size: 9px;
line-height: 1.1;
white-space: nowrap;
}
nav.kaikei-navbar .kaikei-login-nav-main {
display: block;
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
}
/* 〇付き箇条書き */
.maru-list {
list-style: none;
margin: 0;
padding: 0;
}
.maru-list li {
position: relative;
padding-left: 1.5em;
margin-bottom: 0.8em;
line-height: 1.7;
}
.maru-list li::before {
content: "〇";
position: absolute;
left: 0;
top: 0;
color: inherit;
}
/* ==================================================
固定ヘッダー使用ページの余白調整
================================================== */
body.kaikei-page-with-fixed-header {
background-color: #E7EEF8;
padding-top: 132px;
}
/* スマホでは上部ロゴを非表示にし、その分の余白も詰める */
@media screen and (max-width: 991.98px) {
body.kaikei-page-with-fixed-header {
padding-top: 28px !important;
}
.kaikei-top-logo-card {
display: none !important;
}
}
/* ==================================================
スマホ時：soft-top-menu のボタン間の余白を薄い水色にする
================================================== */
@media screen and (max-width: 767.98px) {
.soft-top-menu {
background-color: #E7EEF8 !important;
padding-top: 0;
padding-bottom: 8px;
}
.soft-top-menu > .row,
.soft-top-menu .row {
background-color: #E7EEF8 !important;
}
.soft-top-menu .row > [class*="col-"] {
background-color: #E7EEF8 !important;
}
}
/* ==================================================
ソフト紹介トップ 4つの大きなボタン
PC：画像入りの大きなボタン
スマホ：文字だけのシンプルなボタン
================================================== */
.soft-top-menu {
margin-top: 8px;
margin-bottom: 24px;
background-color: #E7EEF8;
}
.soft-top-menu > .row,
.soft-top-menu .row {
background-color: #E7EEF8;
}
.soft-top-menu .row > [class*="col-"] {
background-color: #E7EEF8;
}
.soft-top-menu .gap-box-link {
display: block;
height: 100%;
color: inherit !important;
text-decoration: none !important;
}
.soft-top-menu .gap-box {
height: 100%;
min-height: 120px;
background-color: #ffffff;
border: 2px solid #d5dce5;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.soft-top-menu .gap-box-link:hover .gap-box,
.soft-top-menu .gap-box-link:focus .gap-box {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
border-color: #9fb8d8;
}
/* 現在表示中ページの gap-box */
.soft-top-menu .gap-box-link.is-current .gap-box,
.soft-top-menu .gap-box-link.is-current:hover .gap-box,
.soft-top-menu .gap-box-link.is-current:focus .gap-box {
border-color: #2f000e;
}
/* タイトル */
.soft-top-menu .gap-box-title {
margin: 0;
padding: 3px 4px 1px 4px;
font-size: 16px;
font-weight: 700;
color: #002060;
line-height: 1.25;
text-align: center;
background-color: transparent;
}
/* 画像：PCでは横幅に合わせ、高さは自然に縮小する */
.soft-top-menu .gap-box-img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto;
margin: 0 auto;
flex: 0 0 auto;
}
/* 説明文を使う場合 */
.soft-top-menu .gap-box-text {
margin: 0;
padding: 6px 10px 10px;
font-size: 13px;
color: #333333;
line-height: 1.5;
text-align: left;
}
/* ==================================================
スマホ時：画像を消して文字だけのボタンにする
================================================== */
@media screen and (max-width: 767.98px) {
.soft-top-menu {
margin-top: 6px;
margin-bottom: 18px;
background-color: #E7EEF8 !important;
padding-top: 0;
padding-bottom: 8px;
}
.soft-top-menu > .row,
.soft-top-menu .row {
background-color: #E7EEF8 !important;
--bs-gutter-x: 0;
--bs-gutter-y: 8px;
}
.soft-top-menu .row > [class*="col-"] {
background-color: #E7EEF8 !important;
}
.soft-top-menu .gap-box {
min-height: 40px;
height: 40px;
border-radius: 5px;
box-shadow: none;
background-color: #ffffff;
border: 2px solid #d5dce5;
display: flex;
align-items: center;
justify-content: center;
}
.soft-top-menu .gap-box-img {
display: none !important;
}
.soft-top-menu .gap-box-text {
display: none !important;
}
.soft-top-menu .gap-box-title {
margin: 0 !important; /* HTML側の mb-2 を打ち消す */
padding: 0 6px;
font-size: 14px;
line-height: 1.3;
font-weight: 700;
color: #23364D;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.soft-top-menu .gap-box-link:hover .gap-box,
.soft-top-menu .gap-box-link:focus .gap-box {
transform: none;
box-shadow: none;
border-color: #9fb8d8;
}
.soft-top-menu .gap-box-link.is-current .gap-box,
.soft-top-menu .gap-box-link.is-current:hover .gap-box,
.soft-top-menu .gap-box-link.is-current:focus .gap-box {
border-color: #2f000e;
}
}