@charset "UTF-8";
/* ブレイクポイント参考

PC:インナーコンテンツサイズ以上
Laptop-HiDPI:1440
Laptop-MDPI :1280
iPad Pro(10.5inch):834
iPad Pro(12.9inch):1024
iPad:601
SP:600

*/
/* レスポンシブサイト非表示 */
/* PCのみ */
@media screen and (max-width: 1024px) {
    .pc {
        display: none !important;
    }
}

/* タブレット・PC */
@media screen and (max-width: 599px) {
    .pctb {
        display: none !important;
    }
}

/* タブレット・SP */
@media screen and (min-width: 1025px) {
    .tbsp {
        display: none !important;
    }
}

/* タブレットのみ */
@media screen and (min-width: 599px) and (max-width: 1024px) {
    .tb {
        display: none !important;
    }
}

/* SPのみ */
@media screen and (min-width: 600px) {
    .sp {
        display: none !important;
    }
}

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

	リセット : html5reset-1.6.1.css

参考
https://coliss.com/articles/build-websites/operation/css/my-css-reset-by-ire.html
----------------------------------------------------------*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html {
    font-size: 62.5%;
}

/*body設定*/
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif;
    color: #000;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fff;
    line-height: 1.7;
    font-size: 1.6rem;
    overflow-x: hidden;
    text-rendering: optimizeSpeed;
    /*任意でフォントサイズを指定*/
}

@media screen and (min-width: 1025px) {
    body {
        font-weight: 500;
    }
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 1.5rem;
    }
}

/*IE用：游ゴシックの謎余白をなくすためフォントを別指定*/
@media all and (forced-colors: none) {
    body {
        font-family: Meiryo, sans-serif;
    }
}

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}

/*テーブル指定*/
table,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています marginを指定したら地獄*/
ul[class],
ol[class] {
    list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote,
q {
    quotes: none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています。また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています。また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input,
select {
    vertical-align: middle;
}

/*画像を縦に並べたときに余白が出てしまわないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: auto;
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 1025px) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* タッチデバイスでのリンクやボタンの反応を向上 */
a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

@page {
    size: A4;
    margin: 0;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
    transition: 0.1s;
    text-decoration: none;
}

/*すべての要素のfont-family, font-size, line-heightをその親から継承するようにリセット*/
* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/*属性と状態のCSSリセット*/
[hidden] {
    display: none !important;
}

[disabled] {
    cursor: not-allowed;
}

:focus:not(:focus-visible) {
    outline: none;
}

/*box-sizing*/
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*clearfix*/
/* For modern browsers */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/*禁則処理の追加*/
p,
li,
dt,
dd,
th,
td,
pre {
    -ms-line-break: strict;
    line-break: strict;
    -ms-word-break: break-strict;
    word-break: break-strict;
}

/*iOSでのsubmit, buttonのデザインをリセットするCSS*/
button,
input[type=submit],
input[type=button],
input[type=search] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
}

button::-webkit-search-decoration,
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration,
input[type=search]::-webkit-search-decoration {
    display: none;
}

button::focus,
input[type=submit]::focus,
input[type=button]::focus,
input[type=search]::focus {
    outline-offset: -2px;
}

/* Form */
input[type=text],
input[type=email],
input[type=tel],
textarea,
select {
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: inherit;
    font-size: 100%;
    border: none;
    border-radius: 0;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    resize: vertical;
}

button,
input[type=submit],
input[type=button],
input[type=radio],
input[type=checkbox],
label,
select {
    cursor: pointer;
}

/** Form Select IE 11 */
select::-ms-expand {
    display: none;
}

select::-ms-value {
    color: currentColor;
}

/** Selection */
::-moz-selection,
::selection {
    background-color: #b3d4fc;
    /* Change as appropriate */
    color: #000;
    /* Change as appropriate */
    text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*クリアフィックス*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

a {
    text-decoration: none;
    transition: 0.5s;
}

p,
h1,
h2,
h3,
h4,
h5,
dt,
dd,
a {
    font-display: swap;
}

/*マージン*/
.mb00 {
    margin-bottom: 0px !important;
}

@media screen and (max-width: 599px) {
    .mb00 {
        margin-bottom: 0px !important;
    }
}

.mb05 {
    margin-bottom: 5px !important;
}

@media screen and (max-width: 599px) {
    .mb05 {
        margin-bottom: 5px !important;
    }
}

.mb10 {
    margin-bottom: 10px !important;
}

@media screen and (max-width: 599px) {
    .mb10 {
        margin-bottom: 5px !important;
    }
}

.mb15 {
    margin-bottom: 15px !important;
}

@media screen and (max-width: 599px) {
    .mb15 {
        margin-bottom: 10px !important;
    }
}

.mb20 {
    margin-bottom: 20px !important;
}

@media screen and (max-width: 599px) {
    .mb20 {
        margin-bottom: 10px !important;
    }
}

.mb25 {
    margin-bottom: 25px !important;
}

@media screen and (max-width: 599px) {
    .mb25 {
        margin-bottom: 20px !important;
    }
}

.mb30 {
    margin-bottom: 30px !important;
}

@media screen and (max-width: 1024px) {
    .mb30 {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 599px) {
    .mb30 {
        margin-bottom: 15px !important;
    }
}

.mb35 {
    margin-bottom: 35px !important;
}

@media screen and (max-width: 1024px) {
    .mb35 {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 599px) {
    .mb35 {
        margin-bottom: 15px !important;
    }
}

.mb40 {
    margin-bottom: 40px !important;
}

@media screen and (max-width: 1024px) {
    .mb40 {
        margin-bottom: 30px !important;
    }
}

@media screen and (max-width: 599px) {
    .mb40 {
        margin-bottom: 20px !important;
    }
}

.mb50 {
    margin-bottom: 50px !important;
}

@media screen and (max-width: 599px) {
    .mb50 {
        margin-bottom: 25px !important;
    }
}

.mb60 {
    margin-bottom: 60px !important;
}

@media screen and (max-width: 1024px) {
    .mb60 {
        margin-bottom: 40px !important;
    }
}

@media screen and (max-width: 599px) {
    .mb60 {
        margin-bottom: 30px !important;
    }
}

.mb70 {
    margin-bottom: 70px !important;
}

@media screen and (max-width: 1024px) {
    .mb70 {
        margin-bottom: 40px !important;
    }
}

@media screen and (max-width: 599px) {
    .mb70 {
        margin-bottom: 30px !important;
    }
}

.mb80 {
    margin-bottom: 80px !important;
}

@media screen and (max-width: 1024px) {
    .mb80 {
        margin-bottom: 40px !important;
    }
}

@media screen and (max-width: 599px) {
    .mb80 {
        margin-bottom: 30px !important;
    }
}

.mt00 {
    margin-top: 0px !important;
}

@media screen and (max-width: 599px) {
    .mt00 {
        margin-top: 0px !important;
    }
}

.mt10 {
    margin-top: 10px !important;
}

@media screen and (max-width: 599px) {
    .mt10 {
        margin-top: 10px !important;
    }
}

.mt15 {
    margin-top: 15px !important;
}

@media screen and (max-width: 599px) {
    .mt15 {
        margin-top: 10px !important;
    }
}

.mt20 {
    margin-top: 20px !important;
}

@media screen and (max-width: 599px) {
    .mt20 {
        margin-top: 10px !important;
    }
}

.mt30 {
    margin-top: 30px !important;
}

@media screen and (max-width: 1024px) {
    .mt30 {
        margin-top: 20px !important;
    }
}

@media screen and (max-width: 599px) {
    .mt30 {
        margin-top: 15px !important;
    }
}

.mt40 {
    margin-top: 40px !important;
}

@media screen and (max-width: 1024px) {
    .mt40 {
        margin-top: 30px !important;
    }
}

@media screen and (max-width: 599px) {
    .mt40 {
        margin-top: 20px !important;
    }
}

@media print {
    .sp {
        display: none !important;
    }

    html,
    body {
        height: auto;
    }

    body {
        width: 1600px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        zoom: 71%;
    }

    #header {
        position: relative !important;
    }

    #pickup_body {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    #footer_banner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    /* お知らせリンクを2列表示に */
    #footer_information nav ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 20px !important;
    }

    /* フッターメイン部分を横並びに */
    #footer_info_main_container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* フッターの幅を画面表示と同じに制限 */
    footer {
        max-width: 1008px !important;
        margin: 0 auto !important;
        border-left: solid #CCC 1px !important;
        border-right: solid #CCC 1px !important;
    }

    /* フッター内の要素幅も制限 */
    #footer_pickup,
    #footer_banner,
    #footer_info_main_container,
    #footer_copyright {
        max-width: 1008px !important;
        margin: 0 auto !important;
    }

    /* フッター内のパディング調整 */
    #pickup_body,
    #footer_banner {
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 980px !important;
        margin: 0 auto !important;
    }

    /*　------- ↓その他参考例　---------

  .header .header-inner {
      width: 100% !important; //サイト幅を解除
  }
  .page-title {
      margin-top: 0px !important; //固定ヘッダー時のマージンTOP分を解除
      width: 100% !important; //サイト幅を解除
  }
  .breadcrumbs-list {
      width: 100% !important; //サイト幅を解除
  }
  .global-nav {
      width: 100%; //サイト幅を解除
  }
  ------- ↑その他参考　---------*/
}

