@charset "utf-8";


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


/*Bootstrap Iconsの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


/*Google Fontsの読み込み（font-weightは200〜900まで指定可能）
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Noto+Serif+JP:wght@200..900&family=Zen+Antique&display=swap');


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


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

    --bg-color: #fff;
    /*主にテンプレートの背景色*/
    --bg-inverse-color: #333;
    /*上のカラーの「対」として使う色*/

    --primary-color: #00A956;
    /*メインまたはアクセントカラー#00A956*/
    --primary-inverse-color: #fff;
    /*上のカラーの「対」として使う色*/

    --light-color: #ebf1e5;
    /*メインまたはアクセントカラーの淡い版*/
    --light-inverse-color: #333;
    /*上のカラーの「対」として使う色*/

    --secondary-color: #50683e;
    /*サブカラー*/
    --secondary-inverse-color: #fff;
    /*上のカラーの「対」として使う色*/

    --accent-color: #FF8E09;
    /*アクセントカラー*/
    --accent-inverse-color: #fff;
    /*上のカラーの「対」として使う色*/

    --content-space: 8.33vw;
    /*余白の一括管理用。画面幅100% = 100vwです。*/

    --headerH: 70px;
    /*headerの高さ他、関連パーツ用*/



    --space-large: 8vw;
    /*主に余白の一括管理用。画面幅100%＝100vwです。*/
    --space-small: 2vw;
    /*主に余白の一括管理用。画面幅100%＝100vwです。*/



}

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

    :root {
        --content-space: 10px;
        /*余白の一括管理用。小さな端末で余白を狭くする。*/
    }

}

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


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
    0% {
        left: -200px;
    }

    100% {
        left: 0px;
    }
}


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

    100% {
        opacity: 1;
    }
}


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

html,
body {
    font-size: 14px;
    /*基準となるフォントサイズ。*/
}

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

    html,
    body {
        font-size: 16px;
        /*基準となるフォントサイズ。*/
    }

}

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


body {
    margin: 0;
    padding: 0;
    font-family: "BIZ UDPGothic", sans-serif;
    font-optical-sizing: auto;
    -webkit-text-size-adjust: none;
    background: var(--bg-color);
    /*背景色。冒頭のbg-colorを読み込みます。*/
    color: var(--bg-inverse-color);
    /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
    line-height: 2;
    /*行間*/
}

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

dd {
    margin: 0;
}

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

nav ul {
    list-style: none;
}

/*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%;
}

/*他*/
input {
    font-size: 1rem;
}

section > ol,
section > ul {
    margin-left: 2rem;
}



/*section
---------------------------------------------------------------------------*/
section {
    padding: 0 var(--content-space);
    /*margin: 5vw 0;*/
    margin: 0 0;
    /*ここ変更する際は、他にも影響する場合があるので注意*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
    color: inherit;
    transition: 0.3s;
    /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
    text-decoration: none;
}


/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
    animation: opa1 0.2s 0.4s both;
    /*0.4秒待機後、0.2秒かけてフェードイン*/
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/*トップ以外のcontainer*/
body:not(.home) #container {
    grid-template-rows: 1fr;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
    position: fixed;
    /*画面の一定箇所で固定表示*/
    z-index: 100;
    width: 100%;
    background: #ffffff;
    /*background: var(--primary-color);	*/
    /*背景色。冒頭のprimary-colorを読み込みます。*/
    /*color: var(--primary-inverse-color);*/
    /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    /*headerの直接の子要素同士に空けるスペース。２文字分。*/
    line-height: 1.5;
    /*行間を少し狭く*/
    height: var(--headerH);
    /*ヘッダーの高さ。css冒頭のheaderHを読み込みます。*/
    transition: transform 0.5s ease, opacity 0.5s ease;
    /*スクロールでheaderがフェードする際にかける時間。*/
    padding: 0 var(--headerH) 0 2rem;
    /*上(0)、右(css冒頭のheaderHのサイズ)、下(0)、左(2文字分)へのヘッダー内の余白。*/
}

/*隠す際のスタイル*/
.site-header.is-hide {
    opacity: 0;
    transform: translateY(-100%);
    /*真上に隠す*/
    pointer-events: none;
    /*消えている間はクリックを無効化*/
}

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

    header {
        position: absolute;
        /*スクロールとともに動かす為、絶対配置*/
    }

    /*ドロップダウンメニュー冒頭の矢印アイコン*/
    header nav i {
        padding-right: 1.0rem;
        /*右に空ける余白*/
    }

}

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


/*ロゴ画像*/
#logo {
    margin: 0;
    flex-shrink: 0;
}

#logo img {
    display: block;
    height: 35px;
    /*ロゴの高さ。headerの高さを固定しているので、ロゴも高さで指定して下さい。*/
}


/*header内のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
header nav {
    /*	flex: 1;*/
}

header nav ul {
    flex: 1;
    display: flex;
    gap: 2.5rem;
    /*メニュー同士の間に空けるスペース*/
}

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

    header nav ul {
        display: none;
        /*非表示に*/
    }

}

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

/*メニュー１個あたりの設定*/
header nav ul a {
    font-size: 16px;
    display: block;
    text-decoration: none;
    text-align: center;
}

header nav ul a:hover {
    color: #00A956;
}



/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
    animation: opa1 0.5s 0.1s both;
    /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
    position: absolute;
    z-index: 100;
    margin-left: 1rem;
    border: 1px solid var(--primary-color);
    /*枠線の幅、線種、varは色の指定で冒頭のprimary-colorを読み込みます。*/
}

