@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/

@import url("slide.css");

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

:root {
    --primary-color: #33b50b;
    /*テンプレートのメインまたはアクセントカラー*/
    --primary-inverse-color: #fff;
    /*上のprimary-colorの対となる色*/
    --secondary-color: #f37c12;
    /*テンプレートのサブまたはアクセントカラー*/
    --secondary-inverse-color: #fff;
    /*上のsecondary-colorの対となる色*/
}


/*全体の設定
---------------------------------------------------------------------------*/

body * {
    box-sizing: border-box;
}

html,
body {
    font-size: 14px;
    /*基準となるフォントサイズ。下の「画面幅800px以上」で基準を大きなサイズに変更しています。*/
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {

    html,
    body {
        font-size: 18px;
        /*基準となるフォントサイズの上書き*/
    }
}


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

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /*フォント種類*/
    -webkit-text-size-adjust: none;
    background: #fff;
    /*背景色*/
    color: #333;
    /*全体の文字色*/
    line-height: 2;
    /*行間*/
}


/*リセット*/

figure {
    margin: 0;
}

dd {
    margin: 0;
}

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

nav ul {
    list-style: none;
}

section li {
    margin-left: 2rem;
    margin-right: 2rem;
}


/*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;
    border: #a2bb43 solid 1px;
    border-radius: 3px;
}


/*section全般の設定*/

section+section {
    padding-top: 3rem;
    /*sectionの間に空けるスペース*/
}


/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/

@keyframes opa1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/

a {
    color: #333;
    /*文字色*/
    text-decoration: none;
}

a:hover {
    color: #a2bb43;
}


/*container。サイト全体を囲むブロック。
---------------------------------------------------------------------------*/

#container {
    margin: 0 auto;
    max-width: 1400px;
    /*最大幅。これ以上幅が広がらないように。*/
}


/*header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/

header {
    padding: 20px 50px;
    /*上下、左右のボックス内の余白*/
}


/*logo画像*/

header #logo {
    padding: 0;
    margin: 0 auto;
    width: 250px;
    /*画像の幅*/
}


/*電話番号*/

header address {
    font-style: normal;
    /*addressタグがデフォルトで斜体なので、通常にする。*/
    text-align: center;
}


/*電話番号のアイコン（アイコンにはFont Awesomeを使用）*/

header i {
    padding-right: 10px;
    /*右側に空ける余白*/
}


/*address内のspanタグ。受付時間などの行です。*/

header address span {
    display: block;
    font-size: 0.7rem;
    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}


/*画面幅800px以上の追加指定*/

@media (min-width:800px) {
    header {
        display: flex;
        /*flexボックスを使う指定*/
        justify-content: space-between;
        /*並びかたの種類の指定*/
        align-items: center;
        /*垂直揃えの指定。上下中央に配置されるように。*/
    }

    /*logo画像*/
    header #logo {
        width: 290px;
        margin: 0;
        padding: 0;
    }
}


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


/*メニューブロック初期設定
---------------------------------------------------------------------------*/


/*メニューをデフォルトで非表示*/

#menubar {
    display: none;
}


/*上で非表示にしたメニューを表示させる為の設定*/

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

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


/*3本バーをデフォルトで非表示*/

#menubar_hdr.display-none {
    display: none;
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/


/*メニュー内の小文字*/

#menubar ul li span {
    display: block;
    font-size: 0.5rem;
    /*文字サイズを50%に*/
    opacity: 0.5;
    /*透明度。色を50%だけ出す。*/
    letter-spacing: 0.1em;
}


/*メニュー１個あたりの設定*/

#menubar a {
    display: block;
    text-decoration: none;
    padding: 10px 0;
    /*上下、左右へのメニュー内の余白*/
}


/*アイコン画像（アイコンにはFont Awesomeを使用）*/

#menubar i {
    display: block;
    padding-bottom: 5px;
    color: #a2bb43;
    font-size: 0.8rem;
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/

.large-screen #menubar>nav>ul {
    display: flex;
    /*横並びにする*/
    justify-content: space-between;
    border-top: 1px solid #dcdcdc;
    /*上の線の幅、線種、色*/
    border-bottom: 1px solid #dcdcdc;
    /*下の線の幅、線種、色*/
    line-height: 1.8;
}