@page {
    size: A4;
    margin: 5mm 5mm;
}

/***** Fonts and margin Control *****/
html,
body {
    font-size: 87.5%;
    color: #51565b;
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 110%;
    font-weight: nomal;
    margin-bottom: 21px;
}

h1,
h2,
h3,
h4,
h5,
h6 a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 a:visited {
    text-decoration: none;
}

#alphabox,
#betabox,
#gammabox {
    vertical-align: text-bottom;
}

header #alphabox,
#betabox,
#gammabox,
#sanpibox footer {
    line-height: 1.8;
}

p {
    margin: 0;
}

ol,
ul {
    list-style: none;
    margin: 0;
    line-height: 1.8;
}

table {
    margin: 0;
    line-height: 1.8;
}

dl,
dt,
dt {
    padding: 0;
    margin: 0;
    line-height: 1.8;
}

/*--------------------------------------------------------
ヘッダー・メイン・フッター 統一幅設定（レスポンシブ対応）
----------------------------------------------------------*/
@media screen and (min-width: 1025px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: auto;
    }
}

/* ヘッダー・メイン・フッターの統一幅 */
.wrap_head,
#wrap_main,
.wrap {
    max-width: 1008px;
    /* 980px + 14px*2(padding) + 1px*2(border) = 1008px */
    margin: 0 auto;
    padding: 0 14px;
    text-align: left;
    overflow: hidden;
    border-left: solid #CCC 1px;
    border-right: solid #CCC 1px;
    background: #fff;
    box-sizing: border-box;
}

/* ヘッダーにもborderを適用 */
.wrap_head {
    background: #fff;
    border-left: solid #CCC 1px;
    border-right: solid #CCC 1px;
}

.wrap_head_border_bottom {
    border-bottom: 1px solid #ddd;
}

#sanpibox>.wrap {
    border-left: 1px solid #4CC47C;
    border-right: 1px solid #4CC47C;
    background: #4CC47C;
}

header> :nth-child(2)>.wrap_head {
    padding-top: 52px;
}

#alphabox {
    float: right;
    padding-bottom: 21px;
}

#betabox {
    float: left;
    margin-left: 0;
}

#gammabox {
    float: left;
    margin-left: 2.5641%;
}

#font-resize-area {
    padding-bottom: 21px;
}

#layout-tw #alphabox {
    float: right;
}

#layout-tw #betabox {
    float: left;
    margin-left: 0;
}

#layout-wt #alphabox {
    float: left;
}

#layout-wt #betabox {
    float: right;
    margin-right: 0;
}

#layout-wt #alphabox,
#layout-wtt #alphabox {
    margin-left: 0;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#container,
#sunyabox,
#alphabox,
#betabox,
#gammabox,
#sanpibox {
    position: relative;
    z-index: 1;
}

.cate_body_box01 {
    margin: 1em;
}

.cate_body_box01 p {
    text-align: justify;
}

.cate_body_box01_h3 {
    margin: 1em 0em 0.5em 0.5em;
}

.cate_body_box01_h3.h3_underline {
    border-bottom: solid #239E67 0.5px;
    padding-bottom: 0.5em;
    font-size: 1.1em;
}

.cate_body_box01_h4 {
    margin: 1em 0em 0.5em 0em;
}

.cate_body_box01_h4.h4_underline {
    border-bottom: solid #30d88c 0.5px;
    padding-bottom: 0.5em;
    font-size: 1em;
}

.content_title {
    position: relative;
    background: #068B3F;
    border: #fff solid 1px;
    display: block;
    padding: 0.8em 2em;
    color: #fff;
}

.content_title:before {
    position: absolute;
    top: 15%;
    left: 14px;
    width: 6px;
    height: 70%;
    background: #fff;
    content: "";
}

.hdlt-ck3 {
    border: solid #239E67 1px;
    padding: 0.5em 1em;
    margin: 1em 0;
    border-width: 0 0 0 5px;
    border-color: #40AB6B;
    border-style: solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -pie-border-radius: 5px;
    position: relative;
    behavior: url(/js/PIE.htc.html);
    -webkit-box-shadow: 1px 1px 1px #CCC;
    -moz-box-shadow: 1px 1px 1px #CCC;
    box-shadow: 1px 1px 1px #CCC;
    -pie-box-shadow: 1px 1px 1px #CCC;
    position: relative;
}