/*最後のメニュー以外に、下の線を入れる*/
header nav ul ul li:not(:last-child) {
    border-bottom: 1px solid var(--primary-color);
    /*枠線の幅、線種、varは色の指定で冒頭のprimary-colorを読み込みます。*/
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
    padding: 0.3em 1em;
    /*上下、左右へのメニュー内の余白*/
    background: #fff;
    /*背景色*/
    color: #333;
    /*文字色*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {
    display: none;
}

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

#menubar a {
    display: block;
    text-decoration: none;
}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {
    display: block;
}

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

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

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

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
    font-family: bootstrap-icons;
    /*Bootstrap Iconsを使う指示*/
    content: "\F229";
    /*使いたいアイコン名（Bootstrap Icons）をここで指定*/
    margin-right: 0.4em;
    /*アイコンとテキストとの間に空けるスペース*/
    display: inline-block;
    transform: scale(0.8) translateY(0.1em);
    /*アイコンを80%にし、0.1文字分下に移動*/
    opacity: 0.7;
    /*色を70%だけ出す*/
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通　フルスクリーン背景　*/
.small-screen #menubar {
    animation: animation1 0.2s both;
    position: fixed;
    overflow: auto;
    z-index: 100;
    inset: 0;
    padding: 100px var(--content-space) 50px;
    /*ブロック内の余白*/
    /*background: var(--primary-color);*/
    background: #1d7e4e;
    /*背景色。css冒頭の--primary-colorを読み込みます。*/
    color: var(--primary-inverse-color);
    /*文字色。css冒頭のprimary-inverse-colorを読み込み。*/
    line-height: 1.5;
    /*行間を少し狭く*/
    font-size: 1.2rem;
    /*文字サイズ120%*/
}

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

/*メニュー１個あたり*/
.small-screen #menubar a {
    display: block;
    text-decoration: none;
    background: var(--primary-inverse-color);
    /*背景色。css冒頭のprimary-inverse-colorを読み込み。*/
    color: #333;
    /*文字色*/
    margin-bottom: 1rem;
    /*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
    padding: 1rem 2rem;
    /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
}


/*子メニュー*/
.small-screen #menubar ul ul a {
    background: var(--bg-color);
    /*背景色。冒頭のbg-colorを読み込みます。*/
    color: var(--bg-inverse-color);
    /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
    border: 1px solid var(--bg-inverse-color);
    /*枠線の幅、線種、varは色の指定で冒頭のbg-inverse-colorを読み込みます。*/
    margin-left: 1rem;
    /*左に空けるスペース*/
    font-size: 1.0rem;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
    display: none;
    /* デフォルトは非表示 */
    animation: opa1 0s 0.2s both;
    cursor: pointer;
    width: var(--headerH);
    /*幅。css冒頭のheaderHを読み込みます。*/
    height: var(--headerH);
    /*高さ。css冒頭のheaderHを読み込みます。*/
    position: fixed;
    z-index: 101;
    right: 0px;
    top: 0px;
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
    background: #ffffff;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
    display: block;
    position: absolute;
    left: 18px;
    transition: 0.3s;
    width: 35px;
    height: 2px;
    /*線の高さ*/
    background: #222;
    /*線の色*/
    box-shadow: 1px 1px rgba(0, 0, 0, 0.3);
    /*背景色によってはアイコンが見えなくなるので薄く影を入れる*/
}

#menubar_hdr span:nth-of-type(1) {
    top: 24px;
}

#menubar_hdr span:nth-of-type(2) {
    top: 34px;
}

#menubar_hdr span:nth-of-type(3) {
    top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
    transform: translateY(10px) rotate(-45deg);
}

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

#menubar_hdr.ham span:nth-of-type(3) {
    transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
    display: flex;
}

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

/*メニューブロック設定
---------------------------------------------------------------------------*/
#menubar a {
    display: block;
    text-decoration: none;
}

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

#menubar {
    display: none;
}

#menubar.d-b,
#menubar_hdr.d-b {
    display: block;
}

#menubar.d-n,
#menubar_hdr.d-n {
    display: none;
}


/*メニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
    position: fixed;
    overflow: auto;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 50px var(--space-small) 20px var(--space-large);
    /*ブロック内の余白*/
    background: #faf8f7;
    /*背景色*/
    animation: animation1 0.2s both;
    /*animation1を0.2秒かけて実行する*/
}

/*メニュー一個あたり*/
#menubar nav > ul > li a {
    margin-bottom: 1rem;
    /*下に空けるスペース*/
}

#menubar nav a {
    position: relative;
    /*下線を配置する為に必要な指定*/
    bottom: -2px;
    /*下線の高さ。下の「#menubar nav a::before」の「height」の数字と合わせる。（※こちらは先頭にマイナスをつける）*/
}

#menubar nav a::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    /*下線の高さ。上の「#menubar nav a」の「bottom」の数字と合わせる。（※マイナスはつけないで）*/
    background: var(--primary-color);
    /*css冒頭で指定しているprimary-colorを読み込みます*/

    transition: 0.3s;
    /*アニメーションの実行時間(秒)*/
    transform: scaleX(0);
    /*幅。最初は0にして見えなくしておく。*/
    transform-origin: left top;
    /*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}

#menubar nav a:hover::before {
    transform: scaleX(1);
    /*hover時に線幅を100%にする*/
}

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

    /*メニューブロック*/
    #menubar {
        padding: 50px 150px 20px;
        /*上、左右、下への余白*/
    }

    #menubar nav {
        display: flex;
        /*flexを使う指定*/
        justify-content: space-around;
        /*並びかたの種類の指定*/
        gap: 2rem;
        /*マージン的な設定*/
    }

    #menubar nav > ul {
        flex: 1;
    }

}

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


/*子メニューに該当するブロック*/
#menubar nav ul ul {
    text-indent: 0rem;
    /*左側に少し余白をとる。*/
}

/*アイコン*/
#menubar i {
    color: var(--primary-color);
    /*css冒頭で指定しているprimary-colorを読み込みます*/
    margin-right: 0.5em;
    /*アイコンと文字との間にとる余白*/
}