/*メニュー１個あたりの設定*/

.large-screen #menubar li {
    flex: 1;
    position: relative;
    text-align: center;
}

.large-screen #menubar a {
    position: relative;
    /*下線の幅となる基準を作っておく*/
}


/*ラインアニメーションの設定*/

.large-screen #menubar li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 5px;
    background: #a2bb43;
    transition: 0.3s;
    transform: scaleX(0);
    transform-origin: center top;
}


/*アニメーション結果。ライン幅が100%になる。*/

.large-screen #menubar li:hover::before {
    transform: scaleX(1);
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/


/*メニューブロック設定*/

.small-screen #menubar.display-block {
    position: fixed;
    overflow: auto;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding-top: 50px;
    background: #a2bb43;
    /*背景色*/
    color: var(--primary-inverse-color);
    animation: animation1 0.2s both;
    /*animation1を実行する。0.2sは0.2秒の事。*/
}

.small-screen #menubar nav {
    height: calc(100% - 65spx);
}

.small-screen #menubar nav ul {
    height: 100%;
    background: #fff;
    padding-top: 10px;
    margin: 0 50px;
    border-radius: 30px;
    text-align: center;
}


/*メニュー１個あたりの設定*/

.small-screen #menubar nav ul li a {
    padding: 8px 0;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/


/*３本バーを囲むブロック*/

#menubar_hdr {
    animation: opa1 0.3s 0.5s both;
    position: fixed;
    z-index: 101;
    cursor: pointer;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s;
    background: #a2bb43;
    border-radius: 50%;
}


/*ここは変更不要*/

#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: #ffffff;
    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ブロック設定
---------------------------------------------------------------------------*/


/*mainブロックの設定*/

main {
    padding: 20px;
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    main {
        padding: 50px;
        /*ボックス内の余白*/
    }
}


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


/*mainブロック内のh2タグ*/

main h2 {
    color: #a2bb43;
    padding: 5px;
    margin-bottom: 15px;
    position: relative;
    letter-spacing: 0.1em;
}


/*h2タグのbefor（下線のデフォルトの状態の設定）*/

main h2::before {
    background: #e4eebf;
}


/*h2タグのbefor,after 共通設定*/

main h2::before,
main h2::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 3px;
    /*ラインの高さ*/
}


/*h2タグのafter（アニメーションの初期設定）*/

main h2::after {
    background: #a2bb43;
    transition: 1s 0.5s;
    /*1sはアニメーションの実行時間は1秒。0.5秒遅れてスタートする指定。*/
    transform: scaleX(0);
    /*幅。最初は0にして見えなくしておく。*/
    transform-origin: left top;
    /*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}


/*h2タグのアニメーション結果。ライン幅が100%になる。*/

main h2.linestyle::after {
    transform: scaleX(1);
}


/*mainブロックのh3タグ*/

main h3 {
    padding: 5px;
    /*ボックス内の余白*/
    margin-bottom: 30px;
    /*下に空けるスペース*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広くとる設定*/
    border-bottom: 1px solid #ccc;
    /*下線の幅、線種、色*/
}


/*mainブロックのpタグ*/

main p {
    margin: 0 5px 30px;
    /*上、左右、下へ空けるスペース*/
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/


/*ボックス全体の設定*/

#footermenu {
    background: #a2bb43;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
}


/*画面幅800px以上の追加指定*/

@media (min-width:800px) {
    #footermenu {
        font-size: 0.8rem;
        padding: 20px 55px;
        font-weight: bold;
    }
}


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


/*ボックス内のリンクテキスト設定*/

#footermenu a {
    text-decoration: none;
    color: #fff;
}


/*リンクテキストのマウスオン時*/

#footermenu a:hover {
    color: #fff300;
}


/*ulタグ（列単位）*/

#footermenu ul {
    margin: 0;
    list-style: none;
    align-self: center;
    /*フッターメニューをブロックの上下中央に配置する。上によせたいならこの１行削除。*/
}


