@charset "utf-8";

@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

    --primary-color: #1e3369;
    /*テンプレートのメインまたはアクセントとなる色*/
    --primary-inverse-color: #fff;
    /*primary-colorの対として使う色*/

    --global-space: 5vw;
    /*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
    0% {
        left: -200px;
    }

    100% {
        left: 0px;
    }
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /*フォント種類*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    -webkit-text-size-adjust: none;
    background: #fff;
    /*背景色*/
    color: #333;
    /*文字色*/
    line-height: 2;
    /*行間*/
    animation: opa1 0.2s 0.5s both;
    /*0.5秒待機後、0.2秒かけてフェードイン表示*/
}

/*リセット*/
figure {
    margin: 0;
}

dd {
    margin: 0;
}

nav,
ul,
li,
ol {
    margin: 0;
    padding: 0;
}

nav ul {
    list-style: none;
}

input {
    font-size: 1rem;
}

/*table全般の設定*/
table {
    border-collapse: collapse;
}

/*画像全般の設定*/
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*videoタグ*/
video {
    max-width: 100%;
}

/*iframeタグ*/
iframe {
    width: 100%;
}

/*sectionが続く場合*/
section+section {
    margin-top: 10vh;
    /*sectionの上に空けるスペース*/
}

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

/*文字サイズの設定。
もしデフォルトを「大」にしたい場合は、js/fontSizeChanger.jsの中のコメント箇所を読んで下さい。
---------------------------------------------------------------------------*/
/*「大」ボタンを押した時の文字サイズ*/
html.f-large {
    font-size: 24px;
}

/*「小」ボタンを押した時の文字サイズ*/
html.f-small {
    font-size: 17px;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
    color: #333;
    /*リンクテキストの色*/
    transition: 0.3s;
    /*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}

a:hover {
    color: var(--primary-color);
    /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
    filter: brightness(1.2);
    /*マウスオン時に少し明るくする*/
}


/*container（フッター以外を囲むブロック）
---------------------------------------------------------------------------*/
#container {
    padding: 0 var(--global-space);
    /*上下、左右へのcontainer内の余白。左右の余白はcss冒頭で指定しているglobal-spaceを読み込みます*/
}


/*contents（mainを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
    padding: 3vw 0 5vw;
    /*上、左右、下へのcontents内の余白。画面幅100%＝100vwです。*/
}

/*トップページのコンテンツ*/
.home #contents {
    padding-top: calc(3vw + 40px);
    /*スライドショー上のボタンが画像下に移動するので重ならないよう適当にpxを指定しています*/
}

/*ヘッダー（ロゴや電話番号が入っている最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    display: flex;
    /*ヘッダー内にあるボックスを横並びにする*/
    justify-content: space-between;
    align-items: center;
    position: relative;
    /*文字サイズブロックを絶対配置する為に必要な指定*/
}

/*ロゴ画像*/
#logo {
    margin: 0;
    padding: 0;
}

#logo img {
    display: block;
    width: 470px;
    /*ロゴ画像の幅*/
}

/*ヘッダーの中央バナー*/
header .banner {
    _ima
    /*最大幅。これ以上広くならない。*/
    flex: 1;
    margin: 0 3vw;
    /*上下、左右へのバナーの外側へとるスペース*/
}

/*電話番号ブロック*/
address {
    font-style: normal;
    line-height: 1.2;
    /*行間を狭くする*/
    text-align: center;
    /*文字をセンタリング*/
    padding: 10px 0;
    /*上下、左右へのブロック内の余白*/
    margin-top: 70px;
    /*上に空けるスペース。文字サイズボックスに重ならないように。*/
}

/*電話番号*/
address .tel {
    font-size: 1.6rem;
    /*文字サイズを1.5倍に。*/
    color: var(--primary-color);
    /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


#mainimg {
    margin-bottom: 2rem;
}


/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size {
    background: #fff;
    /*背景色*/
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
    border-radius: 0px 0px 5px 5px;
    /*角丸のサイズ。左上、右上、右下、左下への順。*/
    display: flex;
    /*flexボックスを使う指定*/
    align-items: center;
    /*垂直揃えの指定。天地中央に配置されるように。*/
    padding: 10px 15px;
    /*ブロック内の余白。上下、左右へ。*/
    position: absolute;
    /*headerに対して絶対配置する為の指定*/
    right: 0px;
    /*右からの配置場所*/
    top: 0px;
    /*上からの配置場所*/
}

/*「文字サイズ」のテキスト*/
#f-size p {
    margin: 0;
    margin-right: 10px;
    /*右側に空けるスペース。ボタンとの間にとるスペースです。*/
    font-size: 17px;
    /*文字サイズ*/
}

/*「小」「大」を囲むブロック*/
#f-size ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /*flexボックスを使う指定*/
    align-items: center;
    /*垂直揃えの指定。天地中央に配置されるように。*/
}

/*「小」ボタン設定*/
#f-size ul li#f-small {
    margin-right: 5px;
    /*右側に空けるスペース。「大」との間の隙間です。*/
}

#f-size ul li#f-small::before {
    display: block;
    content: "小";
    /*「小」の文字を出力*/
    font-size: 17px;
    /*文字サイズ*/
    width: 40px;
    /*幅*/
    line-height: 40px;
    /*高さ*/
    text-align: center;
    /*内容をセンタリング*/
    background: #eee;
    /*背景色*/
}

/*「大」ボタン設定*/
#f-size ul li#f-large::before {
    display: block;
    content: "大";
    /*「大」の文字を出力*/
    font-size: 30px;
    /*文字サイズ*/
    width: 50px;
    /*幅*/
    line-height: 50px;
    /*高さ*/
    text-align: center;
    /*内容をセンタリング*/
    background: #eee;
    /*背景色*/
}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
    background: #810032;
    /*背景色*/
    color: #fff;
    /*文字色*/
}

/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li {
    cursor: pointer;
}




/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {
    opacity: 0;
    line-height: 1.5;
}

#menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.large-screen #menubar {
    opacity: 1;
}

.small-screen #menubar.display-none {
    display: none;
}

.small-screen #menubar.display-block {
    display: block;
    opacity: 1;
}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {
    display: none;
}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {
    display: none;
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    /*使いたいアイコン名（Font Awesome）をここで指定*/
    font-weight: bold;
    /*この手の設定がないとアイコンが出ない場合があります*/
    font-size: 0.7rem;
    /*文字サイズを70%に*/
    padding-right: 0.5rem;
    /*右側に空ける余白。0.5文字分。*/
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
    display: block;
    text-decoration: none;
    font-size: 0.9em;
}

/*小文字の英語部分*/
#menubar span {
    display: block;
    font-size: 0.7em;
    /*文字サイズを親要素の70%に*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広くとる*/
    opacity: 0.6;
    /*透明度。色が60%出た状態。*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar {
    position: sticky;
    /*画面の上部にメニューが固定される*/
    top: 0;
    z-index: 2;
    transition: opacity 0.3s;
}

/*メニューブロック全体の設定*/
.large-screen #menubar>nav>ul {
    display: flex;
    /*横並びにする*/
    justify-content: space-between;
    align-items: center;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
    flex: 1;
    /*個々のメニューを均等にし、幅いっぱいまで使う設定*/
    position: relative;
    /*ドロップダウンの幅となる基準を作っておく*/
    text-align: center;
    /*テキストをセンタリング*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
    flex: 1;
    background: var(--primary-color);
    /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(--primary-inverse-color);
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding: 0.8rem 0;
    /*上下、左右の余白*/
}

/*マウスオン時に明るくする*/
.large-screen #menubar li a:hover {
    filter: brightness(1.2);
}

.current {
    filter: brightness(1.3);
}

/*文字サイズ「大」の場合のメニューブロックを囲むボックス*/
html.f-large .large-screen #menubar {
    position: relative;
    /*メニューが２段になる為、stickyを外してスクロールさせるようにする。固定させたままがいいならこの１行を削除する。*/
}

/*文字サイズ「大」の場合のメニューブロック全体の設定*/
html.f-large .large-screen #menubar>nav>ul {
    flex-wrap: wrap;
    /*メニューを２段にする為、改行を許可する*/
}

/*文字サイズ「大」の場合のメニュー１個あたりの設定*/
html.f-large .large-screen #menubar>nav>ul>li {
    flex: auto;
    width: 33.33%;
    /*メニュー幅。３列なので33.33%*/
}


/*大きな端末用のメニューブロックが画面上部に到達した場合（fixed）
---------------------------------------------------------------------------*/
/*文字色*/
.large-screen #menubar.fixed a {
    opacity: 0.8;
    /*透明度。色を80%だけ出す。*/
}