/*メニューブロック内の「お問い合わせはこちらまで」のブロック
---------------------------------------------------------------------------*/
#menubar #toiawase {
    background: #fff;
    /*背景色*/
    border-radius: 10px;
    /*角丸の指定*/
    text-align: center;
    /*中のテキストをセンタリング*/
    padding: 1rem 2rem;
    /*ボックス内の余白*/
    border: 2px solid var(--primary-color);
    /*枠線の幅、線種、色。*/
}

/*ブロック内のh3見出し（「お問い合わせはこちらまで」と書いてある所）*/
#menubar #toiawase h3 {
    margin-bottom: 0;
    border-bottom: 3px dotted #ccc;
    /*下線の幅、線種、色*/
    display: inline-block;
    /*下線を文字の下だけに表示する為の指示*/
}

/*「お問い合わせフォーム」のボタン左側のメールアイコン*/
#menubar #toiawase .btn1 a {
    background: #00A956;
    color: #fff;
}

#menubar #toiawase .btn1 a:hover {
    background: rgb(0, 169, 86, 0.8);
    color: #fff;
}

#menubar #toiawase .btn1 i {
    color: #fff;
    /*色*/
}

#menubar #toiawase p {
    color: #222;
    /*色*/
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*main
---------------------------------------------------------------------------*/
main {
    overflow-x: clip;
    /*stickyを使っているセクションがあるので、hiddenじゃなくclipを使用。古いブラウザは未対応。*/
    min-width: 0;
    /*slide-thumbnail使用時にブラウザの横スクロールが出ないようにするため*/
}

/*トップページ以外のmain*/
body:not(.home) main {
    margin-top: var(--headerH);
    /*上にヘッダーの高さ分のスペースを空ける。*/
}

/*h2*/
main h2 {
    display: inline-flex;
    flex-direction: column-reverse;
    /*spanと表示順を入れ替える*/
    /*font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
    font-family: "Zen Antique", serif;
    font-size: 2.0rem;
    /*文字サイズ1.8倍*/
    font-weight: 400;
}

/*h2をセンタリングで使う場合*/
main h2.c {
    display: flex;
}

/*上記のh2とh4の中で使うspan（小文字）*/
main h2 .small,
main h4 span {
    font-size: 1.0rem;
    /*文字サイズ0.8倍*/
    opacity: 0.5;
    /*透明度50%*/
    letter-spacing: 0.2em;
    /*文字間隔を少しだけ広く*/
    padding-top: 3px !important;
}

/*見出し上にロゴマークを入れる場合*/
main h2.logo-mark {
    background: url('../images/mark.png') no-repeat center top / 150px;
    /*ロゴ画像の読み込み。最後の「14px」はロゴの幅なのでお好みで変更して下さい。*/
    padding-top: 120px !important;
    /*ロゴを入れる分の余白を適当に確保*/
}


main .cont h2 {
    margin: auto;
    margin-top: 80px;
    width: fit-content;
    border-bottom: 2px solid var(--primary-color);
}


main h3 {
    font-family: "Zen Antique", serif;
    font-size: 1.6rem;
    /*文字サイズ1.8倍*/
    font-weight: 400;
    line-height: 1.3;
}


main h4 {
    font-family: "Zen Antique", serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--primary-color);
}

/*大きなテキストの飾り文字
---------------------------------------------------------------------------*/
.text-kazari {
    line-height: 1;
    font-size: 8vw;
    /*文字サイズ。画面幅100% = 100vwです。*/
    margin-bottom: -5.5vw;
    /*文字の配置場所。本来の場所より上にずらす。*/
    background: linear-gradient(var(--light-color), var(--secondary-color));
    /*背景色ですが、ここではテキスト色になります。transparent(透明)からcss冒頭のsecondary-colorへのグラデーション。*/
    /*以下はテキストにグラデーション加工をするための設定なので変更しない*/
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/*画像がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.scrollfx-box {
    margin-left: calc(-1 * var(--content-space));
    margin-right: calc(-1 * var(--content-space));
    position: relative;
    height: 30rem;
    /*高さ。30文字分。pxやアスペクト比でもいいのですが、小さな端末で文字が切れないように設定して下さい。*/
    overflow: hidden;
}

/*画像を暗くする指定。そのままの画像を出したいならこのブロックを削除。*/
.scrollfx-box::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    /*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、main.jsの「画像アップのパララックス」の中にある「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
    --fx-extra: 240px;
    /*JSでまとめて上書き*/
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: calc(100% + var(--fx-extra));
    object-fit: cover;
    will-change: transform;
    transform: translate3d(0, -50%, 0);
}

/* テキストを天地左右中央 */
.scrollfx-box .text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    padding: 20px;
    /*ボックス内の余白。画面が小さくなった際に、枠ギリギリにテキストがならないように。*/
    color: #fff;
    /*文字色*/
}


/*「取扱分野」のブロック
---------------------------------------------------------------------------*/

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

    /*ブロック全体*/
    .flex1 {
        display: flex;
        /*ブロック内を横並び*/
        gap: 4vw;
        /*ブロックの間に空けるスペース*/
        align-self: start;
        align-items: center;
    }

}

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


/*メニューブロック全体*/
.flex1 .list-grid-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 25rem;
    /*幅を25文字分に*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*2列にする指定。3列にしたければrepeat(3, 1fr)とする。*/
    gap: 1rem;
    /*メニュー同士に空けるスペース。１文字分。*/
}

/*メニュー１個あたり*/
.flex1 .list-grid-menu li {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    /*メニュー内の余白。上に0.5文字分、右に0.5文字分、下に0.5文字分、左に１文字分。*/
    border: 1px solid #ccc;
    /*枠線の幅、線種、色*/
    transition: border-color 0.3s;
}

.flex1 .list-grid-menu a {
    display: block;
    text-decoration: none;
}