/*title*/

#footermenu .title {
    font-weight: bold;
    /*太字にする*/
    color: #ccc;
    /*文字色*/
    padding-bottom: 5px;
    /*下に空けるスペース*/
}


/*フッター右側の装飾画像*/

#footermenu .kazari {
    display: none;
    /*スペースが狭いので飾りを非表示にしておく*/
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    #footermenu .kazari {
        display: block;
        max-width: 160px;
        border: #fff solid 5px;
    }
}


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


/*フッター設定
---------------------------------------------------------------------------*/

footer small {
    font-size: 100%;
    color: #fff;
}

footer {
    font-size: 0.6rem;
    background: #a2bb43;
    color: #a2bb43;
    text-align: center;
    padding: 20px;
    border-top: #fff solid 1px;
}


/*リンクテキスト*/

footer a {
    color: #fff;
    text-decoration: none;
}


/*リンクテキストのマウスオン時*/

footer a:hover {
    color: #fff;
}


/*著作部分*/

footer .pr {
    display: block;
}


/*list-grid1
---------------------------------------------------------------------------*/


/*list内の全ての要素のマージンを一旦リセット*/

.list-grid1 .list * {
    margin: 20px 0 0 0;
    padding: 0;
    text-align: center;
}


/*listブロック全体を囲むブロック*/

.list-grid1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 0 20px;
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {

    /*listブロック全体を囲むブロック*/
    .list-grid1 {
        grid-template-columns: repeat(2, 1fr);
        /*2列にする指定*/
    }
}

@media (max-width: 600px) {
    .list-grid1 {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        margin: 0 20px;
    }

    .list-grid1 .list {
        padding: 0.5rem;
    }

    .list-grid1 .list h4 a {
        font-size: 16px;
    }
}


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


/*テーブル
---------------------------------------------------------------------------*/


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


/*ta1テーブルブロック設定*/

.ta1 {
    border-top: 1px solid #ccc;
    table-layout: fixed;
    width: 100%;
    margin: 0 0 30px;
}


/*tr（１行分）タグ設定*/

.ta1 tr {
    border: 1px solid #b9cd6c;
}