/*マウスオン時*/
.large-screen #menubar.fixed a:hover {
    opacity: 1;
    /*透明度。色を100%出す。*/
}

/*メニューの上下の余白を狭くする*/
.large-screen #menubar.fixed2 li a {
    padding-top: 0.4rem;
    /*上の余白*/
    padding-bottom: 0.4rem;
    /*下の余白*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
    animation: opa1 0.5s 0.1s both;
    /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 100%;
    left: 0px;
}

/*ドロップダウンメニュー1個あたりの上下、左右への余白。*/
.large-screen #menubar ul ul a {
    padding: 0.6rem 1rem !important;
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
.small-screen #menubar {height: 0px;}*/

/*メニューブロック設定*/
.small-screen #menubar.display-block {
    position: fixed;
    overflow: auto;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding-top: 60px;
    /*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
    background-color: rgba(26, 26, 26, 0.85);
    animation: animation1 0.2s both;
    /*animation1を実行する。0.2sは0.2秒の事。*/
    color: var(--primary-inverse-color);
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
    border: 1px solid #fff;
    /*枠線の幅、線種、色*/
    background: var(--primary-color);
    /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    margin: 1rem 2.5rem;
    /*メニューの外側に空けるスペース*/
    border-radius: 5px;
    /*角を丸くする指定*/
}

.small-screen #menubar a {
    color: inherit;
    padding: 0.3rem 3rem;
    /*メニュー内の余白。上下、左右へ。*/
}

.small-screen #menubar li li a {
    background: var(--primary-inverse-color);
    /*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    color: var(--primary-color);
    /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
    animation: opa1 0.3s 0.5s both;
    position: fixed;
    z-index: 101;
    cursor: pointer;
    top: 2vw;
    /*上からの配置場所*/
    right: 2vw;
    /*右からの配置場所*/
    width: 50px;
    /*幅*/
    height: 50px;
    /*高さ*/
    padding: 15px;
    /*ブロック内の余白*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s;
    background: rgba(0, 0, 0, 0.6);
    /*背景色*/
}

/*以下は変更不要*/
#menubar_hdr div {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
    display: block;
    width: 100%;
    height: 2px;
    /*線の太さ*/
    background-color: #fff;
    /*線の色*/
    border-radius: 2px;
    /*コーナーを少しだけ丸く*/
    transition: all 0.5s ease-in-out;
    position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {
    top: 0;
}

#menubar_hdr div span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

#menubar_hdr div span:nth-child(3) {
    bottom: 0;
}

#menubar_hdr.ham div span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

#menubar_hdr.ham div span:nth-child(2) {
    opacity: 0;
}

#menubar_hdr.ham div span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}


/*mainブロック
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 2rem;
    /*h2の外側にとるスペース。上、左右、下への順番。*/
    font-size: 1.35rem;
    /*文字サイズ*/
    position: relative;
    /*ulineを配置する為に必要な指定*/
    font-weight: normal;
    /*デフォルトの太字を標準に*/
    border-bottom: 3px solid #ddd;
    /*薄い色の線の幅、線種、色*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広くする*/
}

/*h2のアクセントラインの設定*/
main h2 .uline {
    display: inline-block;
    position: relative;
    padding: 0.5rem 0;
    /*h2内の余白。上下、左右への順番。*/
    bottom: -3px;
    /*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
    border-bottom: 3px solid var(--primary-color);
    /*濃い色の線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
}

/*右側の装飾文字の設定*/
main h2 .small {
    display: block;
    font-size: 0.6em;
    /*文字サイズを親要素の60%に*/
    opacity: 0.5;
    /*透明度。色が50%出た状態。*/
}

/*h2のテキストをセンタリングする場合*/
main h2.c {
    display: block;
    border: none;
    /*下線を非表示に*/
    text-align: center;
    /*テキストをセンタリング*/
    font-size: 1.7rem;
    /*文字サイズを1.7倍に*/
    font-style: oblique;
    color: #4B5C87;
}

/*h3見出し*/
main h3 {
    font-size: 1.3rem;
    /*文字サイズ*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広くする*/
    font-weight: normal;
    /*デフォルトの太字を標準に*/
}

main h3::first-letter {
    border-left: 3px solid var(--primary-color);
    /*左側のアクセント用ラインの幅、線種、色*/
    padding-left: 10px;
}


/*フッター共通
---------------------------------------------------------------------------*/
#footer-contents,
#footermenu {
    padding: 2rem var(--global-space);
    /*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}


/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
    background: #6a6462;
    /*背景色*/
    color: #fff;
    /*文字色*/
}

#footer-contents a {
    color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
    margin-bottom: 50px;
    /*下に空けるスペース*/
}





/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
    position: relative;
    overflow: hidden;
}

.iframe-box iframe {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
    background: #363332;
    /*背景色*/
    color: #fff;
    /*文字色*/
    font-size: 0.8rem;
    /*文字サイズ。*/
}



/*ボックス内のリンクテキスト設定*/
#footermenu a {
    text-decoration: none;
    color: inherit;
}

/*ulタグ（メニューの１列あたり）*/
#footermenu ul {
    margin: 0;
    list-style: none;
    padding: 0 0.3em;
    flex: 1;
}

/*メニューの見出し(title)*/
#footermenu .title {
    font-weight: bold;
    /*太字にする*/
    color: #9E9391;
    /*文字色*/
    padding-top: 15px;
    padding-bottom: 1px;
    /*下に空けるスペース*/
}


/*フッター設定
---------------------------------------------------------------------------*/
small {
    font-size: 100%;
}

footer {
    font-size: 0.7rem;
    /*文字サイズ*/
    background: #1d1b1b;
    /*背景色*/
    color: #fff;
    /*文字色*/
    text-align: center;
    /*内容をセンタリング*/
    padding: 1rem;
    /*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {
    color: inherit;
    text-decoration: none;
}

/*著作部分*/
footer .pr {
    display: block;
}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-self: center;
    gap: 1rem;
    /*アイコン同士のマージン的な要素。１文字分。*/
}

.icons i {
    font-size: 40px;
    /*アイコンサイズ*/
}


/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
    border-radius: 3px;
    /*枠を角丸にする指定*/
    margin-bottom: 1rem;
    /*下に空けるスペース*/
    background: #fff;
    /*背景色*/
    border: 1px solid #ccc;
    /*枠線の幅、線種、色*/
    text-indent: -2rem;
    /*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
    padding: 0.5rem 1em 0.5rem 3em;
    /*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
    font-family: "Font Awesome 6 Free";
    /*Font Awesomeを使う指定*/
    content: "\f059";
    /*アイコンのコード*/
    padding-right: 1rem;
    /*アイコンとテキストとの間のスペース*/
    color: var(--primary-color);
    /*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*回答*/