/*マウスオン時（リンクがある場合のみ）*/
.flex1 .list-grid-menu li:has(> a):hover {
    border-color: #333;
    /*枠線の色を変更*/
}

/*Bootstrapアイコンの設定*/
.flex1 .list-grid-menu i {
    display: inline-block;
    padding-right: 1.5rem;
    /*文字との間に空けるスペース。1.5文字分。*/
    color: var(--accent-color);
    /*アイコンの色。冒頭のaccent-colorを読み込みます*/
    transform: scale(1.5);
    /*サイズを1.5倍に*/
    transform-origin: left center;
}


/*３列ブロック
---------------------------------------------------------------------------*/
.list-grid .list * {
    margin: 0;
    padding: 0;
}

/*ブロック全体を囲むブロック*/
.list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3vw;
    /*ブロックの間に空けるスペース。画面幅100% = 100vwです。*/
}

/*ボックス１個あたり*/
.list-grid .list {
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
    background: #fff;
    /*背景色*/
    color: #333;
    /*文字色*/
    border: 1px solid #ccc;
    /*枠線の幅、線種、色*/
    padding: 1rem;
    /*ボックス内の余白。１文字分。*/
    line-height: 1.5;
    /*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid .list figure {
    margin-bottom: 0.5rem;
    /*画像の下に0.5文字分のスペースを開ける*/
}

/*ボックス内のh4（見出し）*/
.list-grid h4 {
    text-align: center;
    /*センタリング*/
    margin-bottom: 0.5rem !important;
    /*画像の下に0.5文字分のスペースを開ける*/
}

/*h4内のspan*/
.list-grid h4 span {
    display: block;
    opacity: 1;
}

/*ボックス内のp（文章）*/
.list-grid p {
    font-weight: normal;
    font-size: 0.85rem;
    /*文字サイズ85%*/
}

/*ブロック内で使うolとul*/
.list-grid ol,
.list-grid ul {
    margin-left: 1rem !important;
    font-size: 0.85rem;
    /*文字サイズを85%に*/
}

/*ボックス内のbtn*/
.list-grid .list .btn a {
    display: block;
    text-decoration: none;
    background: var(--primary-color);
    /*背景色。冒頭のprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);
    /*文字色。冒頭のprimary-inverse-colorを読み込みます*/
    text-align: center;
    padding: 0.5rem 1rem;
    /*上下に0.5文字分、左右に１文字分の余白*/
    margin-top: 1rem;
    /*ボタンの上に１文字分のスペースをあける*/
}

@media screen and (max-width:900px) {
    .list-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 3vw;
        /*ブロックの間に空けるスペース。画面幅100% = 100vwです。*/
    }

}

/*list-normal
---------------------------------------------------------------------------*/
.list-normal * {
    margin: 0;
    padding: 0;
}

.list-normal .list {
    background: var(--bg-color);
    /*背景色。冒頭のbg-colorを読み込みます。*/
    color: var(--bg-inverse-color);
    /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
    padding: 6vw;
    /*ブロック内の余白。画面幅100% = 100vwです。*/
    margin-bottom: 6vw;
    /*ブロックの下に空けるスペース。*/
    /*border: 4px solid #eee;*/
    /*枠線の幅、線種、色*/
    box-shadow: 0.3rem 0.2rem rgb(129, 126, 126, 0.3);
}

.list-normal .list1 {
    background: var(--bg-color);
    /*背景色。冒頭のbg-colorを読み込みます。*/
    color: var(--bg-inverse-color);
    /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
    padding: 1vw 6vw;
    /*ブロック内の余白。画面幅100% = 100vwです。*/
    margin: 1vw 0;
    /*ブロックの下に空けるスペース。*/
    /*border: 4px solid #eee;*/
    /*枠線の幅、線種、色*/
}

.list-normal figure {
    margin-bottom: 1rem;
    /*下に空けるスペース*/
}


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

    /*ブロック１個あたり*/
    .list-normal .list {
        display: flex;
        gap: 2rem;
        /*画像とテキストの間のスペース。２文字分。*/
        background: var(--bg-color);
        /*背景色。冒頭のbg-colorを読み込みます。*/
        color: var(--bg-inverse-color);
        /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
        padding: 4vw;
        /*ブロック内の余白。画面幅100% = 100vwです。*/
        margin-bottom: 6vw;
        /*ブロックの下に空けるスペース。*/
        /*border: 4px solid #eee;*/
        /*枠線の幅、線種、色*/
        position: relative;
        box-shadow: 0.3rem 0.2rem rgb(129, 126, 126, 0.3);
    }

    .list-normal .list1 {
        display: flex;
        gap: 2rem;
        /*画像とテキストの間のスペース。２文字分。*/
        background: var(--bg-color);
        /*背景色。冒頭のbg-colorを読み込みます。*/
        color: var(--bg-inverse-color);
        /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
        padding: 3vw 4vw;
        /*ブロック内の余白。画面幅100% = 100vwです。*/
        margin: 1vw 0;
        /*ブロックの下に空けるスペース。*/
        /*border: 4px solid #eee;*/
        /*枠線の幅、線種、色*/
        position: relative;
    }


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

    /*画像ブロック*/
    .list-normal figure {
        width: 40%;
        /*幅*/
        margin-bottom: 1rem;
        /*下に空けるスペース*/
    }

    /*reverse*/
    .list-normal .reverse {
        flex-direction: row-reverse;
    }


    .list-normal .btn1 {
        float: right
    }

}

/*ナンバーテキスト用*/
.list-normal .num {
    position: absolute;
    right: 0px;
    /*右からの配置場所*/
    top: -7vw;
    /*上からの配置場所。マイナスがついているので本来の場所から逆に移動。*/
    color: var(--light-color);
    /*文字色。冒頭のprimary-right-colorを読み込みます*/
    color: #00A956;
    /*文字色*/
    opacity: 0.8;
    /*透明度。色を80%出す*/
    font-size: 7vw;
    /*文字サイズ。画面幅100% = 100vwです。*/
}