.ta1 th,
.ta1 td {
    padding: 10px 5px;
    word-break: break-all;
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {

    .ta1 th,
    .ta1 td {
        padding: 20px 15px;
        /*上下、左右へのボックス内の余白*/
    }
}


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


/*th（左側）のみの設定*/

.ta1 th {
    width: 34%;
    text-align: center;
    color: #a2bb43;
    background: #faffe5;
    border-right: 1px solid #a2bb43;
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    .ta1 th {
        width: 20%;
    }

    br.sp {
        display: none;
    }
}


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


/*ボックス１個あたり*/

.list-grid1 .list {
    position: relative;
    overflow: hidden;
    display: grid;
    padding: 1.5rem;
    background: #fff;
    grid-template-rows: auto auto 1fr;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}


/*ボックス内のh4見出し*/

.list-grid1 .list h4 {
    color: #000;
}

.list-grid1 .list h4 a {
    color: #a2bb43;
}


/*ボックス内のp要素*/

.list-grid1 .list p {
    font-size: 0.7rem;
    /*文字サイズを70%に*/
    line-height: 1.5;
    /*行間を少し狭く*/
}


/*ボックス内のfigure画像*/

.list-grid1 .list figure img {
    margin-bottom: 0.5rem;
    /*画像の下に空けるスペース*/
}


/*NEW,UPアイコン
---------------------------------------------------------------------------*/


/*NEW,UPアイコン 共通*/

.newicon,
.upicon {
    display: inline-block;
    text-align: center;
    line-height: 1;
    padding: 5px 10px !important;
    border-radius: 3px;
    font-size: 0.6rem;
    margin-left: 0.5rem !important;
    position: relative;
    bottom: 0.2rem;
}


/*newiconへの追加指定。*/

.newicon {
    background: #f00;
    /*背景色*/
    color: #fff;
    /*文字色*/
}


/*upiconへの追加指定。*/

.upicon {
    background: #257dce;
    /*背景色*/
    color: #fff;
    /*文字色*/
}


/*option帯リボン
---------------------------------------------------------------------------*/


/*option1,option2 共通*/

.option1,
.option2 {
    font-size: 0.7rem;
    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
    display: inline-block;
    width: 200px;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(-60px, 20px) rotate(-30deg);
    /*translateは配置場所の指定。rotateは回転。*/
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
    /*影*/
}


/*h2タグ内で使った場合のoption1,option2 共通（※CMS用）*/

h2 .option1,
h2 .option2 {
    width: auto;
    position: relative;
    transform: translate(0px, -4px) rotate(0deg);
    padding: 5px 20px;
    margin-left: 10px;
}


/*option1への追加指定。*/

.option1 {
    background: #ff0000;
    /*背景色*/
    color: #fff;
    /*文字色*/
}


/*option2への追加指定。*/

.option2 {
    background: #ccc;
    /*背景色*/
    color: #888;
    /*文字色*/
}


/*サムネイルの横スライドショー
---------------------------------------------------------------------------*/

.slide-thumbnail1 * {
    margin: 0;
    padding: 0;
}


/*スライドショー全体を囲むブロック*/

.slide-thumbnail1 {
    overflow-x: hidden;
    margin-top: 30px;
    padding-bottom: 50px;
    /*下に空けるスペース。インジケーター分の確保です。*/
    position: relative;
    color: #333;
    line-height: 1.5;
}


/*リンクテキスト*/

.slide-thumbnail1 a {
    display: block;
    text-decoration: none;
    color: inherit;
}


/*１個あたりのボックスの設定と、4列配置する為の指示*/

.slide-thumbnail1 .img>div {
    flex: 0 0 23%;
    max-width: 23%;
    margin: 0 1%;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
}


/*画面幅800px以下の追加指定*/

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

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


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

span.red_sircle {
    color: #fff;
    background: #f64c5a;
    margin-left: 5px;
    padding: 7px;
    border-radius: 50%;
}


/*画像たちを囲むブロック*/

.slide-thumbnail1 .img {
    display: flex;
}


/*画像*/

.slide-thumbnail1 .img img {
    aspect-ratio: 4 / 2.5;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*見出し(h4)*/

.slide-thumbnail1 h4 {
    font-size: 0.9rem;
    /*文字サイズ90%*/
    margin-top: 0.5rem;
    /*上に空けるスペース。上の画像と見出しの間の余白調整です。*/
    margin-bottom: 0.3rem;
    /*下に空けるスペース。下の説明文と見出しの間の余白調整です。*/
}


/*段落タグ(p)*/

.slide-thumbnail1 p {
    font-size: 0.7rem;
    /*文字サイズを70%に*/
    line-height: 1.5;
    /*行間をデフォルトより狭く*/
}


/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/


/*全体*/

.slide-thumbnail1 .slide-indicators {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0px;
    /*下からのボタンの配置場所*/
    left: 0px;
}


/*１個あたり*/

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

.slide-thumbnail1 .indicator.active {
    background: #F9C24E;
}


/*お知らせブロック
---------------------------------------------------------------------------*/


/*記事の下に空ける余白*/

.new {
    font-size: 16px;
}

.new dt,
.new dd {
    padding: 15px 0;
    border-bottom: 1px solid #a2bb43;
}

@media (max-width: 699px) {
    .new dt {
        border-bottom: none;
        padding-bottom: 0;
    }

    .new dd {
        border-bottom: 1px solid #a2bb43;
    }
}


/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/

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


/*icon-bg1*/

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


/*icon-bg2*/

.new .icon-bg2 {
    background: var(--secondary-color);
    /*背景色。css冒頭で指定しているsecondary-colorを読み込みます*/
    color: var(--secondary-inverse-color);
    /*文字色。css冒頭で指定しているsecondary-inverse-colorを読み込みます*/
}


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

@media screen and (min-width:700px) {

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


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

---------------------------------------------------------------------------*/ .faq {
    padding: 0 5px;
    /*上下、左右へのボックス内の余白*/
}


/*質問*/

.faq dt {
    border-radius: 10px;
    /*枠を角丸にする指定*/
    margin-bottom: 40px;
    /*下に空けるスペース*/
    background: linear-gradient(#fff, #f7f7f7);
    /*背景グラデーション*/
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
    text-indent: -54px;
    /*テキストのインデント。Qアイコンだけ左に飛び出るようにする指定。下のpaddingの一番最後の数字と合わせて下さい。※マイナスは取らないで。*/
    padding: 20px 20px 20px 54px;
    /*上、右、下、左への余白。最後の数字と上のtext-indentの数字と揃えておく。text-indentは必ずマイナスをつけた状態で。*/
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    .faq dt {
        text-indent: -58px;
        /*テキストのインデントの調整*/
        padding: 20px 20px 20px 58px;
        /*余白の調整*/
    }
}


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


/*アイコン（Font Awesome）*/

.faq dt::before {
    font-family: "Font Awesome 5 Free";
    /*Font Awesomeを使う指定*/
    content: "\f059";
    /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
    color: var(--primary-color);
    /*アイコンの色*/
    padding: 0 20px;
    /*上下、左右への余白*/
}


/*回答*/

.faq dd {
    padding: 0 40px 30px;
    /*上、左右、下への余白*/
}


/*opencloseを適用した要素のカーソル*/

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


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/

.pagetop-show {
    display: block;
}

.pagetop {
    padding: 0;
    margin: 0;
}

.pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 50px;
    /*幅*/
    line-height: 50px;
    /*高さ*/
    position: fixed;
    right: 30px;
    /*右からの配置場所指定*/
    bottom: 30px;
    /*下からの配置場所指定*/
    color: #fff;
    /*文字色*/
    background: rgba(0, 0, 0, 0.4);
    /*背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/
    border: 1px solid #fff;
    /*枠線の幅、線種、色*/
}


/*マウスオン時*/

.pagetop a:hover {
    background: rgb(162 187 67);
}


/*btnの設定
---------------------------------------------------------------------------*/


/*ボタンを囲むブロック*/

.btn {
    text-align: center;
    /*内容をセンタリング*/
    font-size: 1.2rem;
    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}


/*ボタン*/

.btn a,
.btn input {
    display: inline-block;
    text-decoration: none;
    border: none;
    background: #a2bb43;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 5px;
    padding: 15px 50px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    .btn a {
        padding: 15px 40px;
        /*上下、左右へのボタン内の余白*/
        letter-spacing: 0.1em;
        /*文字間隔を少しだけ広く*/
        font-size: 18px;
    }
}


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


/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/

.btn i {
    padding-left: 10px;
    /*アイコンとテキストの間に空ける余白*/
    transform: scale(1.5);
    /*アイコン画像を1.5倍にする*/
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    .btn i {
        padding-left: 20px;
        /*アイコンとテキストの間に空ける余白*/
    }
}


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


/*ボタンのマウスオン時*/

.btn a:hover,
.btn input:hover {
    opacity: 0.9;
    /*透明度。0.9は色が90%ついた状態のこと。*/
}


/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/


/*大きな画像が表示されるブロック*/

.thumbnail-view {
    max-width: 1000px;
    /*最大幅*/
    margin: 0 auto 1rem;
    /*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
    text-align: center;
    /*画像が小さい場合でもセンタリングされるように*/
}


/*サムネイル全体を囲むブロック*/

.thumbnail {
    display: flex;
    /*flexを使う指定*/
    justify-content: center;
    /*並びかたの種類の指定。これはセンタリングする指定。*/
    margin-bottom: 2rem;
    /*下に空けるスペース。２文字分。*/
}


/*サムネイル画像*/

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

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


/*こだわりアイコンブロックの設定（※CMS用）
---------------------------------------------------------------------------*/

.specialbox {
    display: inline-block;
}

.specialbox img {
    padding: 2px 0;
    ;
}


/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/

.panorama-img {
    width: 100% !important;
    height: 200px !important;
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    .panorama-img {
        height: 500px !important;
    }
}


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


/*テーマカラーの背景色の「注目物件」ボックス
---------------------------------------------------------------------------*/


/*ボックスの設定*/

.bg1 {
    background: #a2bb43;
    padding: 12px;
    border-radius: 5px;
    color: var(--primary-inverse-color);
}


/*ボックス内のリンクテキスト*/

.bg1>a {
    color: inherit;
    /*文字色*/
}


/*ボックス内のh2タグ*/

.bg1 h2 {
    color: #fff;
    text-align: center;
    margin: 0 !important;
}


/*ボックス内のh2タグのbefor（下線のデフォルトの状態の設定）*/

.bg1 h2::before {
    background: transparent;
    /*線となる背景の色。transparentは透明の事。*/
}


/*ボックス内のh2タグのafter（アニメーションの初期設定）*/

.bg1 h2::after {
    background: #fff;
    /*線となる背景の色*/
    transform-origin: center top;
    /*線の出現起点が中央からになるように。*/
}


/*その他
---------------------------------------------------------------------------*/

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.color-theme,
.color-theme a {
    color: var(--primary-color) !important;
}

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

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

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

.wl {
    width: 95%;
    display: block;
    border: #a2bb43 solid 2px;
    border-radius: 3px;
}

.large {
    font-size: 2rem;
}

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

.look {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 20px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    margin: 5px 0;
}

.ofx {
    overflow-x: hidden;
}

.pc {
    display: none;
}

.dn {
    display: none !important;
}


/*画面幅800px以上の追加指定*/

@media screen and (min-width:800px) {
    .ws {
        width: 45%;
        display: inline-block;
    }

    .sh {
        display: none;
    }

    .pc {
        display: block;
    }
}


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


/*物件情報*/

section.information h3 {
    border-bottom: 1px solid #a2bb43;
    color: #a2bb43;
}

table.information_table {
    width: 100%;
}

table.information_table th {
    border: 1px solid #a2bb43;
    padding: 9px;
    color: #a2bb43;
    background: #faffe5;
}

table.information_table th.first {
    width: 45%;
}

table.information_table th.second {
    width: 15%;
}

table.information_table th.third {
    width: 25%;
}

table.information_table th.fourth {
    width: 15%;
}

table.information_table td {
    font-size: 16px;
    text-align: center;
    padding: 9px;
    border: 1px solid #a2bb43;
}

table.information_table td.left {
    text-align: left;
}

table.information_table span {
    color: #fff;
    background: #f64c5a;
    padding: 7px;
    border-radius: 50%;
}

table.information_table .fa-link {
    color: #8ca62a;
}

table.information_table .fa-link:hover {
    color: #000;
}

br.sp {
    display: none;
}

@media (max-width: 600px) {
    table.information_table th {
        padding: 5px;
    }

    table.information_table th.first {
        width: 44%;
    }

    table.information_table th.second {
        width: 13%;
    }

    table.information_table th.third {
        width: 30%;
    }

    table.information_table th.fourth {
        width: 13%;
    }

    table.information_table td {
        font-size: 15px;
        padding: 5px;
    }

    br.sp {
        display: block;
    }

    table.information_table.parking th.first {
        width: 50%;
    }

    table.information_table.parking th.second {
        width: 30%;
    }

    table.information_table.parking th.third {
        width: 20%;
    }
}


/*追加CSS*/


/*TOP*/

@media (min-width: 768px) {
    .slide5.sp {
        display: none;
    }
}

@media (max-width: 767px) {
    .slide5.pc {
        display: none;
    }
}

.logo_img {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-around;
    margin-top: 50px;
}

.logo_img a {
    display: block;
    width: 30%;
}

.logo_img img {
    width: 100%;
    height: 65px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .logo_img {
        flex-direction: column;
        margin-top: 20px;
    }

    .logo_img a {
        display: block;
        width: 210px;
        margin: auto;
    }
}


/*コンサルティング詳細情報*/

.information.detail table.information_table tr td:first-child:not(.map) {
    border: 1px solid #a2bb43;
    color: #a2bb43;
    background: #faffe5;
    text-align: center;
    font-weight: bold;
}

table.information_button {
    margin: 20px auto;
    background: #a2bb43;
    padding: 5px 30px;
    display: block;
    width: fit-content;
    border-radius: 5px;
}

table.information_button a {
    color: #fff;
}

table.information_button a:hover {
    color: #dadad6;
}

table.information_table .map {
    width: 45%;
    max-width: 400px;
    margin: auto;
    border: none;
    padding: 10px 30px;
}

table.information_table .map a {
    display: block;
}

table.information_table .map a img {
    display: block;
    width: 100%;
    margin: auto;
}

table.information_table .map.medium a img {
    width: 70%;
}

table.information_table .map.small a img {
    width: 50%;
}

@media (max-width: 600px) {
    table.information_table .map {
        width: 50%;
        padding: 5px 0 0 0;
    }

    table.information_table .map a img,
    table.information_table .map.small a img,
    table.information_table .map.medium a img {
        width: 100%;
    }
}


/*コンサルティング*/

h3.green {
    border-bottom: 1px solid #a2bb43;
    color: #a2bb43;
}

section.consulting h4 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    color: #8eb83c;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #a2bb43;
}

section.consulting p {
    font-size: 16px;
}

section.consulting span.label {
    color: #fff;
    margin-bottom: 15px;
    padding: 0.5em 1em 0.5em 0.5em;
    display: inline-block;
    line-height: 1.3;
    background: #a2bb43;
    vertical-align: middle;
    border-radius: 25px 0px 0px 25px;
}

section.consulting span.label::before {
    content: '●';
    color: white;
    margin-right: 8px;
}

section.consulting .consulting_img {
    margin: 20px 0;
}

section.consulting .consulting_img img {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto 80px;
    display: block;
}

.consulting_flow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    margin-left: 20px;
}

.consulting_flow ul {
    padding: 0;
}

.consulting_flow li {
    list-style-type: none;
    margin: 0;
}

.consulting_flow dd {
    margin-left: 0;
}

.consulting_flow .flow {
    position: relative;
    width: 100%;
}

.consulting_flow .flow::before {
    content: "";
    width: 15px;
    height: 100%;
    background: #eee;
    margin-left: -129px;
    display: block;
    position: absolute;
    top: 0;
    left: 120px;
    border-radius: 20px;
}

.consulting_flow .flow>li {
    position: relative;
}

.consulting_flow .flow>li:not(:last-child) {
    margin-bottom: 40px;
}

.consulting_flow .flow>li .icon {
    font-size: 0.8em;
    width: 2em;
    height: 2em;
    line-height: 2;
    text-align: center;
    font-weight: bold;
    border-radius: 100vh;
    color: #fff;
    background: #8EB83C;
    display: inline-block;
    margin-right: 0.3em;
}

.consulting_flow .flow>li dl {
    padding-left: 70px;
    position: relative;
}

.consulting_flow .flow>li dl::before,
.consulting_flow .flow>li dl::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
}