/*--------------------------------------------------------
ヘッダー設定（レスポンシブ対応）
----------------------------------------------------------*/
/* ヘッダー全体 */
#topnav {
    width: 100%;
    background: #fff;
}

.header-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

.header-main-content {
    width: 66%;
    padding-right: 20px;
    min-width: 300px;
}

.header-sub-content {
    padding: 0.25em;
    width: 34%;
    min-width: 250px;
}

/* ロゴエリア */
#toplogo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin: 1.25em 0.25em 0 0.25em;
    flex-wrap: wrap;
}

#toplogo a>div:first-child {
    display: flex;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

#toplogo a div {
    margin-top: 1em;
    padding: 0.5em;
    line-height: 1.3;
}

#toplogoimg img {
    width: 100%;
    height: auto;
}

#logoTitle {
    font-size: 2.2em;
    font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
    color: #51565b;
    font-weight: bolder;
    letter-spacing: 0.03em;
    margin: 0;
    padding: 0;
}

#logosub,
#logodes {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.3;
}

span#logodes {
    text-align: left;
    padding: 1em 0 0 0.5em;
    font-size: 1.05em;
}

p#logosub {
    /* padding-bottom: 0.5em; */
    font-size: inherit;
}

p#logodes {
    font-size: inherit;
    line-height: 1.3;
    padding-top: 1em;
    color: #40AB6B;
}

/* 文字サイズ変更エリア */
#fontnavi {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.5em;
    padding: 10px 0;
    text-align: right;
    min-width: 0;
}

/* 文字サイズ変更エリアのリスト */
#fontnavi ul#fontSizer {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 1;
    min-width: 0;
}

/* 検索フォーム */
#fontnavi form {
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}

#fontnavi li {
    padding: 2px 6px;
    cursor: pointer;
    margin: 2px;
}

#fontnavi li.active {
    background-color: rgb(6 139 63/ 0.8);
    color: white;
}

#font-s,
#font-m,
#font-l {
    margin-left: 2px;
    cursor: pointer;
    font-weight: normal;
    border: solid #ccc 1px;
    background-color: #fff;
}

/* javascriptで文字の大きさを変更 */
.font-s {
    font-size: 80%;
}

.font-m {
    font-size: 100%;
}

.font-l {
    font-size: 130%;
}

/* 検索キーワードの入力欄のスタイル */
#fontnavi #site-search-input {
    display: inline-block;
    width: 9em;
    min-width: 60px;
    max-width: 120px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 1px;
    flex-shrink: 1;
}

/* 検索ボタンのスタイル */
#fontnavi button[type="submit"] {
    display: inline-block;
    padding: 4px 5px;
    border: 1px solid #ccc;
    background-color: rgb(6 139 63/ 0.8);
    color: white;
    cursor: pointer;
    margin-left: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 1em;
    text-decoration: none;
    transition: background-color 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

/* レスポンシブ対応 - 縦並びにするブレイクポイントを下げる */
@media (max-width: 480px) {
    #fontnavi {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5em;
    }

    #fontnavi ul#fontSizer {
        /* order: 1;
        margin-bottom: 8px;
        width: 100%;
        justify-content: center; */
        display: none;
    }

    #fontnavi form {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    #fontnavi li {
        padding: 1px 3px;
        margin: 1px;
        font-size: 0.85em;
    }

    #fontnavi #site-search-input {
        width: 100px;
        font-size: 0.85em;
    }

    #fontnavi button[type="submit"] {
        padding: 0 3px;
        font-size: 0.85em;
    }
}

/* QRコードと連絡先エリア */
.toplogobox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    /* text-align: right; */
    flex-wrap: wrap;
}

#qrimg {
    width: 70px;
    margin-left: 10px;
    /* margin-top: 10px; */
}

#qrimg img {
    width: 90px;
    display: block;
}

#topinfo {
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-align: right;
    vertical-align: middle;
}

#topinfo a,
#topinfo a:visited {
    color: #51565b;
}

.phone-line {
    display: block;
    text-align: right;
}

.phone-line>div {
    text-align: right;
}

.icon-phoneold {
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    margin-right: 10px;
}

.tellnb {
    font-size: 20px;
    font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
}

#navad {
    font-style: normal;
    font-size: 12px;
}

.fs11 {
    font-size: 11px;
}

/* ヘッダーナビゲーション */
#header_nav {
    width: 100%;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

#header_nav ul {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0;
    flex-wrap: wrap;
}

#header_nav li a {
    padding: 8px 12px;
    color: #2b2b2b;
    font-size: 12px;
    border-left: 1px solid #ccc;
    box-shadow: 1px 0 #ddd, -1px 0 #eee inset;
    white-space: nowrap;
}

#header_nav li a:hover {
    background-color: #f5f5f5;
}


/*--------------------------------------------------------
メイン・サイドバー設定（レスポンシブ対応）
----------------------------------------------------------*/
/** main Layouts **/
#container {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.content_body {
    margin-bottom: 28px;
    line-height: 1.8;
}

.side_body {
    line-height: 1.8;
}

.rad8,
.rad8box {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -pie-border-radius: 8px;
    position: relative;
}

.rad8t {
    -webkit-border-radius: 8px 8px 0 0 / 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0 / 8px 8px 0 0;
    border-radius: 8px 8px 0 0 / 8px 8px 0 0;
    -pie-border-radius: 8px 8px 0 0 / 8px 8px 0 0;
    position: relative;
}

.row-fluid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.row-fluid:before,
.row-fluid:after {
    display: table;
    line-height: 0;
    content: ""
}

.row-fluid:after {
    clear: both
}

.row-fluid [class*="span"] {
    box-sizing: border-box;
    min-height: 30px;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0
}

.row-fluid .span12 {
    width: 100%;
}

.row-fluid .span11 {
    width: 91.48936170212765%;
}

.row-fluid .span10 {
    width: 82.97872340425532%;
}

.row-fluid .span9 {
    width: 74.46808510638297%;
}

/* メインコンテンツとサイドバーの配置 */
.row-fluid .span8 {
    flex: 1;
    min-width: 0;
    width: calc(70% - 10px);
    order: 2;
    /* メインを右側に */
}

/* 2カラムレイアウト用の調整 */
#layout-tw .span8 {
    flex: 1;
    min-width: 0;
    width: calc(70% - 10px);
    order: 2;
    /* Two-Width: メインを右側に */
}

#layout-wt .span8 {
    flex: 1;
    min-width: 0;
    width: calc(70% - 10px);
    order: 2;
    /* Width-Two: メインを右側に */
}

.row-fluid .span7 {
    width: 57.44680851063829%;
}

.row-fluid .span6 {
    width: 48.93617021276595%;
}

.row-fluid .span5 {
    width: 40.42553191489362%;
}

