@charset "shift-jis";

/*共通*/
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
}

*,*::before,*::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------
ヘッダー
---------------------------------------------------------------- */
#topBar td img {
	display: block;
}

@media screen and (max-width: 768px) {
    #topBar {
        max-width: 100% !important;
        overflow-x: scroll;
    }

    .inc-head-div {
        width: 100% !important;
    }
}

body {
    background-color: #FFFFFF;
    margin: 0;
    color: #333333;
}

/* ================================================================== */

a:link { color: #0000FF; }
a:visited { color: #000080; }
a:active { color: #FF0000; }

/* ================================================================== */
/* トップイメージ */
.top-image-section {
  margin-bottom: 10px;
}

.top-image-section img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* コンテナ */
.container {
  max-width: 960px;
  margin: 0 auto;
}
.container a:has(img) {
    display: inline-block;
}

.container table {
    border-collapse: collapse;
}
.container img {
    max-width: 100%; height: auto;
}

/* メニュー関連 */
.menu-link {
  margin-bottom: 10px;
  text-align: right;
}

.menu-link a {
  font-weight: bold;
}

.menu-link > a {
  color: #FF0000;
  font-size: 18px;
}

/* ================================================================== */

.header-panel {
    padding: 26px 10px;
    text-align: center;
    border: 3px solid rgb(0, 0, 255);
}

/* ================================================================== */

.section {
    margin-bottom: 2em;
}

/* <ul>  ================================================================== */
.update-scroll {
    list-style-type: none;
	width: 100%;
	max-height: 10em;
	overflow-y: auto;
	border: 1px solid #bbb;
	margin: 0 0 1em 0;
    padding: 0;
}

.update-scroll li {
    padding: 2px 0 0;
	margin-top: 0.1em;
	font-size: 9.5pt;
}

.update-scroll a {
	text-decoration: none;
}

.navlist {
    list-style: none;
    padding-inline-start: 0;
}

/* ------------------------------------ */

.navigation-list {
    list-style: none;
    display: flex;
    justify-content: right;
    margin: 4px 0;
    flex-wrap: wrap;
    text-align: center;
}

.navigation-list li {
    padding: 3px 0;
    display: inline-flex;
}

.navigation-list li::before {
    content: "|";
    margin: 0px 8px 0 8px;
}

.navigation-list li:first-child::before {
    margin-left: 0;
}

.navigation-list li:last-child:after {
    content: "|";
    margin: 0px 8px 0 8px;
}

.navigation-list li.image-item:after {
    content: "";
    margin: 0;
}

/* ------------------------------------ */

.news-box {
    margin-top: 1em;
}

/* ------------------------------------ */

.panel {
    margin-top: 2em;
}


/*--------------------------------------*/
.ball-pink {
    color: #F9ACB0;
}

.certification {
    border: 1px solid #bbb;
    margin-left: 15px;
    padding: 2px 5px;
    width: fit-content;
    font-size: 0.9em;
}

.font-s {
    font-size: 0.9em;
}

.flex {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.bold {
    font-weight: bold;
}

/* ================================================================== */
/* 最新情報セクション */
/* ================================================================== */
.news-header {
    display: block;
    background-color: #FFCC66;
    color: #0033CC;
    text-decoration: underline;
    font-weight: bold;
    padding: 4px 0 2px 1em;
}

/* ================================================================== */
/* パネル共通 */
/* ================================================================== */
.panel-header {
    color: #fff;
    font-size: large;
    margin: 0 7px;
}

.panel-header-org {
    color: #fff;
    margin: 0 7px;
    text-align: right;
}

.panel-header-ssl {
    background-color: rgb(6, 91, 149);
}

.panel-header-qs {
    background-color: #15604F;
}

.panel-content {
    border: 2px solid rgb(6, 91, 149);
}

.panel-content-qs {
    border: 2px solid #15604F;
}

.panel-image-box {
    flex: 0 0 247px;
}

.panel-image-border {
    border: 1px solid #000;
}

.panel-image-border img {
    display: block;
}

.panel-right-column {
    flex: 1;
    min-width: 300px;
}

.panel-logo {
    margin: 10px 0;
}

.panel-link-intro {
    color: #999999;
}

.panel-divider {
    border: none;
    border-top: 1px solid #065B95;
    margin: 15px 0;
}

.panel-contact {
    border: 2px solid #065B95;
    margin: 10px 0 0;
}

.panel-contact-qs {
    border: 2px solid #15604F;
    margin: 10px 0 0;
}

.panel-contact-inner {
    padding: 2px 5px;
}

.panel-contact-title {
    color: #0000FF;
}

.panel-contact-logo-box {
    display: flex;
    align-items: center;
    font-size: 0.8em;
}

.panel-contact-logo {
    width: 140px;
}

.panel-download-area {
    border-top: 1px solid #999999;
    padding-top: 10px;
    margin-top: 10px;
}

.panel-download-label {
    background-color: #494949;
    padding: 0 5px;
    color: #FFFFFF;
}

.panel-download-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================================================================== */
/* フッター */
/* ================================================================== */
.footer-main {
    margin-top: 1em;
}

.footer-manufacturer {
    text-align: center;
}

.footer-divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
}

.footer-divider-line {
    flex: 1;
    max-width: calc((100% - 144px) / 2);
}

.footer-divider-text {
    padding: 0 20px;
    color: #0000A0;
    font-size: small;
}

.footer-company-info {
    text-align: center;
    padding-top: 10px;
    line-height: 145%;
}

.footer-company-detail {
    font-size: small;
}

/* ボトムナビゲーション */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 0;
  font-size: 0.9em;
}

.bottom-nav a {
  text-decoration: none;
}

.bottom-nav a:hover {
  text-decoration: underline;
}


@media screen and (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 10px;
  }
  .flex {
    justify-content: center;
  }
  .panel-logo,
  .panel-link {
    text-align: center;
  }
  .certification {
    margin: 0 auto;
  }
}