.faq dd {
    padding: 0 1rem 1rem 3rem;
    /*ボックス内の余白。上、右、下、左への順番。*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
    cursor: pointer;
    /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*list-half（左右にわかれたボックス）
---------------------------------------------------------------------------*/
/*画像ブロック*/
.list-half .image {
    width: 80vw;
    /*幅。60%。*/
    margin: 0 auto;
    /*画像を中央に配置*/
    padding: 5vw 0;
    /*上下、左右への余白。画像の上下に隙間をあけます。*/
}




/*画像の影のスタイル*/
.list-half .shadow1 {
    box-shadow: -3.5vw 3.5vw 0 rgba(0, 0, 0, 0.05);
}

/*reverseの場合の影*/
.list-half.reverse .shadow1 {
    box-shadow: 3.5vw 3.5vw 0 rgba(0, 0, 0, 0.05);
}


/*list-grid1
---------------------------------------------------------------------------*/
.list-grid1 .list {
    display: grid;
    margin-bottom: 0.2rem;
    /*下に空けるスペース 1rem */
}

/*ボックス内のp要素*/
.list-grid1 .list p {
    font-size: 0.9rem;
    /*文字サイズを85%に*/
    line-height: 2;
    /*行間を狭くする*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
    padding: 1rem;
    /*ボックス内の余白。１文字分。*/
    background: #fff;
    /*背景色*/
    grid-template-rows: auto 1fr auto;
    /*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
    /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
    margin-bottom: 3rem;
    /*画像の下に空けるスペース*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure {
    margin: -0.6rem;
    /*画像を枠いっぱいに表示させる為に上の「.list-grid1 .list」のpadding分をネガティブマーインで指定*/
    margin-bottom: 0.5rem;
    /*画像の下に空けるスペース*/
}




/*ボタン（btn）
---------------------------------------------------------------------------*/
.btn a {
    display: block;
    text-decoration: none;
    font-size: 0.85rem;
    text-align: center;
    /*テキストをセンタリング*/
    background: var(--primary-color) !important;
    /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(--primary-inverse-color) !important;
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding: 0.4rem !important;
    /*ボタン内の余白*/
    margin-top: 1rem !important;
    /*ボタンの外（上）に空けるスペース*/
}

/*ボタン（btn2）
---------------------------------------------------------------------------*/
.btn2 a {
    display: block;
    text-decoration: none;
    font-size: 0.85rem;
    text-align: center;
    /*テキストをセンタリング*/
    background: var(--primary-color) !important;
    /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(--primary-inverse-color) !important;
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding: 0.3rem !important;
    /*ボタン内の余白*/
    margin-top: 1rem !important;
    /*ボタンの外（上）に空けるスペース*/
    border-radius: 8px;
    max-width: 280px;
}

/*ボタン（btn3）
---------------------------------------------------------------------------*/
.btn3 a {
    display: block;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    /*テキストをセンタリング*/
    background: #B70023 !important;
    /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(--primary-inverse-color) !important;
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding: 0.1rem 0.4rem !important;
    /*ボタン内の余白*/
    border-radius: 8px;
    max-width: 250px;
}

/*ボタン（btn4）
---------------------------------------------------------------------------*/
.btn4 a {
    display: block;
    text-decoration: none;
    font-size: 0.85rem;
    text-align: center;
    /*テキストをセンタリング*/
    background: #009144;
    color: var(--primary-inverse-color) !important;
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding: 0.3rem !important;
    /*ボタン内の余白*/
    margin-top: 1rem !important;
    /*ボタンの外（上）に空けるスペース*/
    border-radius: 8px;
    max-width: 280px;
}

/*ボタン（btn5）
---------------------------------------------------------------------------*/
.btn5 a {
    display: block;
    text-decoration: none;
    font-size: 0.8rem;
    text-align: center;
    /*テキストをセンタリング*/
    background: #EEE;
    color: #1E3872;
    padding: 0.2rem !important;
    /*ボタン内の余白*/
    margin-top: 0.7rem !important;
    /*ボタンの外（上）に空けるスペース*/
    border: 1px solid #999999;
    border-radius: 8px;
    max-width: 400px;
}

/*ボタン（btn6）
---------------------------------------------------------------------------*/
.btn6 a {
    display: block;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    /*テキストをセンタリング*/
    background: rgb(255, 0, 0);
    background: linear-gradient(113deg, rgba(255, 0, 0, 1) 0%, rgba(30, 51, 105, 1) 12%, rgba(30, 51, 105, 1) 88%, rgba(255, 0, 0, 1) 100%);
    color: var(--primary-inverse-color) !important;
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding: 0.1rem 0.4rem !important;
    /*ボタン内の余白*/
    border-radius: 8px;
    max-width: 500px;
    margin-top: -30px;
    margin-bottom: -30px;
}

.btn7 a {
    display: inline-block;
    padding: 5px 24px;
    background-color: #008740;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

.btn7 a:hover {
    background-color: #00A54F;
}


.check_finish_btn {
    text-align: center;
    margin-bottom: 30px;
}


/*ボタン（btn_maru）
---------------------------------------------------------------------------*/
.btn_maru a {
    border-radius: 100px;
    display: block;
    align-items: center;
    width: 300px;
    padding: 1px;
    background: #f1e767;
    background: -webkit-gradient(linear, left top, left bottom, from(#F9FFFC), to(#EAFFED));
    background: -webkit-linear-gradient(top, #F9FFFC 0%, #EAFFED 100%);
    background: linear-gradient(to bottom, #F9FFFC 0%, #EAFFED 100%);
    border: 1px solid #0F720F;
    color: #0F720F;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    font-size: 1.2rem;
    font-weight: 600;

    box-shadow: inset 5px 30px 20px rgba(255, 255, 255, 0.5),
        0 6px 10px rgba(0, 0, 0, 0.2);
}




/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
    position: relative;
    background: #fcf8ea;
    /*背景色*/
    padding-top: 5vw;
    /*ボックス内の上に空ける余白。お好みで調整して下さい。*/
    padding-bottom: 5vw;
    /*ボックス内の下に空ける余白。お好みで調整して下さい。*/
    /*margin-top: 10vw;		ボックス外の上に空ける余白。お好みで調整して下さい。*/
    /*margin-bottom: 10vw;	ボックス外の下に空ける余白。お好みで調整して下さい。*/

    /*以下は変更不要*/
    margin-left: calc(-1 * var(--global-space));
    margin-right: calc(-1 * var(--global-space));
    padding-left: var(--global-space);
    padding-right: var(--global-space);
}

.bg1 a {
    color: inherit;
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
    background: rgba(0, 0, 0, 0.03);
    /*背景色。0,0,0は黒のことで0.02は色が2%出た状態。*/
    overflow: hidden;
    margin-bottom: 4rem;
    /*ブロックの下に空けるスペース。4文字分。*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
.new dt:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.05);
}

.new dd:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.05);
}

.new dd a {
    display: inline-block;
    text-align: center;
    margin-left: 1em;
    line-height: 1.1em;
    /*行間（アイコンの高さ）*/
    border-radius: 3px;
    /*角を丸くする指定*/
    padding: 0.4rem 0.7rem;
    /*上下、左右へのブロック内の余白*/
    width: 15rem;
    /*幅。25文字分。*/
    transform: scale(0.95);
    /*95%のサイズに縮小*/
    background: #213D75;
    /*背景色*/
    color: #FFF;
    /*文字色*/
}


/*日付(dt)設定*/
.new dt {
    padding: 0.2rem 1rem 0;
    /*dt内の余白。上、左右、下への順番。*/
    font-size: 0.9em;
    /*文字サイズ*/
    color: #5B6887;
    /*文字色*/
}

/*記事(dd)設定*/
.new dd {
    padding: 0 2rem 0.8rem;
    /*dd内の余白。上、左右、下への順番。*/
    font-size: 1.1em;
    /*文字サイズ*/
    font-weight: 500;
}


/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
    display: none;
    /*非表示に変更した。再表示させたいなら　inline-block　に変更＆449Px以下で非表示は別途設定あり*/
    text-align: center;
    margin-left: 1em;
    line-height: 1;
    /*行間（アイコンの高さ）*/
    border-radius: 3px;
    /*角を丸くする指定*/
    padding: 0.2rem 0.5rem;
    /*上下、左右へのブロック内の余白*/
    width: 5rem;
    /*幅。5文字分。*/
    transform: scale(0.9);
    /*85%のサイズに縮小*/
    background: #FFF;
    /*背景色*/
    color: #8C8C8C;
    /*文字色*/
    border: 1px solid #8C8C8C;
    /*枠線の幅、線種、色*/
}

/*icon-bg1*/
.new .icon-bg1 {
    background: var(--primary-color);
    /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(--primary-inverse-color);
    /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    border-color: transparent;
    /*枠線を出したくないので透明にする*/
}

/* 「種類」ラベル：黄色背景に濃い茶色文字 */
.kind-label {
    display: inline-block !important;
    background-color: #FFBA14 !important;
    /* 背景：黄色 */
    color: #5d4037 !important;
    /* 文字：濃い茶色 */
    font-size: 0.75em !important;
    font-weight: bold !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    border: none !important;
    /* 枠線を消す */
    width: auto !important;
    /* 幅を自動調整 */
    transform: none !important;
    /* 縮小を解除 */
    line-height: 1.4 !important;
}

/* 種類が空の時は表示しない（念のため） */
.kind-label:empty {
    display: none;
}

/* 種類ラベルだけは強制的に表示する */
.new dt span.kind-label {
    display: inline-block !important;
}




/*2・3カラム（main-contents、sub-contents設定）
---------------------------------------------------------------------------*/
/*main-contentsブロック*/
.main-contents {
    margin-bottom: 10vw;
    /*ボックスの下に空けるスペース_3*/
}




/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
    margin-bottom: 0.1rem;
    font-size: 0.8em;
}


.sub-contents h3::first-letter {
    border-left: 3px solid var(--primary-color);
    /*左側のアクセント用ラインの幅、線種、色*/
    padding-left: 10px;
    margin-left: 10px;
}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
    padding: 0;
    margin: -18px 0 0.1rem;
    /*上、左右、下へのマージン*/
}



/*メニュー１個あたり*/
.submenu a {
    display: block;
    text-decoration: none;
    padding: 0.5rem 0.5rem;
    /*上下、左右へのメニュー内の余白*/

}

/*メニュー１個あたり（子メニュー以外）*/
.submenu li {
    padding: 0 0.1rem 0.5rem;
    /*上、左右、下へのメニュー内の余白*/
    border-radius: 5px;
    margin-bottom: 20px;
    background-image: linear-gradient(25deg, rgba(225, 238, 250, 1), rgba(255, 255, 255, 1) 39%, rgba(225, 238, 250, 1));
}

/*子メニュー*/
.submenu li li a {
    padding-left: 2rem;
    /*左に余白を空ける*/
}


/*box1
---------------------------------------------------------------------------*/
.box1 {
    padding: 1rem;
    /*ボックス内の余白*/
    margin-bottom: 1rem;
    /*ボックスの下に空けるスペース*/
    background: rgba(0, 0, 0, 0.05);
    /*背景色*/
    border: solid 1px #ccc;
    /*線の線種、幅、色*/
    box-shadow: 0px 0px 1px 1px #fff inset;
    /*ボックスの影。右へ、下へ、ぼかし幅、距離。#fffは白のことでinsetは内側へ向けての影の指定。*/
}

/*box1内のsubmenuの下マージンをなくす*/
.box1 .submenu {
    margin-bottom: 0;
}

.box2 {
    padding: 40px 10px 10px 10px;
    /*ボックス内の余白*/

    margin-bottom: 15px;
    /*ボックスの下に空けるスペース*/
    background: #FFF;
    /*背景色*/
    border-top: solid 3px #dbdbdb;
    /*線の線種、幅、色*/
}


.box2 h3 {
    font-size: 90%;
}

.sidemenu {
    margin-bottom: 20px;
}

.side_img {
    width: 50%;
    margin: 0 auto;
}



/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
    max-width: 1000px;
    /*最大幅*/
    margin: 0 auto 1rem;
    /*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
    text-align: center;
    /*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
    display: flex;
    /*flexを使う指定*/
    justify-content: center;
    /*並びかたの種類の指定。これはセンタリングする指定。*/
    margin-bottom: 2rem;
    /*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail-parts img {
    width: 100px;
    /*サムネイルの幅*/
    margin: 2px;
    /*サムネイル間のスペース*/
    cursor: pointer;
    /*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
    transition: 0.3s;
    /*マウスオンまでにかける時間。3秒。*/
}

.thumbnail-parts img:hover {
    opacity: 0.8;
    /*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
.ta1 caption {
    font-size: 1.5em;
    font-weight: 600;
}


/*ta1テーブルブロック設定*/
.ta1 {
    table-layout: fixed;
    border-top: 1px solid #999;
    /*テーブルの一番上の線。幅、線種、色*/
    width: 100%;
    /*幅*/
    margin-bottom: 1rem;
    /*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
    border-bottom: 1px solid #999;
    /*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th,
.ta1 td {
    padding: 1rem;
    /*ボックス内の余白*/
    word-break: break-all;
    /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
    width: 30%;
    /*幅*/
    text-align: center;
    /*中央配置にする*/
    background: #eee;
    /*背景色*/
}

.ta1 ul {
    margin-left: -1.7em;
}

.small_gr2 {
    display: inline-block;
    font-size: 0.85em;
    color: #565656;
    margin-left: 1.2em;
}

.small_gr2_n {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    color: #233F7F;
}

.small_gr3 {
    display: inline-block;
    font-weight: 600;
    color: #595959;
    border-bottom: 1px dashed #999;
    margin-bottom: 1.5em;
}

.fs_09 {
    font-size: 0.9em;
}

/*テーブル（ta2）サブブロックの受付テーブルに使用。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
    font-weight: bold;
    /*太字に*/
    padding: 0.2rem 1rem;
    /*ボックス内の余白*/
    text-align: left;
    /*左よせにする*/
    font-size: 110%;
    background: #D3E3FD;
    /*背景色*/
    color: #222;
    /*文字色*/
    border: 1px solid #999;
    /*テーブルの下線。幅、線種、色*/
    margin-bottom: 0.1rem;
    /*下に空けるスペース*/
    border-radius: 3px;
    /*角を丸くする指定*/
}

/*ta2設定*/
.ta2 {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 2rem;
    /*テーブルの下に空けるスペース*/
    text-align: right;
    /*センタリング*/
    padding-right: 15px;
    background: #fff;
    /*背景色*/
    color: #333;
    /*文字色*/
}

.ta2,
.ta2 td,
.ta2 th {
    word-break: break-all;
    border: 1px solid #ccc;
    /*テーブルの枠線の幅、線種、色*/
}

/*品目名*/
.ta2 th {
    width: 65%;
    /*幅*/
    background: #eee;
    text-align: left;
    /*左よせにする*/
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}


/*テーブルを小さな端末で横スクロールさせる為の準備
---------------------------------------------------------------------------*/
/*テーブルを囲むブロック*/
.ta-box {
    overflow-x: auto;
    margin-bottom: 1rem;
}

/*ブロック内にあるta2のみ最小幅を設定*/
.ta-box .ta2 {
    min-width: 600px;
}

/*テーブル（ta3））
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3 caption {
    font-weight: bold;
    /*太字に*/
    padding: 0.4rem 2rem;
    /*ボックス内の余白*/
    text-align: left;
    /*左よせにする*/
    font-size: 120%;
    background: #EEEEEE;
    /*背景色*/
    color: #222;
    /*文字色*/
    border: 1px solid #999;
    /*テーブルの下線。幅、線種、色*/
    margin-bottom: 1rem;
    /*下に空けるスペース*/
    border-radius: 5px;
    /*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta3 {
    table-layout: fixed;
    border-top: 1px solid #999;
    /*テーブルの一番上の線。幅、線種、色*/
    width: 100%;
    /*幅*/
    margin-bottom: 1rem;
    /*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta3 tr {
    border-bottom: 1px solid #999;
    /*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta3 th,
.ta3 td {
    padding: 1rem;
    /*ボックス内の余白*/
    word-break: break-all;
    /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta3 th {
    width: 15%;
    /*幅*/
    text-align: right;
    /*右よせにする*/
    background: #eee;
    /*背景色*/
}




/*テーブル（ta4）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta4 caption {

    font-weight: 800;
    /*太字に*/
    padding: 0.4rem 1.2rem;
    /*ボックス内の余白*/
    text-align: center;
    /*左よせにする*/
    letter-spacing: 0.08em;
    line-height: 1.2em;
    font-size: 1.2em;
    color: #4D4D4D;
    /*文字色*/
    background-image: repeating-radial-gradient(rgba(255, 255, 255, 0) 20px, rgba(200, 250, 255, 0.5) 35px, rgba(255, 255, 255, 0) 44px, rgba(173, 211, 255, 0.5) 60px), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.6) 20px, rgba(238, 238, 238, 1) 40px, rgba(240, 250, 255, 0.6) 40px, rgba(255, 255, 255, 1) 60px);
    border-top: 1px dashed #999;
    /*テーブルの枠線。幅、線種、色*/
    border-bottom: 1px dashed #999;
    /*テーブルの枠線。幅、線種、色*/
    margin-top: -10px;
    margin-bottom: -30px;
    /*下に空けるスペース*/
}