/* サイドバー（betabox）- 左側に表示 */
.row-fluid .span4 {
    flex: 0 0 27%;
    min-width: 250px;
    width: 27%;
    order: 1;
    /* サイドバーを左側に */
}

/* 2カラムレイアウト用の調整 */
#layout-tw .span4 {
    flex: 0 0 27%;
    min-width: 250px;
    width: 27%;
    order: 1;
    /* Two-Width: サイドバーを左側に */
}

#layout-wt .span4 {
    flex: 0 0 27%;
    min-width: 250px;
    width: 27%;
    order: 1;
    /* Width-Two: サイドバーを左側に */
}

.row-fluid .span3 {
    width: 23.404255319148934%;
}

.row-fluid .span2 {
    width: 14.893617021276595%;
}

.row-fluid .span1 {
    width: 6.382978723404255%;
}

.cate_body_box01_h3 {
    margin: 1em 0em 0.5em 0.5em;
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

/* box 指定 */
.cate_body_box01_h3.h3_underline {
    border-bottom: solid #239E67 0.5px;
    padding-bottom: 0.5em;
    font-size: 1.1em;
}

.cate_body_box01_h4 {
    margin: 1em 0em 0.5em 0em;
}

.cate_body_box01_h4.h4_underline {
    border-bottom: solid #30d88c 0.5px;
    padding-bottom: 0.5em;
    font-size: 1em;
}

/* サイドバー共通スタイル */
aside.sidebox,
section.sidebox {
    width: 100%;
    display: block;
    padding-bottom: 14px;
}

/* betabox専用スタイル */
#betabox {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* サイドバー内のコンテンツ調整 */
#betabox .side_panel,
#betabox aside,
#betabox section {
    margin-bottom: 5px;
}

/* betaboxがspan4クラス内にある場合の調整 */
.span4 #betabox {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* パンくずリスト */
/* パンくずナビゲーション：横並び表示 */
#pankuz {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

#pankuz li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* セパレーター表示：>> 形式 */
#pankuz li:not(:last-child)::after {
    content: " >> ";
    margin: 0 8px;
    color: #999;
    font-weight: normal;
    user-select: none;
}

/* リンクスタイル */
#pankuz a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

#pankuz a:hover,
#pankuz a:focus {
    color: #004499;
    text-decoration: underline;
}

/* 現在のページ（リンクでない項目）のスタイル */
#pankuz li:last-child span {
    color: #333;
    font-weight: 500;
}

/* アクセシビリティ：フォーカス表示の改善 */
#pankuz a:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

/*--------------------------------------------------------
レスポンシブ対応
----------------------------------------------------------*/
/* タブレット対応 (768px - 1024px) */
@media screen and (max-width: 1024px) {

    .wrap_head,
    #wrap_main,
    .wrap {
        max-width: 100%;
        margin: 0;
        padding: 0 10px;
        border-left: none;
        border-right: none;
    }

    .header-info-column {
        display: flex;
        flex-direction: column;
        /* ロゴやテキストなどの要素を縦に並べる */
        align-items: center;
        /* 水平方向の中央揃えを実現 */
    }

    .clearfix-top-header {
        align-items: center;
        /* 中の要素を水平方向の中央に配置 */
    }

    .header-main-content {
        width: 60%;
        padding-right: 15px;
    }

    .header-sub-content {
        width: 40%;
    }

    #logoTitle {
        font-size: 2.8em;
    }

    #logosub,
    #logodes {
        font-size: 0.8em;
    }

    .tellnb {
        font-size: 18px;
    }

    #fontnavi {
        justify-content: center;
    }

    /* メインレイアウト */
    .row-fluid {
        /* gap: 15px; */
        gap: 6px;
    }

    .row-fluid .span8,
    #layout-tw .span8,
    #layout-wt .span8 {
        width: calc(72% - 3px);
        flex: 1;
        order: 2;
        /* タブレットでもメインを右側に */
    }

    .row-fluid .span4,
    #layout-tw .span4,
    #layout-wt .span4 {
        flex: 0 0 calc(28% - 3px);
        width: calc(28% - 3px);
        min-width: 220px;
        order: 1;
        /* タブレットでもサイドバーを左側に */
    }

    /* パンくずリスト */
    #pankuz {
        font-size: 12px;
        margin: 8px 0;
    }

    #pankuz li:not(:last-child)::after {
        margin: 0 4px;
        font-size: 12px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .row-fluid {
        gap: 8px;
        /* 間隔をより小さく */
    }

    /* .row-fluid .span8,
    #layout-tw .span8,
    #layout-wt .span8 {
        width: calc(67% - 4px);
        flex: 1;
        min-width: 0;
    }

    .row-fluid .span4,
    #layout-tw .span4,
    #layout-wt .span4 {
        width: calc(33% - 4px);
        flex: 0 0 calc(33% - 4px);
        min-width: 200px;
    } */
                 #toplogoimg img {
                     display: none;
                 }
}


