@charset "utf-8";
/* CSS Document */
html {
    position: relative;
    scroll-behavior: smooth;
}
body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    background-color: #EEEEEE;
}
/* PCのみ表示(スマホ非表示)*/
.pc_only {
    display: block;
}
/*    PCのみ表示(スマホ非表示)*/
.sp_only {
    display: none;
}
/*色*/
.col_g {
    color: #6EAA62;
}
/*リンク*/
a {
    color: #B99A00;
    cursor: pointer;
}
a:hover {
    opacity: .7;
}
/*ページ内リンク*/
#ast::before {
    content: '';
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}
#ast p {
    display: inline-block;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    background-color: #CB0101;
    color: #FFF;
}
/*詳しく見る(ボタン)普通サイズ  ---------------*/
.btn_detail,
.btn_detail_g {
    text-align: center;
    margin: 1.6rem 0;
}
.btn_detail a{
    background: #385781;
    padding: 0.6rem 2.4rem;
    color: #FFFFFF;
}
.btn_detail_g a{
    background: #6EAA62;
    padding: 0.6rem 2.4rem;
    color: #FFFFFF;
}
.btn_detail a:hover,
.btn_detail_g a:hover {
    opacity: .8;
    cursor: pointer;
}
/*詳しく見る(ボタン)大サイズ  ---------------*/
.btn_detail_big {
    text-align: center;
    margin: 5rem 0;
}
.btn_detail_big span::before {
    content: "";
    margin-right: 1.2rem;
}
.btn_detail_big a {
    background: #385781;
    padding: 0.8rem 1.8rem;
    /*    border-radius: 30px;*/
    color: #FFFFFF;
    font-size: 1.3rem;
    letter-spacing: 0.12rem;
}
.btn_detail_big a:hover {
    opacity: .8;
    cursor: pointer;
}
/*テーブル01(基本)*/
.tbl01 {
    border-collapse: collapse;
    width: 100%;
}
.tbl01 th, .tbl01 td {
    padding: 16px;
    border: solid 1px #ccc;
    box-sizing: border-box;
    background-color: #FFF;
}
.tbl01 th {
    width: 160px;
    background-color: #E4E2E2;
    font-weight: normal;
    text-align: center;
    vertical-align: middle
}
.tbl01 td {
    width: calc(100% - 160px);
}
/*テーブル02(余白少な目)*/
.tbl02 {
    border-collapse: collapse;
    width: 100%;
}
.tbl02 th, .tbl02 td {
    padding: 10px;
    border: solid 1px #ccc;
    box-sizing: border-box;
    background-color: #FFF;
}
.tbl02 th {
    width: 160px;
    background-color: #E4E2E2;
    font-weight: normal;
    text-align: center;
    vertical-align: middle
}
.tbl02 td {
    width: calc(100% - 160px);
}
/*区切り線のスタイルリセットと点線*/
hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px dotted #ccc;
}
/*テキスト中央寄せ*/
.center {
    text-align: center;
}
/*   左寄せ */
.left {
    text-align: left;
}
/*マージン*/
.m20_0 {
    margin: 20px 0;
}
.mt50 {
    margin-top: 50px;
}
.mb30 {
    margin-bottom: 60px;
}
/* ヘッダートップ ---------------*/
#header .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 66px;
    background: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid #EEE;
    box-shadow: 1px 1px 3px #999;
}
#header .top_left {
    width: 100%;
    /*display: flex;
    justify-content: space-between;*/
    align-items: center;
    padding-left: 20px;
}
#header .top_left img {
    width: 220px;
    height: auto;
}
#header .top_right {
    display: flex;
    justify-content: space-between;
}
#header .top_right .company_name {
    display: flex;
    /*    flex-wrap: wrap;*/
    align-items: center;
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1.3;
}
#header .top_right .company_name li {
    padding: 0 0.8em;
    border-right: 1px solid #888;
}
#header .top_right .company_name li:last-of-type {
    border-right: none;
}
#header .top_right .contact a {
    width: 160px;
    height: 66px;
    display: block;
    text-align: center;
    line-height: 66px;
    background: #2D2D2D;
    color: #FFF;
}
#header .top .contact a:hover {
    opacity: .7;
}
#navigation {
    display: none;
}
#drawer-navigation {
    display: none;
}
/* ナビゲーション(メインメニュー) ---------------*/
/* ナビゲーションメニュー */
.nav-menu {
    position: relative;
    top: 66px;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.925rem;
    background-color: #385781;
    z-index: 90;
}
.menu-list {
    display: flex;
    justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
    position: relative;
    /*padding: 0.75rem 0;*/
}
/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
    opacity: 1; /* 不透明度を最大に */
    transition: opacity .6s, visibility .6s; /* アニメーション設定 */
    visibility: visible; /* 下層メニューを表示 */
}
.menu-item a {
    color: #FFF; /* メニューアイテム内のリンクテキストの色 */
    display: flex;
    align-items: center;
    height: 3rem;
    text-decoration: none; /* リンクの下線を非表示 */
    width: auto;
    padding: 0 1.4rem;
}
.menu-list a:hover {
    background: #EEE;
    opacity: 1;
    color: #2D4F74;
}
/* ドロップダウンメニュー */
.drop-menu {
    position: relative;
}
.drop-menu-list {
    background-color: #2D4F74; /* ドロップダウンメニューの背景色 */
    left: 0;
    opacity: 0; /* 不透明度を最小に */
    position: absolute;
    top: 100%;
    transition: opacity .3s, visibility .3s; /* アニメーション設定 */
    visibility: hidden; /* 下層メニューを非表示 */
    width: max-content;
    z-index: 80;
}
.drop-menu-list a {
    font-size: 0.9rem;
    padding: 0 1.6rem;
    border-top: 1px solid #CCC;
    height: 2.2rem;
}
.drop-menu-list li:last-child {
    border-bottom: 1px solid #CCC;
}
.drop-menu-list a:hover {
    background: #EEE;
    opacity: 1;
}
/* メイン ---------------*/
#main {
    position: relative;
    top: 56px;
    left: 0;
}
/*パンくずリスト ---------------*/
#main .breadcrumbs {
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin-top: 0.8rem;
    font-size: 0.9rem;
}
.breadcrumb li:not(:last-of-type)::after {
    content: "›";
    margin: 0 .6em; /* 記号の左右の余白 */
    color: #777; /* 記号の色 */
    font-size: 1.2rem;
}
.breadcrumb img {
    width: 24px;
    height: auto;
    margin: 0.3rem;
}
.breadcrumb img:hover {
    opacity: 0.7;
}
/* フッター ---------------*/
#footer {
    width: 100%;
    background-color: #2D2D2D;
    position: relative;
    top: 56px;
    left: 0;
}
#footer .footer_inner {
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0 0;
}
/*フッターのメニュー*/
.footer_menu, .footer_menu2 {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}
.footer_menu a, .footer_menu2 a {
    color: #DDD;
}
.footer_menu a:hover, .footer_menu2 a:hover {
    opacity: 0.7;
}
.footer_menu .arrow-r, .footer_menu2 .arrow-r {
    border: 0;
    border-top: solid 1px #DDD;
    border-right: solid 1px #DDD;
    display: inline-block;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin-right: 0.5rem;
}
.footer_menu_detail {
    padding-left: 1.6rem;
    font-size: 0.85rem;
}
.footer_menu_detail li {
    list-style: disc;
    color: #DDD;
}
.footer_counter {
    color: #FFFFFF;
    font-size: 0.95rem;
    text-align: center;
    padding-bottom: 4px;
}
.footer_counter p:first-of-type {
    display: inline-block;
    padding: 1px 20px;
    background: #D3D3D3;
    color: #333;
    margin-bottom: 16px;
}
.footer_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    font-size: 1.2rem;
}
.footer_tel {
    color: #DDDDDD;
    text-align: center;
    line-height: 1.2;
}
.tellink {
    pointer-events: none;
}
.footer_tel span {
    font-size: 0.95rem
}
#copy {
    color: #DDD;
    text-align: center;
    font-size: 0.9rem;
    padding-bottom: 2rem;
}
/*ページの先頭に戻るボタン ---------------*/
#pagetop {
    position: fixed;
    right: 0;
    bottom: 0;
    text-indent: -9999px;
    margin: 0;
}
#pagetop a {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    background: #444;
    transition: opacity .6s ease;
}
#pagetop a:hover {
    opacity: .6;
}
#pagetop a::before {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    content: '';
    transform: rotate(-45deg);
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
/* 各ページのタイトル ---------------*/
.page_title {
    width: 96%;
    max-width: 1000px;
    margin: 1rem auto 3rem;
}
.page_title h1 {
    position: relative;
    text-align: center;
    border-bottom: 5px solid #CCCCCC;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: bolder;
    font-size: 2.2rem;
    padding-bottom: 1.6rem;
    letter-spacing: 0.2rem;
}
.page_title h1 span {
    font-size: 1.4rem;
    letter-spacing: 0;
    color: #385781;
}
.page_title h1::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 5px;
    background-color: #385781;
}
/* 各ページの概要文 */
.page_outline {
    width: 96%;
    max-width: 1000px;
    margin: 1rem auto 3rem;
}
.page_outline p:not(:last-of-type) {
    margin-bottom: 1rem;
}
.page_outline p span {
    font-weight: bold;
    color: #385781;
}
.page_outline_title {
    font-size: 1.4rem;
    color: #385781;
    font-weight: bold;
    margin: 3rem 0 1rem;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.page_outline_title span {
    font-size: 1.3rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    color: #333;
}
.page_outline_title span::before {
    border-top: 1px solid #333;
    content: "";
    width: 40px;
    margin-right: 10px;
}
.p_u_content {
    margin-bottom: 20px;
}
.p_u_content p span {
    color: #333;
}

/* 各ページの概要イメージ */
.page_outline_img {
    width: 96%;
    max-width: 1000px;
    margin: 1rem auto 3rem;
}
.page_outline_img img {
    width: 100%;
}
/* 各ページのコーナータイトル(h2) */
.page_section_title {
    font-size: 1.3rem;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: bolder;
    border-left: 8px double #385781;
    padding-left: 1rem;
    line-height: 1.6rem;
    margin-bottom: 0.8rem;
}
.page_items {
    width: 96%;
    max-width: 1000px;
    margin: 0 auto 3rem;
}
.page_item {
    margin-bottom: 3rem;
    background-color: #FFF;
    padding: 1rem 2rem;
    border-radius: 3px;
    line-height: 1.8;
}
/* 各ページの説明箇条書き */
/*
.page_item ul {
    flex-grow: 1; 
    padding-left: 0.8em;
}
.page_item .liststyle_none {
    list-style: none;
}
.page_item li {
    color: #385781;
    list-style-type: disc;
    line-height: 1.2rem;
    padding-bottom: 8px;
}
.page_item li span {
    color: #333333;
}
*/
/* 各ページの説明箇条書き */
.p_u_content ul,
.page_items ul,
.flow_item ul {
    flex-grow: 1; /*比率を指定*/
    font-size: 0.9rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
    padding-left: 0.8em;
}
.p_u_content li,
.page_items li,
.flow_item li {
    color: #385781;
    list-style-type: disc;
    line-height: 1.2rem;
    font-size: 0.925rem;
    padding-bottom: 8px;
}
.p_u_content li span,
.page_items li span,
.flow_item li span  {
    color: #333333;
}