/*ナンバーテキスト用*/
.list-normal .num1 {
    position: absolute;
    left: 0px;
    /*右からの配置場所*/
    top: -7vw;
    /*上からの配置場所。マイナスがついているので本来の場所から逆に移動。*/
    color: var(--light-color);
    /*文字色。冒頭のprimary-right-colorを読み込みます*/
    color: #00A956;
    /*文字色*/
    opacity: 0.8;
    /*透明度。色を80%出す*/
    font-size: 7vw;
    /*文字サイズ。画面幅100% = 100vwです。*/
}



/*h4見出し*/
.list-normal h4 {
    font-size: 1.2rem;
    /*文字サイズ200%*/
    margin-bottom: 1rem;
    /*下に空けるスペース*/
}

.list-normal .btn1 {
    float: center;
    margin-bottom: 20px;
}



/*sticky1（「ご相談の流れ」で使っている画像が一定範囲固定されるブロック）
---------------------------------------------------------------------------*/
/*このブロック内のol,ulタグ*/
.sticky1 ol,
.sticky1 ul {
    margin-left: 1.8rem;
}

.sticky1 li {
    margin-bottom: 1rem;
}

/*h2見出し*/
.sticky1 h2 {
    background: var(--primary-color);
    /*背景色。冒頭のprimary-colorを読み込みます*/
    color: var(--primary-inverse-color);
    /*文字色。冒頭のprimary-inverse-colorを読み込みます*/
    position: relative;
    margin-top: 1.5rem;
    /*上の４文字分のスペースを空ける*/
    padding: 0 2rem;
    /*上下、左右への見出し内の余白*/
    font-size: 1.5rem;
    /*文字サイズ1.5倍*/
    box-shadow: 0.6rem 0.6rem rgba(0, 0, 0, 0.1);
    /*影。右へ0.8文字分、下へ0.8文字分、0,0,0は黒のことで0.1は色が10%出た状態。*/
}

/*ナンバーテキスト用*/
.sticky1 h2 .num {
    position: absolute;
    left: 0px;
    /*左からの配置場所*/
    top: -2rem;
    /*上からの配置場所。マイナスがついているので本来の場所から逆に移動。*/
    color: var(--primary-color);
    /*文字色。冒頭のprimary-colorを読み込みます*/
    font-size: 1rem;
}

/*h3見出し*/
.sticky1 h3 {
    font-size: 1.5rem;
    /*文字サイズ1.5倍*/
    font-weight: normal;
    /*デフォルトは太字なので、標準に*/
}


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

    /* ブロック１個あたりの設定 */
    .sticky1 {
        display: flex;
        align-items: flex-start;
        gap: 4rem;
        position: relative;
        clip-path: inset(0);
        /*最後のブロックの背景が次のセクションに突き抜けないように（新しいブラウザのみ対象ならoverflow: clip;でもOK）*/
        min-height: 100vh;
        /*背景画像が100vhになるように。コンテンツの高さにしたいなら、この１行を削除すればOK。*/
    }

    /* タイトルブロック本体（今回はテキストを使わず背景画像のみで使用しましたが、必要があればここに見出しなどのテキストを入れます） */
    .sticky1 .title {
        width: 30%;
        /*幅*/
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
        /* 疑似要素より前面に出す */
        height: auto;
        /* テキストの高さに合わせる */
    }

    /* タイトルの背後の背景画像設定 */
    .sticky1 .title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* 画面いっぱいの高さ */
        background-size: cover;
        background-position: center;
        z-index: -1;
        /* テキストの背後に配置 */
    }

    .sticky1 .title.sticky-bg1::before {
        background-image: url("../images/s1_1.jpg");
        /* STEP1の背景画像 */
    }

    .sticky1 .title.sticky-bg2::before {
        background-image: url("../images/s1_4.jpg");
        /* STEP2の背景画像 */
    }

    .sticky1 .title.sticky-bg3::before {
        background-image: url("../images/s1_3.jpg");
        /* STEP3の背景画像 */
    }

    .sticky1 .title.sticky-bg4::before {
        background-image: url("../images/s1_2.jpg");
        /* STEP4の背景画像 */
    }




    .sticky1 .title.sticky-bg5::before {
        background-image: url("../images/s1_5.jpg");
    }

    .sticky1 .title.sticky-bg6::before {
        background-image: url("../images/s1_6.jpg");
    }

    .sticky1 .title.sticky-bg7::before {
        background-image: url("../images/s1_7.jpg");
    }

    .sticky1 .title.sticky-bg8::before {
        background-image: url("../images/s1_8.jpg");
    }

    .sticky1 .title.sticky-bg9::before {
        background-image: url("../images/s1_9.jpg");
        /* STEP3の背景画像 */
    }

    /* 右側のブロック */
    .sticky1 .text {
        flex: 1;
    }

}

/*check
---------------------------------------------------------------------------*/
ul.check {
    padding: 0;
    list-style: none;
    margin-bottom: 50px;
}

ul.check li {
    font-size: 1.2rem;
    /*ボックス内の余白。１文字分。*/
    margin-bottom: 0.5rem;
    font-weight: 600;
    /*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
    position: relative;
}


ul.check li::before {
    content: "✔ ";
    /* アイコンや文字 */
    color: green;
}

/*実績
-----------------------------------------------------------------------------*/

ul.cp_list {
    position: relative;
    padding: 1.0em 2.5em;
    margin-top: 2em;
    border: solid 2px #00A956;
}

ul.cp_list::after {
    position: absolute;
    bottom: 100%;
    left: -2px;
    content: attr(title);
    padding: 5px 15px;
    font-weight: bold;
    font-size: 1.1em;
    background: #00A956;
    color: #fff;
    border-radius: 4px 4px 0px 0px;
}

