@charset "UTF-8";
:root {
    --display-max-size: 1400px;
    --header-min-height: 80px;
    --header-min-row-height: 40px;
    --header-logo-width: 150px;
    --breadcrumb-min-height: 40px;
    --footer-min-height: 40px;
    --menu-border-color: #8AF58A; /* 濃い緑色 */
    --menu-background-color: #E0F5E0; /* 薄い緑色 */
    --menu-hover-color: #BAF5BA; /* 濃い緑色 */
    --headline-color: var(--menu-border-color); /* 濃い緑色 */
}

body {
    min-height: 100vh;
    height: 100%;
}

/* ヘッダー */
header.container-header {
    width: 100%;
}

header.container-header .container-header-items {
    max-width: var(--display-max-size);
    min-height: var(--header-min-height);
    margin: 0 auto;
    gap: 20px;
    display: flex;
}

header.container-header .container-header-logo {
    width: var(--header-logo-width);
    line-height: var(--header-min-height);
}

header.container-header .container-header-logo a {
    display: block;
}

header.container-header .container-header-logo img.logo-image {
    width: var(--header-logo-width);
    height: auto;
}

header.container-header .container-header-wrapper {
    width: 100%;
}

header.container-header .container-header-top {
    min-height: var(--header-min-row-height);
    line-height: var(--header-min-row-height);
}

header.container-header .container-header-menu {
    min-height: var(--header-min-row-height);
    line-height: var(--header-min-row-height);
    width: 100%;
}

header.container-header .container-header-menu ul {
}

.container-header-menu ul.mod-menu li {
}

.container-header-menu ul.mod-menu li span,
.container-header-menu ul.mod-menu li a {
    font-weight: 700;
    padding: 0 20px;
}

.container-header-menu ul.mod-menu li:hover > span,
.container-header-menu ul.mod-menu li:hover > a {
    color: #bbb;
    font-weight: bold;
}

.container-header-menu ul.mod-menu > li.parent > span:after,
.container-header-menu ul.mod-menu > li.parent > a:after {
    font: var(--fa-font-solid);
    content: '\f078';
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.container-header-menu ul.mod-menu > li.parent > ul {
    display: none;
    position: absolute;
    margin-top: -5px;
    border: 1px solid #8AF58A;
    border-bottom: none;
}

.container-header-menu ul.mod-menu > li.parent:hover > ul {
    display: block !important;
}

.container-header-menu ul.mod-menu > li.parent > ul li {
    background-color: var(--menu-background-color);
    border-bottom: 1px solid var(--menu-border-color);
}

.container-header-menu ul.mod-menu > li.parent > ul li:hover {
    background-color: var(--menu-hover-color);
}


/* パンくず */
nav.container-breadcrumbs {
    background-color: var(--menu-background-color);
}

nav.container-breadcrumbs .container-breadcrumbs-items {
    max-width: var(--display-max-size);
    min-height: var(--breadcrumb-min-height);
    margin: 0 auto;
}

.mod-breadcrumbs {
    margin: 0;
}

.mod-breadcrumbs .icon-location:before {
    content: "\f015";
}

/* コンテンツ */
div.container-main {
    min-height: calc(100vh - var(--header-min-height) - var(--footer-min-height) - var(--breadcrumb-min-height));
}

main {
    margin: 0 auto;
    max-width: var(--display-max-size);
}

/* モジュール */
.mod-list a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
}

/* フッター */
footer.container-footer {
    background: #000;
    /*position: absolute;*/
    /*bottom: 0;*/
    width: 100%;
    color: #e0e0e0;
}

footer.container-footer .container-footer-items {
    max-width: var(--display-max-size);
    min-height: var(--footer-min-height);
    margin: 0 auto;
    gap: 20px;
    display: flex;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    width: 100%;
    background: linear-gradient(transparent 85%, var(--headline-color) 70%);
}

/* 各画面サイズの設定 */
@media (min-width: 576px) {
    /* 詳細は非表示とし、クリックした場合のみ表示に変更 */
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}