/*ta1テーブルブロック設定*/
.ta4 {
    table-layout: fixed;
    border-top: 1px solid #999;
    /*テーブルの一番上の線。幅、線種、色*/
    width: 100%;
    /*幅*/
    margin-bottom: 1rem;
    /*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta4 tr {
    border-bottom: 1px solid #999;
    /*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta4 th,
.ta4 td {
    padding: 1rem;
    /*ボックス内の余白*/
    word-break: break-all;
    /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta4 th {
    width: 30%;
    /*幅*/
    text-align: center;
    /*中央配置にする*/
    background: #eee;
    /*背景色*/
}

.ta4 ul {
    margin-left: -1.7em;
}

/*テーブル（ta4_pink）
---------------------------------------------------------------------------*/
.ta4_pink caption {
    font-weight: 800;
    /*太字に*/
    padding: 0.4rem 1.2rem;
    /*ボックス内の余白*/
    text-align: center;
    /*中央揃えにする*/
    letter-spacing: 0.08em;
    line-height: 1.2em;
    font-size: 1.2em;
    color: #4D4D4D;
    /*文字色*/
    background-image: radial-gradient(circle, rgba(251, 255, 241, 1) 70%, rgba(255, 236, 224, 1) 90%, rgba(255, 92, 92, 1));
    border-top: 1px dashed #999;
    /*テーブルの枠線。幅、線種、色*/
    border-bottom: 1px dashed #999;
    /*テーブルの枠線。幅、線種、色*/
    margin-top: -10px;
    margin-bottom: -30px;
    /*下に空けるスペース*/
}


/*ta1テーブルブロック設定*/
.ta4_pink {
    table-layout: fixed;
    border-top: 1px solid #999;
    /*テーブルの一番上の線。幅、線種、色*/
    width: 100%;
    /*幅*/
    margin-bottom: 1rem;
    /*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta4_pink tr {
    border-bottom: 1px solid #999;
    /*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta4_pink th,
.ta4_pink td {
    padding: 1rem;
    /*ボックス内の余白*/
    word-break: break-all;
    /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta4_pink th {
    width: 30%;
    /*幅*/
    text-align: center;
    /*中央配置にする*/
    background: #eee;
    /*背景色*/
}

.ta4_pink ul {
    margin-left: -1.7em;
}




/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
    display: block;
}

/*ボタンの設定*/
.pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 99;
    position: fixed;
    /*スクロールに追従しない(固定で表示)為の設定*/
    right: 20px;
    /*右からの配置場所指定*/
    bottom: 20px;
    /*下からの配置場所指定*/
    color: #fff;
    /*文字色*/
    font-size: 1.5rem;
    /*文字サイズ*/
    background: rgba(0, 0, 0, 0.2);
    /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
    width: 60px;
    /*幅*/
    line-height: 60px;
    /*高さ*/
    border-radius: 50%;
    /*円形にする*/
}