.consulting_flow .flow>li dl::before {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    background: #8EB83C;
    border-radius: 50%;
    left: -4px;
}

.consulting_flow .flow>li dl::after {
    width: 50px;
    border-bottom: 1px dashed #999;
    position: absolute;
    left: 5px;
}

.consulting_flow .flow>li dl dt {
    font-size: 16px;
    font-weight: 600;
    color: #2d2e2c;
    margin-bottom: 0.2em;
    display: flex;
    align-items: center;
}


/*プライバシーポリシー*/

.label {
    border-top: 1px solid #a2bb43;
    border-bottom: 1px solid #a2bb43;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 10px 5px;
    background: #b9cd6b;
    color: #ffffff;
}

.privacy span {
    font-size: 18px;
    font-weight: bold;
}

.privacy p {
    font-size: 16px;
}


/*お問い合わせ*/

input.wl {
    height: 35px;
}

textarea.input_text {
    width: 100%;
    height: 250px;
    border: 1px solid #a2bb43;
    border-radius: 3px;
}

button {
    width: 45%;
    padding: 10px 20px;
    background: #a2bb43;
    color: #fff;
    border: 1px solid #a2bb43;
    border-radius: 5px;
    transition: .2s;

    &:hover {
        color: #a2bb43;
        background: #fff;
    }
}