/* スマートフォン対応 (768px以下) */
@media screen and (max-width: 768px) {

    .wrap_head,
    #wrap_main,
    .wrap {
        padding: 0 8px;
    }

    .header-row {
        flex-direction: column;
        gap: 15px;
    }

    .header-main-content,
    .header-sub-content {
        width: 100%;
        padding-right: 0;
    }

    #toplogo a {
        flex-direction: column;
        text-align: center;
    }

    #toplogo a>div:first-child {
        /* margin-right: 0;
        margin-bottom: 10px; */
        display: inline-block;
        vertical-align: top;
        margin-right: 12px;
    }

    #logoTitle {
        font-size: 2.2em;
        text-align: center;
    }

    #logosub,
    #logodes {
        text-align: center;
        font-size: 0.75em;
    }

    .toplogobox {
        justify-content: center;
        text-align: center;
        flex-direction: row;
        /* flex-direction: column; */
        gap: 10px;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    #toplogoimg img {
        display: none;
    }

    #topinfo {
        /* text-align: center; */
        text-align: left;
        flex-shrink: 1;
        min-width: 0;
    }

    #qrimg {
        flex-shrink: 0;
        /* QRコードサイズを固定 */
        width: 60px;
        /* 小さい画面では少し小さく */
        margin: 0;
        /* マージンをリセット */
    }

    #qrimg img {
        width: 60px;
        /* QRコード画像サイズを調整 */
    }

    /* 住所情報のフォントサイズ調整 */
    #navad {
        font-size: 11px;
        /* 12px → 11px */
    }

    .tellnb {
        font-size: 16px;
        /* 電話番号サイズを維持 */
    }

    .fs11 {
        font-size: 11px;
        text-align: center;
        /* FAX情報を少し小さく */
    }

    .phone-line>div {
        text-align: center;
    }

    #fontnavi ul {
        justify-content: center;
    }

    #header_nav ul {
        justify-content: center;
        flex-wrap: wrap;
    }

    #header_nav li a {
        padding: 6px 8px;
        font-size: 11px;
        border: 1px solid #ccc;
        margin: 2px;
        border-radius: 3px;
    }

    /* メインレイアウト：縦並び */
    .row-fluid {
        flex-direction: column;
        /* gap: 10px; */
        gap: 5px;
    }

    /* .row-fluid .span8,
    .row-fluid .span4,
    #layout-tw .span8,
    #layout-tw .span4,
    #layout-wt .span8,
    #layout-wt .span4 {
        width: 100%;
        flex: none;
        min-width: auto;
        order: unset;
        /* スマートフォンではorder指定を解除 */
    /* } */

    .row-fluid .span8,
    .row-fluid .span4,
    #layout-tw .span8,
    #layout-tw .span4,
    #layout-wt .span8,
    #layout-wt .span4 {
        width: 100%;
        flex: none;
        min-width: auto;
        /* order: unset; を削除 */
    }

    /* メインコンテンツを先に表示 */
    .row-fluid .span8,
    #layout-tw .span8,
    #layout-wt .span8 {
        order: 1;
    }

    /* サイドバーを後に表示 */
    .row-fluid .span4,
    #layout-tw .span4,
    #layout-wt .span4 {
        order: 2;
    }

    aside.sidebox,
    section.sidebox {
        margin-bottom: 15px;
    }

    /* パンくずリスト */
    #pankuz {
        font-size: 12px;
        margin: 8px 0;
    }

    #pankuz li:not(:last-child)::after {
        margin: 0 4px;
        font-size: 12px;
    }

    #footer_banner_top {
        flex-direction: column;
        align-items: center;
    }

    /* .linkpanel 自体を中央揃えの準備 */
    .linkpanel {
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        text-align: center;
        /* 中の要素を中央揃えにする */
        margin-bottom: 15px;
        /* 画像間の垂直方向の余白 */
    }

    /* .linkpanel の中の画像を大きく、中央に表示 */
    .linkpanel img {
        max-width: 70%;
        /* 画像の最大幅を画面の70%に設定（60%から少し大きく） */
        height: auto;
        /* 高さを自動調整し、画像の比率を維持 */
        display: block;
        /* 中央揃えのためにブロック要素に変更 */
        margin: 0 auto;
        /* 左右の余白を自動にし、中央に配置 */
    }

    /* .linkpanel 自体を中央揃えの準備 */
    .pickupbaner {
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        text-align: center;
        /* 中の要素を中央揃えにする */
        margin-bottom: 15px;
        /* 画像間の垂直方向の余白 */
    }

    /* .linkpanel の中の画像を大きく、中央に表示 */
    .pickupbaner img {
        max-width: 70%;
        /* 画像の最大幅を画面の70%に設定（60%から少し大きく） */
        height: auto;
        /* 高さを自動調整し、画像の比率を維持 */
        display: block;
        /* 中央揃えのためにブロック要素に変更 */
        margin: 0 auto;
        /* 左右の余白を自動にし、中央に配置 */
    }

    /* betabox（サイドバー）の特別な調整 */
    #betabox {
        display: block;
        width: 100%;
        box-sizing: border-box;
        order: 2 !important;
        /* 確実にサイドバーを後に */
    }

    /* alphabox（メインコンテンツ）の特別な調整 */
    #alphabox {
        order: 1 !important;
        /* 確実にメインを先に */
        width: 100%;
        float: none;
        /* floatを解除 */
    }

}

/* 小画面スマートフォン対応 (480px以下) */
@media screen and (max-width: 480px) {

    .wrap_head,
    #wrap_main,
    .wrap {
        padding: 0 5px;
    }

    #toplogoimg {
        width: 50px;
    }

    #logoTitle {
        font-size: 1.8em;
    }

    #logosub,
    #logodes {
        font-size: 0.7em;
    }

    #header_nav li a {
        padding: 4px 6px;
        font-size: 10px;
    }

    .toplogobox {
        gap: 8px;
    }

    #qrimg {
        width: 50px;
        /* さらに小さく */
    }

    #qrimg img {
        width: 70px;
    }

    #navad {
        font-size: 12px;
        /* 住所をさらに小さく */
    }

    .tellnb {
        font-size: 16px;
    }

    .fs11 {
        font-size: 11px;
    }

    .row-fluid {
        gap: 8px;
    }

    /* パンくずリスト */
    #pankuz {
        font-size: 11px;
    }

    #pankuz li:not(:last-child)::after {
        margin: 0 2px;
    }
}

/* 極小画面対応 (320px以下) */
@media screen and (max-width: 320px) {
    #logoTitle {
        font-size: 1.5em;
    }

    #logosub,
    #logodes {
        font-size: 0.65em;
    }

    .toplogobox {
        gap: 6px;
        justify-content: flex-start;
        /* 左寄せに変更 */
    }

    #qrimg {
        width: 45px;
    }

    #qrimg img {
        width: 45px;
    }

    #topinfo {
        font-size: 9px;
        /* 全体的に小さく */
    }

    #navad {
        font-size: 11px;
    }

    .tellnb {
        font-size: 13px;
    }

    .fs11 {
        font-size: 11px;
    }

    #fontnavi li {
        padding: 1px 4px;
        font-size: 11px;
    }

    header> :nth-child(2)>.wrap_head {
        padding-top: 66px;
    }

    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #alphabox,
    #betabox,
    #gammabox {
        height: auto;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    #font-resize-area {
        padding: 0 7px 7px;
    }

    aside.sidebox {
        width: 100%;
    }

    section.sidebox {
        width: 100%;
    }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
    header> :nth-child(2)>.wrap_head {
        padding-top: 66px;
    }

    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #alphabox,
    #betabox,
    #gammabox {
        height: auto;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    #font-resize-area {
        padding: 0 7px 7px;
    }

    aside.sidebox {
        width: 49%;
    }

    section.sidebox {
        width: 49%;
    }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    header>:nth-child(2)>.wrap_head {
        padding-top: 66px;
    }

    #alphabox,
    #betabox,
    #gammabox {
        height: auto;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    #font-resize-area {
        padding: 0 7px 7px;
    }

    aside.sidebox {
        width: 48%;
        padding: 0 1% 2px;
    }

    section.sidebox {
        width: 48%;
        padding: 0 1% 2px;
    }
}

@media screen and (min-width: 769px) and (max-width: 979px) {
    header>:nth-child(2)>.wrap_head {
        padding-top: 66px;
    }

    table pd1emthtd th {
        padding-left: 28px;
    }

    aside.sidebox {
        width: 100%;
    }

    section.sidebox {
        width: 100%;
    }

    /* .row-fluid .span8,
    #layout-tw .span8,
    #layout-wt .span8 {
        width: 70%;
        order: 2;
    }

    .row-fluid .span4,
    #layout-tw .span4,
    #layout-wt .span4 {
        width: 27%;
        order: 1;
    } */
}