.details-summary {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.75em;
    margin: 0.5em 1em 1.2em 2em;
    max-width: 150px;
    padding: 1px 3px;
    color: #333;
    font-family: "Noto Sans Japanese";
    text-decoration: none;
    color: #333;
    line-height: 1.3;
    transition: 0.3s ease-in-out;
    background: #eee;
    border-radius: 9999px;
    border-bottom: 2px solid #999;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);

    &:hover {
        color: #fff;
        background: #999;
        border-bottom: 2px solid #fff;
        transform: translateY(3px);
    }
}






/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.color-check,
.color-check a {
    color: #ff0000 !important;
}

.l {
    text-align: left !important;
}

.c {
    text-align: center !important;
}

.r {
    text-align: right !important;
}

.ws {
    width: 95%;
    display: block;
}

.wl {
    width: 90%;
    max-width: 450px;
    margin-bottom: 1.5em;
    display: block;
}

.mb0 {
    margin-bottom: 0px !important;
}

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

.look {
    display: inline-block;
    padding: 0px 10px;
    background: #eee;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 5px 0;
    word-break: break-all;
}

.small_a {
    font-size: 0.75em;
}

.small_b {
    font-size: 0.7em;
    line-height: normal;
}

.small_red {
    font-size: 0.75em;
    color: #E80000;
}

.small_v {
    font-size: 0.85em;
}

.small_gr {
    font-size: 0.85em;
    color: #565656;
}

.small_gr_c {
    display: block;
    font-size: 0.8em;
    color: #8C8C8C;
    text-align: right;
    margin-top: -1em;
}

.small_gr_ul {
    font-size: 0.85em;
    color: #FFF;
    border-radius: 10px;
    background-color: #233F7F;
    padding: 5px 20px 5px;
    margin-bottom: 30px;
}

.small_gr_ul_b {
    font-size: 0.85em;
    color: #FFF;
    border-radius: 10px;
    background-color: #737373;
    padding: 5px 20px 5px;
    margin-bottom: 30px;
}

.small_red_ulg {
    font-size: 0.75em;
    color: #FFF;
    font-weight: 600;
    border-radius: 10px;
    background-color: #737373;
    padding: 2px 10px 2px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.small_red_aka {
    font-size: 0.75em;
    color: #FFF;
    font-weight: 600;
    border-radius: 10px;
    background-color: #B70023;
    padding: 2px 10px 2px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.small_ulb {
    font-size: 0.9em;
    color: #FFF;
    font-weight: 600;
    border-radius: 10px;
    background-color: #32436E;
    padding: 2px 10px 2px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.small_grey_ul {
    font-size: 1em;
    color: #0D0D0D;
    text-align: center;
    border-radius: 10px;
    background-color: #CCCCCC;
    padding: 30px 30px 5px;
    margin-bottom: 30px;
}

.close-btn {
    display: block;
    margin: 15px auto;
    padding: 2px 15px;
    background: #fff;
    color: #373737;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.m_50 {
    margin-bottom: 0.8em;
}

.small_75 {
    font-size: 0.75em;
}

.small_85 {
    font-size: 0.85em;
}

.small_90 {
    font-size: 0.9em;
}

.small_90_h {
    font-size: 0.9em;
    margin-left: 2.4em;
    letter-spacing: 0.1em;
}

.small_90g {
    font-size: 0.9em;
    color: #7A7A7A;
}

.large {
    font-size: 2em;
    letter-spacing: 0.1em;
}

.large_time {
    font-size: 1.2em;
    font-weight: 500;
}

.large_date {
    font-size: 1.6em;
    font-weight: 600;
}

.large_blue {
    font-size: 1.2em;
    color: #1D3266;
    font-weight: 600;
}

.pc {
    display: none;
}

.dn {
    display: none !important;
}

.block {
    display: block !important;
}

.tel_cap {
    font-size: 0.5em;
    text-indent: 5.5em;
    text-align: center;
    letter-spacing: 0.1em;
}

.f_8c {
    color: #8C8C8C
}

.f_233_09 {
    color: #0054AD;
    font-size: 1.1em;
    font-weight: 600;
}

.f_233_10 {
    color: #6E4A20;
    font-size: 1.1em;
    font-weight: 600;
}

ul {
    padding-left: 30px;
}

li {
    list-style: none;
}

.try {
    list-style: '▶ ';
}

.disk {
    list-style: '● ';
}

.ten {
    list-style: disc;
    margin-left: 1em;
}

.f_hatena {
    color: #686868;
    font-size: 1.1em;
}

.f_ao {
    color: #1540C2;
}

.f_l-ao {
    color: #3563BF;
}

.f_kon {
    color: #32436E;
}

.f_kon_s {
    color: #30426D;
    font-size: .8em;
}

.f_aka {
    color: #B70023;
}

.f_aka_stroke {
    color: #B70023;
    text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.f_aka_s {
    color: #B70023;
    font-size: .85em;
}

.f_gpink_s {
    color: #8E3849;
    font-size: .8em;
}

.f_l-midori {
    color: #00582A;
}

.f_l-gr {
    color: #384770;
}

.f_l-gr_s {
    color: #808080;
    font-size: 0.8em;
}

.f_kayou {
    color: #799B66;
}

.f_mokuyou {
    color: #8BA4BB;
}

.f_doyou {
    color: #B58F52;
}

.f_line {
    color: #19B828;
}

.f_w600 {
    font-weight: 600;
}

.f_w600g {
    font-weight: 600;
    color: #009144
}

.f_w600r {
    font-weight: 600;
    color: #DD0000
}

hr.style-three {
    margin-top: 1.6em;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(35, 63, 127, 1), rgba(35, 63, 127, 0));
}

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0));
}

hr.style-one {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

hr.style-double {
    border-top: 3px double;
}

hr.style-dashed {
    border-top: 1px dashed;
    width: 70%;
    margin-left: 10px;
}


#info_date {
    color: #ADADAD;
    font-size: 1em;
    margin-top: 1.5em;
    text-align: right;
}

#info_date:before {
    content: "《 ";
}

#info_date:after {
    content: " 更新 》";
}

#info_contents {
    font-size: 1em;
}

.info_gazou {
    size: 100%;
}

.muneCap {
    margin-top: -1em;
    font-size: 0.9em;
}

.thumbnail-slide {
    margin-top: 80px;
    margin-bottom: 1px;
}

.info_image {
    width: 35%;
}

.btn--orange,
a.btn--orange {
    color: #fff;
    background-color: #eb6100;
}

.btn--orange:hover,
a.btn--orange:hover {
    color: #fff;
    background: #f56500;
}

.nobreak {
    display: inline-block;
}

.nobreak_center {
    display: inline-block;
}

.bg_p {
    background-color: #FFEFF2;
}