ul.cp_list li {
    line-height: 1.5;
    padding: 5px 0 5px 10px;
    border-bottom: 1px dashed #4DB6AC;
}


/*ステップボックス
---------------------------------------------------------------------------*/
ul.step {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/*ステップ１個あたり*/
ul.step li {
    border: 2px solid var(--primary-color);
    /*枠線の幅、線種、varは色の指定で、css冒頭のprimary-colorを読み込みます。*/
    padding: 1rem;
    /*ボックス内の余白。１文字分。*/
    margin-bottom: 2rem;
    /*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
    position: relative;
}

/*「▼」のマーク*/
ul.step li::after {
    content: "▼";
    /*このテキストを出す*/
    transform: scaleX(2);
    /*２倍の大きさ*/
    position: absolute;
    left: 50%;
    /*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
    bottom: -2rem;
    /*下からの配置場所。本来の場所より上に２文字分の場所。*/
    color: var(--primary-color);
    /*文字色。css冒頭のprimary-colorを読み込みます。*/
    opacity: 0.3;
    /*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.step li:last-child::after {
    content: "";
}


/*「お客様の声」ブロックのスライド
---------------------------------------------------------------------------*/
.slide-thumbnail * {
    margin: 0;
    padding: 0;
}

/*スライドショー全体を囲むブロック*/
.slide-thumbnail {
    overflow-x: hidden;
    padding-bottom: 50px;
    /*下に空けるスペース。インジケーター分の確保です。*/
    position: relative;
}

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.slide-thumbnail .img > div {
    flex: 0 0 23%;
    /*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
    max-width: 23%;
    /*上記と同じ内容だが念の為追加*/
    margin: 0 1%;
    /*上下、左右へのマージン*/
    padding: 1rem;
    /*ボックス内の余白*/
    background: #fff;
    /*背景色*/
    color: #333;
    /*文字色*/
    border: 1px solid #ccc;
    /*枠線の幅、線種、色*/
}

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

    /*2列配置に変更する*/
    .slide-thumbnail .img > div {
        flex: 0 0 48%;
        max-width: 48%;
    }

}

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


/*h4見出し*/
.slide-thumbnail h4 {
    line-height: 1.5;
    /*行間を少し狭く*/
    margin-bottom: 0.5rem;
    /*見出しの下に0.5文字分のスペースを空ける*/
    font-size: 0.9rem;
    /*文字サイズ90%*/
}

/*画像たちを囲むブロック*/
.slide-thumbnail .img {
    display: flex;
}

/*figure画像*/
.slide-thumbnail figure {
    background: #eee;
    /*背景色*/
    text-align: center;
    /*画像をセンタリング*/
    margin-bottom: 0.5rem;
    /*画像の下に0.5文字分のスペースを空ける*/
}

.slide-thumbnail figure img {
    width: 40%;
    /*人物シルエット画像の幅*/
}

/*段落タグ(p)*/
.slide-thumbnail p {
    font-size: 0.85rem;
    /*文字サイズを85%に*/
    line-height: 1.5;
    /*行間をデフォルトより狭く*/
}

/*ユーザー名*/
.slide-thumbnail .name {
    font-size: 0.8rem;
    /*文字サイズ80%*/
    text-align: right;
    /*テキストを右寄せ*/
}


/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide-thumbnail .slide-indicators {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0px;
    /*下からのボタンの配置場所*/
    left: 0px;
}

/*１個あたり*/
.slide-thumbnail .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    /*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.slide-thumbnail .indicator.active {
    background: #d00000;
    /*アクティブ時のボタン色*/
}


/*2カラム（※800px未満では１カラム）
---------------------------------------------------------------------------*/

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

    .c2 {
        display: flex;
        justify-content: space-between;
        gap: 5vw;
        /*２カラムの間に空けるスペース。画面幅100% = 100vwです。*/
    }

    .c2 .text {
        flex: 1;
    }

}

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


/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.openclose {
    display: flex;
    align-items: flex-start;
    border-radius: 3px;
    /*角を少しだけ丸く*/
    margin-bottom: 1rem;
    /*下に空けるスペース。質問ブロック同士の余白です。*/
    background: #fff;
    /*背景色*/
    color: #333;
    /*文字色*/
    border: 1px solid #ccc;
    /*枠線の幅、線種、色*/
    padding: 1rem;
    /*ブロック内の余白。１文字分。*/
    cursor: pointer;
    /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*アイコン（閉じている場合）*/
.openclose::before {
    font-family: bootstrap-icons;
    content: "\F4FE";
    /*アイコン画像の指定*/
    font-weight: bold;
    margin-right: 1rem;
    /*右側に空けるスペース*/
    flex-shrink: 0;
    background: var(--primary-color);
    /*背景色。冒頭のprimary-colorを読み込みます。*/
    color: #fff;
    /*アイコンの色*/
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 50%;
    transform: scale(1.2) translateY(0.15rem);
    /*アイコンのサイズ1.2倍、配置場所を少しずらす*/
}

/*アイコン（開いている場合）*/
.openclose.active::before {
    content: "\F2EA";
    /*開いている時のアイコン画像*/
    background: #c00000;
    /*背景色*/
    color: #fff;
    /*アイコンの色*/
}

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


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

    /*ブロック全体*/
    .new {
        display: grid;
        gap: 1rem;
        /*日付や文章の間にとるスペース。１文字分。*/
        grid-template-columns: auto 1fr;
        /* 日付の幅は自動で、内容が入るブロックは残り幅一杯とる。 */
    }

}

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


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
    display: block;
    text-decoration: none;
    width: fit-content;
    margin: 0 auto;
    background: var(--accent-color);
    /*背景色。冒頭のaccent-colorを読み込む。*/
    color: var(--accent-inverse-color);
    /*文字色。冒頭のaccent-inverse-colorを読み込む。*/
    padding: 0.2rem 2rem;
    /*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
    border-radius: 100px;
    /*角を丸くする指定。大きければ適当でOK。*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広く*/
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    /*ボタンの影。右に、下に、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
    font-size: 1.1rem;
    /*文字サイズを1.2倍に*/
}