/* @media screen and (min-width: 980px) {

    .row-fluid .span8,
    #layout-tw .span8,
    #layout-wt .span8 {
        width: 70%;
    }

    .row-fluid .span4,
    #layout-tw .span4,
    #layout-wt .span4 {
        width: 27%;
    }
} */

/* ----------------------------------------------------------
main parts 
----------------------------------------------------------*/
.update {
    padding: 7px 0;
    font-size: 18px;
}

.side_panel {
    border: solid #888 1px;
}

.side_panel ul li {
    cursor: pointer;
}

.panel_img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.panel_ontext {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(6, 139, 63, 0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B4068B3F, endcolorstr=#B4068B3F, gradienttype=0);
}

.side_panel .panel_ontext>span {
    padding: 7px;
    display: inline-block;
    text-shadow: 0.8px 0.8px 1px #40AB6B, -0.8px 0.8px 1px #40AB6B, 0.8px -0.8px 1px #40AB6B, -0.8px -0.8px 1px #40AB6B;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0.03em;
}

.side_panel ul li {
    font-size: 14px;
}

.linkpanel {
    margin-bottom: 14px;
}

.pdfthumbox {
    margin: 2em 0;
    text-align: center;
}

#aboutpdf {
    border: solid #068B3F 2px;
    margin-bottom: 21px;
    padding: 14px;
    font-size: 16px;
    line-height: 1.1;
}

#aboutpdf #aten {
    color: #000;
    font-size: 18px;
    margin-bottom: 7px;
}

#aboutpdf img {
    vertical-align: middle;
    display: inline-block;
    margin-right: 7px;
}

a.maillink {
    padding-right: 20px;
    background: url(../images/icn_mail.png) no-repeat right bottom;
}

a.xlslink {
    padding-right: 20px;
    background: url(../images/icon_xls.gif) no-repeat right bottom;
}

a.doclink {
    padding-right: 20px;
    background: url(../images/icon_doc.gif) no-repeat right bottom;
}

a.pptlink {
    padding-right: 20px;
    background: url(../images/icon_pps.gif) no-repeat right bottom;
}

a.pdflink {
    padding-right: 20px;
    background: url(../images/icon_pdf.png) no-repeat right bottom;
}

a.ziplink {
    padding-right: 20px;
    background: url(../images/icon_archive.gif) no-repeat right bottom;
}

a.txtlink {
    padding-right: 20px;
    background: url(../images/icon_txt.gif) no-repeat right bottom;
}

/* トップへ戻るリンク */
.top-button-container {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.top-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #239E67;
    color: white !important;
    padding: 0.5em 0.5em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-button:hover,
.top-button:focus,
.top-button:visited {
    background-color: #239E67;
    color: white !important;
}

.top-button img {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

.top-button-hr {
    margin: 0;
    border: none;
    height: 1px;
    background-color: #CCC;
}

/******************** map parts ***********************/
.map_embed {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.map_embed iframe,
.map_embed object,
.map_embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/******************** side area parts ***********************/
aside.sidebox {
    width: 100%;
    display: inline-block;
    padding-bottom: 14px;
}

section.sidebox {
    width: 100%;
    display: inline-block;
    padding-bottom: 14px;
}

.fa,
.fa-solid {
    padding-right: 5px;
}

.fa-check {
    color: red;
}

.fa-plus-circle,
.fa-caret-right,
.fa-check-square-o,
.fa-folder-open,
.fa-circle-chevron-right {
    color: #4CC47C;
}

.fa-arrow-circle-right,
.fa-heartbeat {
    color: pink;
}

.fa-folder-open {
    color: #ffcf59;
}

.fa-caret-right {
    padding: 5px 2px 8px 3px;
}

.fa-circle-chevron-right {
    padding: 5px 5px 5px 0px;
}

/*--------------------------------------------------------
footer設定
----------------------------------------------------------*/

/** footer top Layouts **/
#sanpibox {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-align: left;
    background: rgba(6, 139, 63, 0.8);
}

/** footer Layouts **/
footer {
    max-width: 1008px;
    /* mainと同じ幅 */
    margin: 0 auto;
    display: block;
    clear: both;
    text-align: left;
    /* background: rgba(6, 139, 63, 0.8); */
    border-left: solid #CCC 1px;
    border-right: solid #CCC 1px;
    box-sizing: border-box;
}

#footer_bottom {
    margin: 0;
    padding: 7px 0;
    width: 100%;
    text-align: left;
}

#footer-cols i,
.btn i,
h1 i,
h2 i,
h3 i,
h4 i {
    margin-right: 0.5em;
}

#copyright {
    font-size: 11px;
    padding: 7px 0;
    display: inline-block;
}

#copyright,
#copyright a,
#copyright a:visited {
    color: #fff;
}

/* 1. バナーセクション（4つ横並び） */
#footer_pickup {
    background: #fff;
    /* padding: 15px 0; */
}

#pickup_title {
    background-color: rgba(6, 139, 63, 0.8);
    padding: 5px 20px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    /* margin-bottom: 15px; */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#pickup_body {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    /* 間隔を狭めて幅いっぱいに */
    max-width: 100%;
    margin: 0 auto;
    padding: 0 14px;
}

.pickuplink {
    flex: 1;
    border-bottom: none;
    margin-bottom: 0;
    padding: 12px;
    /* パディングを調整 */
    /* background: #f9f9f9; */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pickuplink a {
    display: block;
    width: 100%;
    /* max-width: 140px; */
    /* 画像の最大幅を制限して小さめに */
}

.pickuplink img {
    width: 100%;
    height: auto;
    display: block;
    /* max-height: 100px; */
    /* 高さも制限 */
    /* object-fit: contain; */
    /* アスペクト比を保持 */
}

/* 2. バナーセクション2（4つ横並び） */
#footer_banner {
    background: #fff;
    /* padding: 15px 0; */
    /* border-top: 1px solid #ddd; */
    display: flex;
    justify-content: space-between;
    /* 幅いっぱいに配置 */
    gap: 10px;
    /* 間隔を狭めて幅いっぱいに */
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 14px;
    flex-wrap: wrap;
}

#footer_banner_bidding,
#footer_banner_recruit {
    display: contents;
    /* 子要素を直接親に展開 */
}