/* 文字の上に点 */
.dots {
    background-image: radial-gradient(circle at center, #B70023, transparent 30%);
    /* 点の色とサイズ調整 */
    background-position: top right;
    /* 点の位置 */
    background-repeat: repeat-x;
    /* 横方向に繰り返し */
    background-size: 1em 0.4em;
    /* 点の間隔とサイズ調整 */
    padding-top: .2em;
    /* 縦方向の位置調整 */
}

.dots_2 {
    background-image: radial-gradient(circle at center, #B70023, transparent 30%);
    /* 点の色とサイズ調整 */
    background-position: top right;
    /* 点の位置 */
    background-repeat: repeat-x;
    /* 横方向に繰り返し */
    background-size: 1.12em 0.38em;
    /* 点の間隔とサイズ調整 */
    padding-top: .15em;
    /* 縦方向の位置調整 */
}

.kao {
    margin: 0 15px 15px 0;
    width: 85%;
    max-width: 170px;
}

.kao_name {
    display: block;
    text-align: center;
    width: 85%;
    max-width: 170px;
}

.credit {
    display: block;
    width: 87%;
    margin: 80px auto 30px;
    text-align: left;
}



/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
    #footer-contents {
        display: flex;
        /*flexボックスを使う指定*/
        gap: 2rem;
        /*左右のボックスの間のマージン的な設定*/
    }


    /*左側のブロック*/
    #footer-contents .left {
        margin-bottom: 0;
        /*下のマージン（外側への余白）をリセット*/
        width: 55%;
        /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
    }

    /*右側のブロック*/
    #footer-contents .right {
        width: 45%;
        /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
    }

    /*カラムで使う為の指定*/
    main.column {
        display: flex;
        /*横並びにする*/
        justify-content: space-between;
        /*並びかたの種類の指定*/
        gap: 3vw;
        /*main-contentsとsub-contentsの間のマージン的な隙間*/
    }

    /*main-contentsブロック*/
    .main-contents {
        margin-bottom: 0;
        order: 1;
        /*並び順。数字の小さい順番に表示されます。*/
        flex: 1;
    }

    /*sub-contentsブロック共通*/
    .sub-contents {
        width: 220px;
        /*幅。お好みで変更して下さい。*/
        margin-top: 70px;
    }

    /*1つ目のsub-contents*/
    .sub-contents:nth-child(2) {
        order: 2;
        /*並び順。数字の小さい順番に表示されます。*/
    }

    .side_img {
        width: 100%;
    }

    /*th（左側）のみの設定*/
    .ta1 th {
        width: 23%;
    }

    /*幅*/
    /*th（左側）のみの設定*/
    .ta3 th {
        width: 8%;
        /*幅*/
    }

    .ws {
        width: 48%;
        display: inline;
    }

    .sh {
        display: none;
    }

    .pc {
        display: block;
    }

    .ta1 caption {
        font-size: 1.6em;
        font-weight: 600;
        margin-bottom: .1em;
    }

}

/*画面幅900px以上の追加指定ここまで*/


/*画面幅900px以下の追加指定ここから*/
@media screen and (max-width:900px) {

    /*ヘッダーブロック*/
    header {
        flex-direction: column;
        /*ヘッダー内にあるボックスを縦並びにする*/
    }

    /*ロゴ画像*/
    #logo img {
        margin-top: 20px;
        /*ロゴの上に空けるスペース*/
    }

    /*電話番号ブロック*/
    address {
        margin-top: 0;
        /*マージンのリセット*/
    }

    /*ボタンブロック全体*/
    #f-size {
        right: 60px;
        /*右からの配置場所の上書き。３本バー（ハンバーガー）アイコンが出てくるの重ならないようにする。*/
    }

    /*ボタンブロック全体*/
    #f-size {
        display: none;
        /*スペースが狭くなるので非表示に*/
    }

    .sub-contents {
        margin-top: 100px;
    }

    .sub-contents h3 {
        font-size: 1.1em;
    }

    .naka {
        text-align: center;
    }

}

/*画面幅900px以下の追加指定ここまで*/



/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

    /*listブロック全体を囲むブロック*/
    .list-grid1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 1rem;
        /*ブロックの間に空けるマージン的な指定*/
    }

    /*ボックス１個あたり*/
    .list-grid1 .list {
        margin-bottom: 0;
        /*下に空けるスペースをなくす*/
    }

    .info_gazou {
        width: 75%;
    }

}

/*追加指定ここまで*/


@media screen and (max-width:799px) {

    /*ボックス１個あたり*/
    .list-grid1 .list {
        display: grid;
        margin-bottom: 1rem;
        /*下に空けるスペース 1rem */
        width: 92%;
        margin: auto;
    }

    .list-grid1 .list {
        padding: 1rem;
        /*ボックス内の余白。１文字分。*/
        background: #fff;
        /*背景色*/
        grid-template-rows: auto 1fr auto;
        /*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
        box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
        /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
        margin-bottom: 3rem;
        /*画像の下に空けるスペース*/
    }
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

    /*ブロック全体*/
    .new {
        display: grid;
        /*gridを使う指定*/
        grid-template-columns: auto 1fr;
        /*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
    }

    /*日付(dt)設定*/
    .new dt {
        padding: 0.5rem 0 0.5rem 2rem;
        /*dt内の余白。上、右、下、左への順番。*/
    }

    /*記事(dd)設定*/
    .new dd {
        padding: 0.5rem 0 0.5rem 2rem;
        /*dd内の余白。上、右、下、左への順番。*/
        font-size: 0.9em;
        /*文字サイズ*/
    }

    .ta3 th {
        font-size: 120%;
    }

    .ta1 th {
        font-size: 120%;
    }

}

/*画面幅700px以上の追加指定ここまで*/


/*画面幅601px以上の追加指定*/
@media screen and (min-width:601px) {

    /*ボックス全体*/
    .list-half {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5vw;
        /*左右の間に空けるマージン的な要素*/
        position: relative;
    }

    /*テキストブロック*/
    .list-half .text {
        flex: 1;
    }

    /*画像ブロック*/
    .list-half .image {
        padding: 0;
        /*余白をリセット*/
        width: 20vw;
        /*幅。40%。*/
    }

    /*左右を入れ替える場合用*/
    .list-half.reverse {
        flex-direction: row-reverse;
    }

    .small_v {
        font-size: 0.9em;
    }

    .sashie_img {
        max-width: 300px;
    }

    .nobreak_center {
        margin-left: 5em;
    }

}

/*画面幅600px以上の追加指定ここまで*/

/*画面幅600px以下の追加指定*/
@media screen and (max-width:600px) {
    .side_img {
        width: 85%;
    }

    .sd_70 {
        font-size: 0.7em;
    }

    .muneCap {
        font-size: 1.1em;
        line-height: 2em
    }

    .info_image {
        width: 60%;
    }
}

.sashie_img {
    width: 95%;
}

/*画面幅600px以下の追加指定ここまで*/


@media screen and (max-width:449px) {
    .submenu {
        padding: 0;
        margin: 0 0 0.1rem;
        /*上、左右、下へのマージン*/
    }

    /*メニュー１個あたり*/
    .submenu a {
        display: block;
        text-decoration: none;
        padding: 0.5rem 0.1rem;
        /*上下、左右へのメニュー内の余白*/

    }

    /*メニュー１個あたり（子メニュー以外）*/
    .submenu li {
        padding: 0 0 0.5rem;
        /*上、左右、下へのメニュー内の余白*/
    }

    /*日付の横のマーク（共通設定）*/
    .new dt span {
        display: none;
        /*小さな端末では非表示にしておく。*/
    }
}


@media screen and (min-width:480px) {
    #footermenu {
        display: flex;
        /*flexボックスを使う指定*/
        justify-content: flex-start;
        /*並びかたの種類の指定*/
        align-items: flex-start;
        /*垂直揃えの指定。上に配置されるように。*/
    }
}

/*画面幅400px以下の追加指定*/
@media screen and (max-width:400px) {

    /*ロゴ画像*/
    #logo img {
        width: 350px;
        /*ロゴ画像の幅*/
    }

}

/*追加指定ここまで*/

/* 横幅701以上で見たときは"cpc"のclassがついた画像が表示される */
.cpc {
    display: block !important;
}

.csp {
    display: none !important;
}

/* 横幅700以下で見たときは"csp"のclassがついた画像が表示される */
@media only screen and (max-width: 700px) {
    .cpc {
        display: none !important;
    }

    .csp {
        display: block !important;
    }
}


.item_icon {
    width: 80%;
}


@media screen and (max-width: 1100px) {
    .item_icon {
        width: 100%;
    }
}


.gazou {
    width: 65%
}

.gazou_20 {
    width: 20%
}

@media only screen and (max-width: 700px) {
    .gazou {
        width: 100%
    }

    .gazou_20 {
        width: 30%
    }
}

.side_cap_s {
    margin: 0.5em 1.8em 0;
    font-size: 0.8em;
}


*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}


.btn_q,
a.btn_q,
button.btn_q {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
}