/*マウスオン時*/
.btn1 a:hover {
    background: #444;
    /*背景色*/
    color: #fff;
    /*文字色*/
    box-shadow: none;
    /*ボタンの影を消す*/
}



/*btn3（ボタン）
---------------------------------------------------------------------------*/
.btn3 a {
    display: block;
    text-decoration: none;
    width: fit-content;
    background: #00A956;
    /*背景色。冒頭のaccent-colorを読み込む。*/
    color: var(--accent-inverse-color);
    /*文字色。冒頭のaccent-inverse-colorを読み込む。*/
    padding: 0.2rem 2rem;
    /*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
    border-radius: 100px;
    /*角を丸くする指定。大きければ適当でOK。*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広く*/
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    /*ボタンの影。右に、下に、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
    font-size: 0.8rem;
    /*文字サイズを1.2倍に*/
    margin: 10px 0px 20px 0px;
    margin: 0 0 0 auto;
    
}

/*マウスオン時*/
.btn3 a:hover {
    background: #444;
    /*背景色*/
    color: #fff;
    /*文字色*/
    box-shadow: none;
    /*ボタンの影を消す*/
}




/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
    font-family: "Zen Antique", serif;
    font-size: 1.6rem;
    /*太字に*/
    padding: 0.5rem 1rem;
    /*ボックス内の余白*/
    background: #F5F4EC;
    /*背景色*/
    color: #222222;
    /*文字色*/
    margin-bottom: 1rem;
    /*下に空けるスペース*/
    border-radius: 5px;
    /*角を丸くする指定*/
}

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

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

.ta1 tr:last-child {
  border-bottom: none;
}

/*th（左側）、td（右側）の共通設定*/
.ta1 td,
.ta1 th {
    word-break: break-all;
    background: var(--bg-color);
    /*背景色。冒頭のbg-colorを読み込みます。*/
    color: var(--bg-inverse-color);
    /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
    text-align: left;
    /*左よせにする*/
    padding: 0.5rem;
    /*余白*/
}


/*th（左側）のみの設定*/
.ta1 th {
    width: 25%;
    /*幅*/
    text-align: center;
    vertical-align: top;
    /*テキストをセンタリング*/
}

.ta1 h4 {
    color: #222222;
}

.title_o {
    padding: 0.05em 0.5em;
    /*上下 左右の余白*/
    color: #494949;
    /*文字色*/
    background: transparent;
    /*背景透明に*/
    border-left: solid 5px #00A956;
    /*左線*/
}

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

    .ta1 th,
    .ta1 td {
        width: 100%;
        display: block;
    }

    .ta1 th {
        width: 100%;
        text-align: left;
    }

    .ta1 td {
        padding-top: 0;
    }
}



/*フッター
---------------------------------------------------------------------------*/
footer * {
    margin: 0;
    padding: 0;
}

footer ul {
    list-style: none;
}

/*ブロック全体*/
footer {
    margin-top: 50px;
    /*background:#F1F1F1;*/
    /*背景色。css冒頭のprimary-colorを読み込みます。*/
    color: #222;
    /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
    padding: 3rem;
    /*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
    position: relative;
}

/*ロゴが入ったブロック（大きな画面だと左側）*/
footer .footer1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /*このブロック内のボックス同士の間に空ける余白。１文字分。*/
    margin-bottom: 30px;
}

/*フッター内のロゴ（テキストで使う場合）*/
footer .logo {
    font-size: 1.5rem;
    /*テキストの場合の文字サイズ。1.5倍。*/
}

/*フッター内のロゴ（画像で使う場合）*/
footer .logo img {
    width: 300px;
    /*ロゴの幅*/
    margin-bottom: 0rem;
    /*下に１文字分のスペースを空ける。*/
}

/*地図が入ったブロック（大きな画面だと右側）*/
footer .footer2 {
    flex: 1;
}

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

    footer {
        display: flex;
        gap: 2rem;
        /*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
    }

    /*ロゴが入ったブロック*/
    footer .footer1 {
        margin-bottom: 0;
        text-align: left;
    }

}

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


/*Copyright部分*/
footer small {
    display: block;
    text-align: right;
    margin-top: 2rem;
}



footer .btn1 {
    float: center;
    margin-bottom: 20px;
}



/*Google Map用
---------------------------------------------------------------------------*/
.iframe-box1 {
    width: 100%;
    aspect-ratio: 16 / 9;
    /*マップのアスペクト比。お好みで。*/
    position: relative;
    overflow: hidden;
}

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


/*SNSアイコン
---------------------------------------------------------------------------*/
.icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

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