.linkpanel,
.pickupbaner {
    flex: 1;
    max-width: none;
    /* 最大幅制限を解除 */
    /* min-width: 120px; */
    /* 最小幅を調整 */
    margin-bottom: 0;
    /* padding: 12px; */
    /* パディングを調整 */
    /* background: #f9f9f9; */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linkpanel img,
.pickupbaner img {
    width: 100%;
    height: auto;
    display: block;
    /* max-width: 150px; */
    /* 画像の最大幅を制限して小さめに */
    /* max-height: 80px; */
    /* 高さも制限 */
    /* object-fit: contain; */
    /* アスペクト比を保持 */
}

/* 3. お知らせとメインフッターを横並び配置 */
#footer_info_main_container {
    background: rgba(6, 139, 63, 0.8);
    padding: 10px 0;
    display: flex;
    align-items: center;
    /* 高さを揃える */
    gap: 30px;
    /* 間隔をあまり広くしない */
    max-width: 100%;
    margin: 0 auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    min-height: 80px;
    /* 最小の高さを設定してロゴと合わせる */
}

/* お知らせセクション（左側・2列表示） */
#footer_information {
    background: transparent;
    padding: 0;
    flex: 1;
    max-width: 500px;
    /* 最大幅を制限 */
    display: flex;
    align-items: center;
    /* ロゴと同じ高さに合わせる */
}

#footer_information .wrap_foot {
    max-width: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#footer_information nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2列表示 */
    gap: 2px 20px;
    /* 行間・列間の調整 */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#footer_information nav li {
    text-align: left;
    /* 左寄せ */
    padding: 0;
    min-width: auto;
    display: flex;
    align-items: center;
}

#footer_information nav li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 左寄せ */
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.3s;
    width: 100%;
    line-height: 1;
}

#footer_information nav li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* アイコンの表示修正 - 文字の横に配置 */
#footer_information nav li i {
    margin-right: 6px;
    /* アイコンと文字の間隔 */
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    display: inline-block;
}

/* アイコンフォントが読み込まれていない場合の代替 */
#footer_information nav li i.icon-openfolderalt:before {
    content: "📁";
    font-style: normal;
}

/* メインフッターセクション（右側） */
#footer_main {
    background: transparent;
    padding: 0;
    flex-shrink: 0;
    min-width: 400px;
    /* 最小幅を確保 */
}

#footer_main #wrap_foot {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#footercbox {
    display: block;
}

.footer-cols2 {
    width: 100%;
    padding: 0;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 右寄せ */
    max-width: 100%;
    margin: 0;
}

/* ロゴ部分 */
#aboutus {
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 0;
    flex-shrink: 0;
    margin-right: 20px;
    /* ロゴと連絡先の間隔 */
}

#logbw {
    width: 60px;
    height: 60px;
    padding: 4px;
    overflow: hidden;
    margin-right: 12px;
    background-color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

#logbw img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#aboutus p {
    margin: 0;
    line-height: 1.2;
}

#aboutus p a {
    color: #fff;
}

#logtxt {
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.2em;
    font-weight: bold;
    font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
}

/* 連絡先情報 */
#aboutad {
    text-align: right;
    color: #fff;
    line-height: 1.4;
    font-size: 14px;
    flex-shrink: 0;
}

/* 5. コピーライトセクション */
#footer_copyright {
    background: rgba(6, 139, 63, 0.8);
    padding: 5px 0;
}

#footer_copyright .wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
}

#footer_bottom {
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

#copyright {
    color: #fff;
    font-size: 11px;
    /* 少し小さく */
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 1.1;
    /* 少し縮める */
}

#copyright a,
#copyright a:visited {
    color: #fff;
    text-decoration: none;
}

#copyright a:hover {
    text-decoration: underline;
}

/* フッターレスポンシブ対応 */
@media (max-width: 1024px) {
    footer {
        max-width: 100%;
        margin: 0;
        padding: 0 10px;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 768px) {
    footer {
        padding: 0 8px;
    }

    /* バナー：縦並び */
    #pickup_body {
        flex-direction: column;
        gap: 10px;
    }

    #footer_banner {
        flex-direction: column;
        gap: 10px;
    }

    .pickuplink a,
    .linkpanel,
    .pickupbaner {
        max-width: 200px;
        /* モバイルでは少し大きめに */
        margin: 0 auto;
    }

    /* お知らせとメインフッター：縦並び */
    #footer_info_main_container {
        flex-direction: column;
        gap: 20px;
    }

    #footer_information {
        max-width: 100%;
    }

    /* お知らせリンク：1列表示 */
    #footer_information nav ul {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #footer_information nav li a {
        justify-content: center;
    }

    /* ロゴと連絡先：縦並び */
    .footer-cols2 {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        justify-content: center;
    }

    #aboutus {
        justify-content: center;
        margin-right: 0;
    }

    #aboutad {
        text-align: center;
    }

    /* コピーライト：中央寄せ */
    #footer_bottom {
        text-align: center;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 0 5px;
    }

    #pickup_title {
        font-size: 14px;
        padding: 8px;
    }

    .pickuplink,
    .linkpanel,
    .pickupbaner {
        padding: 8px;
    }

    .pickuplink a,
    .linkpanel img,
    .pickupbaner img {
        max-width: 100%;
        /* さらに小さく */
        /* max-height: 60px; */
    }

    .panel_img img {
        width: 100%;
        object-fit: cover;
    }

    img.top-footer-linkpanel-img-small {
        max-width: 100%;
    }

    #footer_info_main_container {
        padding: 15px 8px;
        gap: 15px;
    }

    #footer_information nav li a {
        font-size: 12px;
        padding: 4px 2px;
    }

    #aboutus {
        flex-direction: column;
        text-align: center;
    }

    #logbw {
        margin-right: 0;
        margin-bottom: 8px;
    }

    #logtxt {
        font-size: 14px;
    }

    #aboutad {
        font-size: 12px;
    }

    #footer_main {
        min-width: auto;
    }
}

/*--------------------------------------------------------
読み込みテンプレート設定
----------------------------------------------------------*/
/* テンプレート読み込み中のスタイル */
.template-error {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 12px;
    margin: 8px 0;
    color: #856404;
}

.template-error p {
    margin: 0 0 8px 0;
}

.template-error p:last-child {
    margin-bottom: 0;
}

/* スクリーンリーダー専用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 読み込み中のスムーズなトランジション */
.templates-loading body {
    visibility: hidden;
    opacity: 0;
}