a.btn-rounded {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    padding: 35px 0;
    border-radius: 50%;
    background: #fcfff4;
    background: -webkit-gradient(linear,
            left top,
            left bottom,
            from(#fcfff4),
            color-stop(40%, #dfe5d7),
            to(#b3bead));
    background: -webkit-linear-gradient(top,
            #fcfff4 0%,
            #dfe5d7 40%,
            #b3bead 100%);
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    -webkit-box-shadow: inset 5px 30px 20px rgba(255, 255, 255, 0.5),
        0 6px 10px rgba(0, 0, 0, 0.2);
    box-shadow: inset 5px 30px 20px rgba(255, 255, 255, 0.5),
        0 6px 10px rgba(0, 0, 0, 0.2);
}

a.btn-rounded i {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a.btn-rounded:hover {
    -webkit-box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),
        0 3px 7px rgba(0, 0, 0, 0.2);
    box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),
        0 3px 7px rgba(0, 0, 0, 0.2);
}

a.btn-rounded:hover i {
    bottom: 6px;
}

.fa-position-bottom {
    position: absolute;
    bottom: 1rem;
    left: calc(50% - 0.5rem);
}


a.btn_17 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: relative;
    width: 60%;
    margin: auto;
    padding: .2rem 1rem;
    font-weight: bold;
    border-radius: 0.3rem;
    border: 2px dashed #60A3D1;
    color: #004C7F;
    box-shadow: 5px 5px 0 #548EB7;
    transition: 0.3s ease-in-out;
}

a.btn_17:hover {
    box-shadow: 0 0 0;
    transform: translate(5px, 5px);
    color: #2175AD;
}

a.btn_18 {
    display: block;
    text-align: center;
    font-size: 1.5em;
    vertical-align: middle;
    text-decoration: none;
    position: relative;
    width: 60%;
    margin: auto;
    padding: .1rem 1rem;
    font-weight: bold;
    border-radius: 0.3rem;
    border: 2px dashed #C40026;
    color: #C40026;
    box-shadow: 5px 5px 0 #77000F;
    transition: 0.3s ease-in-out;
}

a.btn_18:hover {
    box-shadow: 0 0 0;
    transform: translate(5px, 5px);
    color: #C40026;
}

@media screen and (max-width:600px) {

    a.btn_17 {
        display: block;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        position: relative;
        width: 95%;
    }

    a.btn_18 {
        display: block;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        position: relative;
        width: 95%;
    }
}



/* ==============================================
   ▼ お知らせ機能 CSS（完全版）
   ============================================== */

/* --------------------------------------------------
   1. モーダル（最前面・強制表示版）
   -------------------------------------------------- */
.modal-overlay {
    display: none;
    /* 初期状態は非表示 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /* 画面幅いっぱい */
    height: 100vh !important;
    /* 画面高さいっぱい */
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 2147483647 !important;
    /* ★CSSの最大値で最前面へ */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px) !important;
    /* ぼかしを強めに設定 */
    -webkit-backdrop-filter: blur(10px) !important;
    /* Safari/iPhone用 */
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* 背景の暗さを少し和らげるとぼかしが綺麗に見えます */
}

/* クラスがついたら強制的に表示 */
.modal-active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-window {
    background: #fff;
    width: 90%;
    max-width: 600px;
    /* ★修正：文章が長い場合に備え、最大高さを指定し、flexボックス化 */
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    /* 影を濃く */
    position: relative;
    overflow: visible !important;
    /* 閉じるボタン表示のため */
    text-align: left;
    box-sizing: border-box;
}

/* 閉じるボタン（緑色のボタン形式に修正） */
/* --- 閉じるボタン：共通デザイン（PC・基本設定） --- */
.modal-close-btn,
.pickup-modal-close-btn {
    position: absolute;
    /* ★ユーザー様調整値：上に浮かせる */
    top: -20px !important;
    right: 0 !important;

    width: 44px !important;
    height: 44px !important;
    background-color: #28a745 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    border-radius: 50% !important;
    /* 真ん丸 */

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #ffffff !important;
    /* 白い縁取り */
    z-index: 1000 !important;
    cursor: pointer;
    padding: 0 !important;
}

/* モーダル内のリスト（箇条書き）表示を復活させる */
#modal-body ul {
    list-style-type: disc !important;
    /* 中黒（●）を表示 */
    padding-left: 1.5em !important;
    /* 左側に余白を作ってポッチを表示させる */
    margin-top: 0.5em !important;
    margin-bottom: 1em !important;
}

#modal-body li {
    list-style: inherit !important;
    /* グローバルの list-style: none を上書き */
    display: list-item !important;
    /* 箇条書きとして扱う */
    margin-bottom: 0.3em !important;
    /* 項目ごとの行間調整 */
    line-height: 1.5 !important;
}

/* 番号付きリストも必要であれば追加 */
#modal-body ol {
    list-style-type: decimal !important;
    /* 1. 2. 3. ...を表示 */
    padding-left: 1.5em !important;
    margin-bottom: 1em !important;
}

/* --- スマホ画面（幅480px以下）の最適化 --- */
@media screen and (max-width: 480px) {

    .modal-close-btn,
    .pickup-modal-close-btn {
        /* スマホでは端に寄りすぎないよう右側も少し内側へ */
        right: 10px !important;
        top: -20px !important;
        /* 縦・横とも良い感じになった値 */
        width: 48px !important;
        /* スマホでは少し大きくして押しやすく */
        height: 48px !important;
    }
}

/* --- 重要：ボタンが消えないように本体の設定を調整 --- */
.modal-window,
.pickup-modal-window {
    overflow: visible !important;
    /* 枠外のボタンを表示させる */
    position: relative;
    margin-top: 30px !important;
    /* ボタンが画面上端にぶつからないよう隙間を確保 */
}

.modal-close-btn:hover {
    background-color: #218838 !important;
    /* ホバー時に少し濃い緑に */
}

/* モーダルの中身 */
#modal-title {
    color: #AA7F00;
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 20px 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    line-height: 1.4;
    text-align: center;
    flex-shrink: 0;
    /* ★追加：タイトルが潰れないように */
}

/* ★修正：本文エリアをスクロール可能にする */
#modal-body {
    font-size: 1em;
    line-height: 1.5;
    /* 行間を少し広げて読みやすく */
    color: #333;
    text-align: left;
    width: 100%;
    overflow-y: auto !important;
    /* ★縦スクロールを有効に */
    flex-grow: 1;
    /* ★余白を本文が占有するように */
    padding-right: 8px;
    /* スクロールバーと文字の重なり防止 */
}

/* もし本文内の段落（pタグ）の上下の隙間も詰めたい場合は以下も追加 */
#modal-body p {
    margin-top: 0.2em !important;
    /* 段落の上の隙間 */
    margin-bottom: 0.2em !important;
    /* 段落の下の隙間 */
}

#modal-date {
    color: #888;
    font-size: 0.9em;
    margin-top: 15px;
    text-align: right;
    width: 100%;
    display: block;
    flex-shrink: 0;
    /* ★追加：日付が潰れないように */
}

#modal-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 20px;
    display: none;
}

/* リスト内の段落タグの余白をゼロにする（CKEditor対策） */
#modal-body li p {
    margin: 0 !important;
    padding: 0 !important;
}

/* リスト項目自体の隙間を微調整 */
#modal-body li {
    margin-bottom: -0.3em !important;
    /* 項目間の隙間（お好みで 0.1 ～ 0.3em） */
}

/* リスト（ul, ol）自体の上下の余白を詰める */
#modal-body ul,
#modal-body ol {
    margin-top: -0.3em !important;
    margin-bottom: -0.5em !important;
}

/* リスト（ul, ol）自体の上下の余白を追加調整項目 */
#modal-body ul sub,
#modal-body ol sub {
    margin-top: -1em !important;
    margin-bottom: -0.5em !important;
}


/* --------------------------------------------------
   2. お知らせリスト（整列レイアウト・最終決定版）
   -------------------------------------------------- */

/* リスト全体の枠組み（CSS Gridで強力に整列） */
#new {
    display: grid !important;
    margin: 0 0 4rem 0 !important;
    /* ★下に余白を追加 */
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;

    /* グリッド設定：左(日付)は文字幅、右(タイトル)は残り全部 */
    grid-template-columns: max-content 1fr !important;

    /* 箱の高さを揃えることで、下線を一直線にする */
    align-items: stretch !important;

    /* リストの一番上に線を入れる */
    border-top: 1px dashed #ccc !important;
}

/* 日付エリア (dt) */
#new dt {
    grid-column: 1 !important;
    /* 1列目 */
    margin: 0 !important;
    padding: 15px 0 15px 10px !important;
    border: none !important;
    border-bottom: 1px dashed #ccc !important;
    background: transparent !important;

    /* 日付テキスト設定 */
    display: flex !important;
    align-items: center !important;
    font-weight: bold !important;
    color: #AA7F00 !important;
    font-size: 0.9em !important;
    line-height: 1.2 !important;
}