/*bg-primary背景
---------------------------------------------------------------------------*/
.bg-primary {
    background: var(--primary-color);
    /*背景色。css冒頭のprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);
    /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}


/*bg-secondary背景
---------------------------------------------------------------------------*/
.bg-secondary {
    background: var(--secondary-color);
    /*背景色。css冒頭のsecondary-colorを読み込みます。*/
    color: var(--secondary-inverse-color);
    /*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
}


/*bg-light背景
---------------------------------------------------------------------------*/
.bg-light {
    background: var(--light-color);
    /*背景色。css冒頭のlight-colorを読み込みます。*/
    color: var(--light-inverse-color);
    /*背景色。css冒頭のlight-inverse-colorを読み込みます。*/
}


/*bg（bg-primary、bg-secondary、bg-lightとセットで使います）
---------------------------------------------------------------------------*/
.bg {
    padding-top: 5vw;
    /*ボックス内の上に空ける余白。画面幅100%=100vw*/
    padding-bottom: 5vw;
    /*ボックス内の下に空ける余白。画面幅100%=100vw*/
}

.bg + .bg {
    margin-top: calc(-1 * 5vw) !important;
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
    text-decoration: none;
    display: block;
    background: #00A956;
    color: #fff;
    text-align: right;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/*.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}*/


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

/*ボタンの設定*/
.pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 99;
    animation: opa1 1s 0.4s both;
    position: fixed;
    /*スクロールに追従しない(固定で表示)為の設定*/
    right: 20px;
    /*右からの配置場所指定*/
    bottom: 50px;
    /*下からの配置場所指定*/
    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%;
    /*円形にする*/
}


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

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

.red{color:#ff0000;}

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

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

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

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

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

.wt {
    padding: 0vw 4vw;
}

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

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

.mb3rem {
    margin-bottom: 3rem !important;
}

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

.plr20 {
    padding: 0 0 0 20px;
}

.pt30 {
    padding-top: 30px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}


.mt30 {
    margin-top: 30px;
}

.mt50 {
    margin-top: 50px;
}

.look {
    display: inline-block;
    padding: 0px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 3px;
    margin: 5px 0;
    word-break: break-all;
}

.look .color-check {
    color: yellow !important;
}

.mincho {
    font-family: "Zen Antique", serif;
}

.small {
    font-size: 0.75em;
}

.mm {
    font-size: 1.1em;
}

.ml {
    font-size: 1.5em;
    letter-spacing: 0.1em;
}


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

.block {
    display: block !important;
}

.marker {
    background: linear-gradient(transparent 70%, yellow 70%);
}

.border-radius1 {
    border-radius: 30vw 0 30vw 0;
}

.green {
    color: #027c40;
}

/*------------------ News ---------------------------*/
/*news2-parts-c2（２カラムレイアウト用）*/

.news2-parts-c2 * {
    margin: 0;
    padding: 0;
}


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

    .news2-parts-c2 {
        display: flex;
        gap: 2rem;
    }

    /*左側のタイトルブロックの幅*/
    .news2-parts-c2 .title-parts {
        width: 20%;

    }

    /*右側のテキストブロック*/
    .news2-parts-c2 .text-parts {
        flex: 1;
    }

}

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


/*お知らせブロック
---------------------------------------------------------------------------*/
.news2-parts {
    margin-left: 1rem;
    /*左に１文字分のスペース*/
    margin-right: 1rem;
    /*右に１文字分のスペース*/
}

/*記事の下に空ける余白*/
.news2-parts dd {
    padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.news2-parts dt span {
    display: inline-block;
    text-align: center;
    line-height: 1.8;
    /*行間（アイコンの高さ）*/
    border-radius: 3px;
    /*角を丸くする指定*/
    padding: 0 1rem;
    /*上下、左右へのブロック内の余白*/
    width: 10rem;
    /*幅。６文字分。*/
    transform: scale(0.8);
    /*80%のサイズに縮小*/
    background: #eee;
    /*背景色*/
    color: #777;
    /*文字色*/
}

/*お知らせ*/
.news2-parts .icon-bg1-parts {
    background: #00A956;
    /*背景色*/
    color: #fff;
    /*文字色*/
}

/*コラム*/
.news2-parts .icon-bg2-parts {
    background: #f87d01;
    /*背景色*/
    color: #fff;
    /*文字色*/
}


/*セミナー・講演*/
.news2-parts .icon-bg3-parts {
    background: #544ef7;
    /*背景色*/
    color: #fff;
    /*文字色*/
}

/*出版・執筆*/
.news2-parts .icon-bg4-parts {
    background: #c943a0;
    /*背景色*/
    color: #fff;
    /*文字色*/
}

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

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

}

/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-slideup-parts {
    margin-top: 80px;
    background: rgb(255, 255, 255, 0.9);
    /*背景色*/
}

/*テキストボックス*/
.bg-slideup-parts .text-parts {
    padding: 2rem;
    /*余白。２文字分。*/
}

/*画像ボックス*/
.bg-slideup-parts .image-parts {
    background-image: url("../images/b_1.jpg");
    /*背景画像の読み込み*/
    background-repeat: no-repeat;
    background-size: cover;
    height: 40vw;
    /*高さ。画面幅の半分になる設定ですがお好みで単位なども変更して下さい。*/
}

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

    /*ブロック全体*/
    .bg-slideup-parts {
        display: flex;
        min-height: 250px;
        /*最低限の高さ。この行を削除すればテキスト量に応じた背景の高さになります。*/
    }

    /*reverse*/
    .bg-slideup-parts.reverse {
        flex-direction: row-reverse;
    }

    /*画像ボックス*/
    .bg-slideup-parts .image-parts {
        width: 40%;
        /*幅*/
    }

    /*テキストボックス*/
    .bg-slideup-parts .text-parts {
        flex: 1;
        align-self: center;
    }

}

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


/*背景色
---------------------------------------------------------------------------*/
.background4-parts {
    padding: 4vw var(--content-space);
    background-color: hsla(0, 0%, 100%, 1);
    background-image:
        radial-gradient(at 0% 0%, hsla(65, 100%, 91%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 23%, hsla(189, 78%, 82%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 95%, hsla(229, 100%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 88%, hsla(170, 92%, 89%, 1) 0px, transparent 50%);
}

.background1-parts {
    padding: 4vw var(--content-space);
    background-color: hsla(0, 0%, 100%, 1);
    background-image:
        radial-gradient(at 0% 0%, hsla(65, 100%, 91%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 23%, hsl(118, 67%, 79%) 0px, transparent 50%),
        radial-gradient(at 100% 95%, hsla(229, 100%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 88%, hsl(108, 92%, 89%) 0px, transparent 50%);
}