.templates-loaded body {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* noscript アラートメッセージ */
.noscript-message {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 15px;
    margin: 20px;
    font-family: sans-serif;
    font-size: 16px;
}

/**----------------------------------------------------------
 * アコーディオンUI用のスタイル
----------------------------------------------------------**/
/* 文字サイズ */


/* --- 汎用スタイル --- */
ul.cateopen {
    padding: 1em 0.7em;
    margin-right: 2px;
}

ul.cateopen li {
    padding: 0.1em;
    display: block;
    list-style: none;
    position: relative;
    line-height: 1.2;
}

ul.cateopen li a,
ul.cateopen li a:visited {
    color: #7E5F64;
    text-decoration: none;
}

ul.cateopen li a:hover {
    text-decoration: underline;
    /* ホバー時に下線を表示 */
}

/* --- アコーディオン機能 --- */

/* 1. アコーディオンのトリガーとなる <p> タグのスタイル */
ul.cateopen li.catetree>p,
ul.cateopen li.catetree-nest>p {
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: 4px 0;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 3. 開いた状態 (.opened) でアイコンを回転させる */
ul.cateopen li.catetree.opened>p i,
ul.cateopen li.catetree-nest.opened>p i {
    transform: rotate(135deg);
}

/* --- ツリー表示のスタイル調整 --- */
li.catetree ul {
    margin-left: 0.6em;
}


/* ネストされたリストのスタイル */
li.catetree>ul>li,
li.catetree-nest>ul>li {
    margin: 0;
    padding: 0.3em 0 0.3em 1.2em;
    border-left: 1px solid #999;
}

/* 横線を描画 */
li.catetree>ul>li:before,
li.catetree-nest>ul>li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1em;
    width: 1em;
    border-bottom: 1px solid #999;
}

/* 最後の要素は縦線を下に伸ばさない */
li.catetree>ul>li:last-child,
li.catetree-nest>ul>li:last-child {
    border-left: none;
}

/* 最後の要素の横線を L字 に変形 */
li.catetree>ul>li:last-child:before,
li.catetree-nest>ul>li:last-child:before {
    border-left: 1px solid #999;
    height: 1em;
    top: 0;
}

/* ---------------------------------------------- * 
* ナビゲーションタブ
* ------------------------------------------------*/
.nav {
    margin-bottom: 20px;
    margin-left: 0;
    list-style: none
}

.nav>li>a {
    display: block
}

.nav>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background-color: #eee
}

.nav-tabs {
    border-bottom: 1px solid #ddd
}

.nav-tabs:before,
.nav-pills:before,
.nav-tabs:after,
.nav-pills:after {
    display: table;
    line-height: 0;
    content: ""
}

.nav-tabs:after,
.nav-pills:after {
    clear: both
}

.nav-tabs>li,
.nav-pills>li {
    float: left
}

.nav-tabs>li>a,
.nav-pills>li>a {
    padding-right: 12px;
    padding-left: 12px;
    margin-right: 2px;
    line-height: 14px
}

.nav-tabs {
    border-bottom: 1px solid #ddd
}

.nav-tabs>li {
    margin-bottom: -1px
}

.nav-tabs>li>a {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 20px;
    border: 1px solid transparent;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0
}

.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus {
    border-color: #eee #eee #ddd
}

.nav-tabs>.active>a,
.nav-tabs>.active>a:hover,
.nav-tabs>.active>a:focus {
    color: #fff;
    background-color: #40AB6B;
    border-color: none;
}

.nav-pills>li>a {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.nav-pills>.active>a,
.nav-pills>.active>a:hover,
.nav-pills>.active>a:focus {
    color: #fff;
    background-color: #08c
}

.nav-stacked>li {
    float: none
}

.nav-stacked>li>a {
    margin-right: 0
}

.nav-tabs.nav-stacked {
    border-bottom: 0
}

.nav-tabs.nav-stacked>li>a {
    border: 1px solid #ddd;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.nav-tabs.nav-stacked>li:first-child>a {
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-topleft: 4px
}

.nav-tabs.nav-stacked>li:last-child>a {
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px
}

.nav-tabs.nav-stacked>li>a:hover,
.nav-tabs.nav-stacked>li>a:focus {
    z-index: 2;
    border-color: #ddd
}

.nav-pills.nav-stacked>li>a {
    margin-bottom: 3px
}

.nav-pills.nav-stacked>li:last-child>a {
    margin-bottom: 1px
}

.nav-tabs .dropdown-menu {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px
}

.nav-pills .dropdown-menu {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px
}

.nav .dropdown-toggle .caret {
    margin-top: 6px;
    border-top-color: #08c;
    border-bottom-color: #08c
}

.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
    border-top-color: #005580;
    border-bottom-color: #005580
}

.nav-tabs .dropdown-toggle .caret {
    margin-top: 8px
}

.nav .active .dropdown-toggle .caret {
    border-top-color: #fff;
    border-bottom-color: #fff
}

.nav-tabs .active .dropdown-toggle .caret {
    border-top-color: #555;
    border-bottom-color: #555
}

.nav>.dropdown.active>a:hover,
.nav>.dropdown.active>a:focus {
    cursor: pointer
}

.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav>li.dropdown.open.active>a:hover,
.nav>li.dropdown.open.active>a:focus {
    color: #fff;
    background-color: #999;
    border-color: #999
}

.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
    opacity: 1;
    filter: alpha(opacity=100)
}

.pagination {
    margin: 20px 0
}

.pagination ul {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
}

.pagination ul>li {
    display: inline
}

.pagination ul>li>a,
.pagination ul>li>span {
    float: left;
    padding: 4px 12px;
    line-height: 20px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-left-width: 0
}

.pagination ul>li>a:hover,
.pagination ul>li>a:focus,
.pagination ul>.active>a,
.pagination ul>.active>span {
    background-color: #f5f5f5
}

.pagination ul>.active>a,
.pagination ul>.active>span {
    color: #999;
    cursor: default
}

.pagination ul>.disabled>span,
.pagination ul>.disabled>a,
.pagination ul>.disabled>a:hover,
.pagination ul>.disabled>a:focus {
    color: #999;
    cursor: default;
    background-color: transparent
}

.pagination ul>li:first-child>a,
.pagination ul>li:first-child>span {
    border-left-width: 1px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px
}

.pagination ul>li:last-child>a,
.pagination ul>li:last-child>span {
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px
}

.tab-content {
    overflow: auto
}

.tab-content>.tab-pane,
.pill-content>.pill-pane {
    display: none
}

.tab-content>.active,
.pill-content>.active {
    display: block
}

.nav>.disabled>a {
    color: #999
}

.nav>.disabled>a:hover,
.nav>.disabled>a:focus {
    text-decoration: none;
    cursor: default;
    background-color: transparent
}

/* 問合せ */
.contact-info-table {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    color: #333;
}

.contact-list {
    font-size: 1.2em;
    margin: 20px 0;
    border-top: 1px solid #ccc;
}

/* dtとddを横並びにする */
.contact-list dt,
.contact-list dd {
    padding: 15px;
    border-bottom: 1px solid #ccc;
    margin: 0;
}

.contact-list dt {
    font-weight: bold;
    background-color: #f7f7f7;
}

.contact-list a {
    color: inherit;
    text-decoration: none;
}

.contact-list a:hover {
    text-decoration: underline;
}

/* PC表示（画面幅が広い場合） */
@media (min-width: 768px) {
    .contact-list {
        display: grid;
        /* Gridレイアウトを使用 */
        grid-template-columns: 150px 1fr;
        /* 左列を150px、右列を残り全部に */
    }

    .contact-list dt {
        border-right: 1px solid #ccc;
    }
}