/* 記事タイトルエリア (dd) */
#new dd {
    grid-column: 2 !important;
    /* 2列目 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px dashed #ccc !important;
    background: transparent !important;

    width: 100% !important;
    min-width: 0 !important;
    /* 文字はみ出し防止 */
}

/* リンクボタン (dd a) */
#new dd a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;
    padding: 15px 10px !important;
    box-sizing: border-box !important;

    text-decoration: none !important;
    color: #333 !important;
    background: transparent !important;
    transition: background-color 0.3s;
}

#new dd a:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: #000 !important;
}

/* --- スマホ・狭い画面用（レスポンシブ） --- */
@media screen and (max-width: 768px) {
    #new {
        display: block !important;
    }

    #new dt {
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }

    #new dd {
        border-bottom: 1px dashed #ccc !important;
    }

    #new dd a {
        padding-top: 2px !important;
        padding-left: 10px !important;
    }
}

/* --- 装飾パーツ --- */
.kind-badge {
    display: inline-block;
    background: #FFBA14 !important;
    color: #fff !important;
    font-size: 0.75em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: 1px;
}

.auto-new {
    display: inline-block;
    background-color: #ff0000 !important;
    color: #fff !important;
    font-size: 0.7em;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: 2px;
    animation: flash 2s infinite;
}

.news-text {
    flex: 1;
    padding-right: 10px;
    word-break: break-all;
    text-align: left !important;
}

.arrow-icon {
    color: #ccc !important;
    font-size: 0.9em;
    flex-shrink: 0;
}

/* --------------------------------------------------
   究極のNEWマーク：鼓動(Pulse) × 光沢(Shine)
   -------------------------------------------------- */
.auto-new {
    display: inline-block;
    /* 背景：Plan Bのグラデーション */
    background: linear-gradient(135deg, #ff0000 0%, #ff4d4d 100%) !important;
    color: #fff !important;
    font-size: 0.7em;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: 2px;

    /* Plan Bのための設定：光がはみ出ないように */
    position: relative;
    overflow: hidden;

    /* Plan A：1.5秒周期で鼓動する */
    animation: pulse 1.5s infinite ease-in-out;
}

/* Plan B：光の筋を作る */
.auto-new::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 25%;
    height: 200%;
    background: rgba(255, 255, 255, 0.5);
    /* 走る光の白 */
    transform: rotate(30deg);
    /* 3秒周期で光が走る */
    animation: shine-move 3s infinite;
}

/* --- アニメーション定義 --- */

/* Plan A：鼓動（ふくらむ動き） */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    /* 1.1倍に少しだけ拡大 */
    100% {
        transform: scale(1);
    }
}

/* Plan B：光の移動 */
@keyframes shine-move {
    0% {
        left: -60%;
    }

    /* 待機位置（左外） */
    15% {
        left: 150%;
    }

    /* 一瞬で右へ通過 */
    100% {
        left: 150%;
    }

    /* 次に光るまでの休憩時間 */
}

/* ==================================================
   本日仕上がり確認モーダル専用スタイル
   ================================================== */

/* ボタンのデザイン */
.check-pickup-btn {
    display: inline-block;
    padding: 0.8em 2em;
    background-color: #0157B3;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

.check-pickup-btn:hover {
    background-color: #0070E8;
}

/* モーダルの背景（お知らせモーダルとは別名で定義） */
.pickup-modal-overlay {
    display: none;
    /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    /* お知らせモーダルよりさらに上に */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* モーダルの箱 */
.pickup-modal-window {
    background: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    animation: fadeIn 0.3s ease-out;
}

/* タイトル */
.pickup-modal-title {
    color: #0A5DB6;
    font-size: 1.3em;
    font-weight: bold;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 閉じるボタン（お知らせとデザインを統一） */
.pickup-modal-close-btn {
    position: absolute;
    /* ★マイナスを指定して少し外側へ出す */
    top: -20px !important;
    right: -10px !important;

    width: 44px !important;
    /* 少し小さくすると浮かせた時に上品です */
    height: 44px !important;
    background-color: #28a745 !important;
    color: #ffffff !important;
    font-size: 22px !important;

    /* ★円形に変更（浮かせた時に自然に見えます） */
    border-radius: 50% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    /* 浮いている感を出すための影 */
    cursor: pointer !important;
    border: 2px solid #ffffff !important;
    /* 白い縁取りを入れるとさらに見やすい */
    z-index: 100 !important;
}

.pickup-modal-close-btn:hover {
    background-color: #218838 !important;
}

/* 結果テーブル */
.pickup-result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    text-align: left;
}

.pickup-result-table th {
    background: #f4f4f4;
    padding: 10px;
    width: 35%;
    font-weight: normal;
    color: #555;
    border-bottom: 1px solid #ddd;
}

.pickup-result-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    color: #333;
}

.pickup-date {
    display: block;
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* デザイン調整用（既存のCSSに合わせて変更してください） */
.schedule-list dt {
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

.schedule-list dd {
    margin-left: 0;
    margin-bottom: 5px;
}

/* 強調したい時間のスタイル */
.highlight-time {
    font-weight: bold;
    color: #d00;
    /* 赤色 */
    font-size: 1.1em;
}

/* 仕上がり日のスタイル */
.finish-date {
    font-weight: bold;
    color: #0056b3;
    /* 青色 */
    font-size: 1.2em;
    margin: 0 5px;
}

.finish-date2 {
    font-weight: bold;
    color: #6E4A20;
    /* 茶色 */
    font-size: 1.2em;
    margin: 0 5px;
}

/* 臨時休業メッセージのスタイル */
#manual-override-text {
    color: #d00;
    font-weight: bold;
    font-size: 1.2em;
    padding: 10px;
    border: 2px solid #d00;
    display: inline-block;
    /* JSでblockに書き換わりますが初期値として */
}


/* 背景の逆三角形を作る擬似要素 */
.course-title-wrap::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* 文字の後ろへ */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    /* 逆三角形に切り抜く */
    opacity: 0.3;
    /* 薄くする */
}

/* お急ぎコースのピンク背景 */
.course-pink::before {
    background: linear-gradient(to bottom, #ffc0cb, #ff69b4);
}

/* ていねいコースのブルー背景 */
.course-blue::before {
    background: linear-gradient(to bottom, #add8e6, #87ceeb);
}

.course-title-wrap {
    position: relative;
    /* 三角をこの文字の位置に固定するために必須 */
    display: inline-block;
    /* 文字の長さに合わせて三角の幅を調整するため */
    z-index: 1;
    /* 文字を三角より手前に表示するため */
    padding: 1px 10px;
    /* 三角の中に文字が収まるような余白調整 */
}

/* ステータス表示の基本デザイン */
.status-badge {
    display: inline-block;
    padding: 1px 15px;
    border-radius: 5px;
    font-weight: bold;
    color: #fff;
    /* 文字は白 */
    margin-left: 10px;
    /* 時刻との隙間 */
    font-size: 0.9em;
}

/* 1. 営業中の色（青） */
.status-open {
    background-color: #0157B3;
    border: 2px solid #003F84;
}

/* 2. 準備中の色（黄色っぽいオレンジ） */
.status-prep {
    background-color: #f39800;
    border: 2px solid #d98800;
}

/* 3. 閉店・定休日の色（グレー） */
.status-closed {
    background-color: #666;
    border: 2px solid #444;
}

.pointGet_movLink {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.7em;
    margin-top: -15px;
}

/* お知らせのタイトルと概要を縦に並べるコンテナ */
.news-content-stack {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* これがないと「…」が効かない場合があります */
    text-align: left;
}

/* タイトル部分 */
.news-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

/* 概要（本文冒頭）部分：ここがポイント！ */
.news-summary {
    font-size: 0.8rem;
    color: #838383;
    /* 少し薄めの色にして主従をつける */

    /* 1行で収めて、はみ出しを「…」にする設定 */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    width: 100%;
}


/* 茶ステッチをつける */
.kazari_waku {
    margin: 2em auto;
    /* 外側余白 */
    padding: 2em;
    /* 内側余白 */
    position: relative;
    z-index: 0;
    background-color: #f4f3f1;
    /* 薄いベージュ */
    max-width: 800px;
    /* 最大幅 */
}

.kazari_waku::before {
    content: '';
    position: absolute;
    inset: 0;
    /* top, right, bottom, left を一括指定 */
    margin: 5px;
    border: 1px dashed #ae946d;
    border-radius: 5px;
    z-index: -1;
    display: block;
}

/* ボックス内の段落 */
.kazari_waku p {
    margin: 0;
}