@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Q&Aブログ h2/h3 見出し装飾用(2025-10-28)ah
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.single-qa .editor_area h2:not(.h2b) {
	position: relative;
	font-size: 28px;
	line-height: 1.4;
	clear: both;
	font-weight: bold;
	padding: 0px 0px 10px;
	margin-top: 2em;
	margin-bottom: 1em;
	border-bottom-width: 4px;
	border-bottom-style: double;
	border-color: #317300;
}

.single-qa .editor_area h3:not(.h3b) {
	position: relative;
	font-size: 20px;
	line-height: 1.4;
	clear: both;
	font-weight: bold;
	padding: 10px 0 10px 15px;
	margin-top: 2em;
	margin-bottom: 1em;
	border-left-width: 8px;
	border-left-style: solid;
	border-color: #317300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用スタイル　＞　サイトのテーマ色を一括指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 文字色 */
body.sp[class*="voice"] ul.child_navi a[href*="voice"], body.sp dl.type01 [class*="current"] > a, body.sp dl.type01 dt, a.basic_btn02, .basic_list01 li:before, ol.basic_list02 > li:after, a.basic_color_font, [class*="current"] .basic_color_font_cur, [class*="current"] .basic_color_font_cur:hover, .basic_color_font_bf:before, .basic_color_font_af:after {
    color: #317300;
}

/* ボーダー色 */
body.sp dl.type01 > dt .arrow, h3[class*="h3a"], h2[class*="h2a"], .basic_box02, .basic_list02 > li, .basic_color_border, .basic_color_border_bg:before, .basic_color_border_af:after {
    border-color: #317300;
}

/* 背景色 */
a.basic_btn01, h3[class*="h3b"], ol.basic_list02 > li:before, .basic_color_bg, .basic_color_bg_bf:before, .basic_color_bg_af:after {
    background-color: #317300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ローディング処理
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ローディング時の背景 */
#loading_container .back {
    background-color: #fff;
}

#loading_container p.loading_icon {
    width: 110px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* [.h2a][.h2b]共通のスタイル */
h2[class*="h2"] {
    font-weight: bold;
}

h2[class*="h2b"] {
    padding: 70px 0 0px;
}

h2[class*="h2b"]:before {
    width: 45px;
    height: 48px;
    right: calc(50% - 22px);
    background: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/svg/green.svg) no-repeat 50% 50% / contain;
}

/* [.h3a][.h3b]共通のスタイル */
h3[class*="h3"] {
    font-weight: bold;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用ボタン01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.basic_btn01 {
    font-weight: bold;
    border-radius: 7px;
}

body.home a.basic_btn01 {
    font-size: 20px;
    padding: 20px 30px;
}

a.basic_btn01.white {
    background-color: #fff;
    color: #317300;
    border: 2px solid #fff;
}

a.basic_btn01.white:hover {
    opacity: 1;
    background-color: #264e08;
    color: #fff;
}

a.basic_btn01:after {
    margin-top: -.5em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　テーブル01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.basic_table01 th, .basic_table01 td {
    border-color: #92a880;
}

.basic_table01 th {
    background-color: #e9f9de;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　テーブル02
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.basic_table02 th {
    border-color: #317300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ビジュアルエディタ　＞　汎用ボックス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.basic_box01 {
    background-color: #f9f5d2;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用クラス・タグ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h2.cmn_ttl {
    font-size: 36px;
    font-weight: bold;
    color: #317300;
    display: table;
    margin: 0 auto 30px;
    padding: 0 110px;
    position: relative;
}

h2.cmn_ttl:before,h2.cmn_ttl:after {
    content: '';
    background: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/svg/works_h2_icon.svg) no-repeat 50% 50% / contain;
    width: 85px;
    height: 29px;
    position: absolute;
    top: calc(50% - 15px);
}

h2.cmn_ttl:before {
    left: 0px;
}

h2.cmn_ttl:after {
    right: 0px;
    transform: scale(-1,1);
}

body.home p.btn {
    text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用カスタム　＞　施工事例
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.cmn_works_list {
    margin: 0 -15px -30px;
}

ul.cmn_works_list li {
    width: calc(33.333% - 30px);
    padding: 30px;
    margin: 0 15px 30px;
    background-color: #fff;
    box-shadow: 0 0 13px rgba(144, 144, 144, 0.2);
    position: relative;
}

ul.cmn_works_list li:hover {
    opacity: 1;
}

ul.cmn_works_list p.cat {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    background-color: rgba(49, 115, 0, .9);
    color: #fff;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1;
    padding: 7px 20px;
}

ul.cmn_works_list p.img {
    margin-bottom: 15px;
    transition: .3s;
}

ul.cmn_works_list li:hover p.img {
    opacity: .8;
}

ul.cmn_works_list h3 a {
    font-size: 18px;
    font-weight: bold;
    color: #13442c;
    text-decoration: none;
}

ul.cmn_works_list h3 a:hover {
    text-decoration: none;
}

/*---施工事例詳細ページ---*/
body.single-works #main_area {
    width: 780px;
}

body.single-works #main_area .article_title.plain_type h1 {
    border: none;
}

body.single-works .article_title.plain_type > * {
    display: inline-block;
}

body.single-works .cat {
    color: #fff;
    background-color: rgba(49, 115, 0, .9);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding: 7px 17px;
    vertical-align: .3em;
    margin: 0 10px 0 0;
}

.cmn_works_slick {
    width: 600px;
    margin: 0 auto;
}

.cmn_works_slick .img {
    padding-top: 400px;
}

.cmn_works_slick .img a {
	text-decoration:none;
}

.cmn_works_slick ul.slick-dots {
    display: flex!important;
    flex-wrap: wrap;
    position: static;
    width: calc(100% + 10px);
    margin: 15px -5px 0;
}

.cmn_works_slick ul.slick-dots li {
    width: calc(12.5% - 10px);
    height: 65px;
    overflow: hidden;
    margin: 0 5px 10px;
}

.cmn_works_slick .slick-dots li img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* 画像の高さを画像コンテナの高さに収める（4:3画像がアップされた場合に隙間が空かない様に考慮し、15%のゆとりを持たせる） */
    /* height: 115%!important; */
    /* width: auto; */
    height: 100%!important;
    width: 100%;
    /* ▼background-size:cover的に動作する */
    object-fit: cover;
    /* IE対策（併せて「ofi.js」を読み込むことではじめて正しく機能する） */
    font-family: 'object-fit: cover;';
}

/*---プレビューボタン---*/
.cmn_works_slick .slick-prev, .cmn_works_slick .slick-next {
    background: none;
    border: none;
    top: 200px;
}

.cmn_works_slick .slick-prev:before, .cmn_works_slick .slick-next:before {
    width: 25px;
    height: 25px;
}

/*---▼虫眼鏡---*/
.cmn_works_slick [rel*=lightbox]:after {
    font-size: 24px;
    font-family: "icomoon";
    content: '\e905';
    line-height: 1;
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    text-shadow: none;
    background-color: rgba(0, 0, 0, .6);
    padding: 3px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　汎用インスタ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cmn_insta {
    background-color: #fff;
}

.cmn_insta > * {
    padding: 35px;
}

.cmn_insta .area_a {
    width: calc(100% - 880px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmn_insta .area_b {
    width: 880px;
}

.cmn_insta h2 a {
    font-size: 18px;
    font-weight: bold;
    color: inherit;
    text-decoration: none;
    text-align: center;
    display: block;
}

.cmn_insta h2 a:hover {
    opacity: .8;
}

.cmn_insta h2 a:after {
    content: '';
    display: block;
    width: 161px;
    height: 35px;
    background: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/insta.png) no-repeat 50% 50% / contain;
    margin: 10px 0 0 -12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層ページ　＞　ヘッダー画像
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page_promo .txt_box {
    background-color: #fff;
    width: auto;
    padding: 20px 40px;
    min-width: 400px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #15580b;
}

body[class*="works"]:not([class*="tax"]) .page_promo .txt_box .sub_ttl {
    display: none;
}

.page_promo .img_wrap {
    height: 300px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#promo_frame {
    /*---（画面高さ-ヘッダー高さ-スライドバナーの高さ）---*/
    height: calc(100vh - 87px - 57px - 179px);
    /*---ノートパソコン時は、ツイートエリアは入れない---*/
    min-height: 570px;
    max-height: 640px;
    position: relative;
    z-index: 0;
}

div#promo_frame .txt_wrap {
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 3%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
}

div#promo_frame .txt_wrap img {
    width: 50%;
    max-width: 861px;
}

/*---プロモスライド---*/
div#promo_frame .vegas {
    height: 100%!important;
}

div#promo_frame .vegas-animation-kenburnsUp {
    animation: kenburns ease-out;
}

@-webkit-keyframes kenburnsUp2 {
    0% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1) translate(0,0);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　ツイートエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tweet_area {
    max-width: 1200px;
    margin: 0 auto;
}

.tweet_area .f_wrap > *{
    height: 64px;
}

.tweet_area .f_wrap {
    max-width: 800px;
    margin: -64px 0 0;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, .9);
}

.tweet_area .icon {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    background-color: #299f64;
}

.tweet_area ul.items {
    width: calc(100% - 200px);
    padding: 20px 40px;
}

.tweet_area a {
    color: #317300;
}

.tweet_area ul.items a:hover,.tweet_area .more a:hover {
    text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_bnr
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_bnr {
    background-color: #317300;
}

div#home_bnr .ul_slide {
    margin: 0 -15px;
}

div#home_bnr .ul_slide .li {
    margin: 0 15px;
    background-color: #fff;
}

/*---プレビューボタン---*/
div#home_bnr .ul_slide .slick-prev, div#home_bnr .ul_slide .slick-next {
    border-color: #317300;
    background-color: #d5f1c0;
    width: 35px;
    height: 35px;
}

div#home_bnr .ul_slide .slick-prev {
    left: -45px;
}

div#home_bnr .ul_slide .slick-next {
    right: -45px;
}

div#home_bnr .ul_slide .slick-prev:before, div#home_bnr .ul_slide .slick-next:before {
    border-color: #317300;
    width: 7px;
    height: 7px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_onayami
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_onayami h2 {
    font-size: 30px;
    font-weight: bold;
    color: #4b3a18;
    text-align: center;
    display: table;
    padding: 0 40px;
    margin: 0 auto 40px;
    position: relative;
    max-width: 950px;
}

div#home_onayami h2::before, div#home_onayami h2::after {
    content: '';
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #317300;
    transform: rotate(-30deg);
}

div#home_onayami h2::after {
    left: 100%;
    transform: rotate(30deg);
}

div#home_onayami h2 span.border {
    background: no-repeat 0% 90% / auto;
    padding-left: 3px;
}

div#home_onayami.lazyloaded h2 span.border {
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/red_border.png);
}

div#home_onayami ol.items {
    margin: 0 -15px 20px;
    position: relative;
}

div#home_onayami ol.items:before,div#home_onayami ol.items:after {
    content: '';
    position: absolute;
    bottom: 100%;
    background: no-repeat 50% 50% / contain;
}

div#home_onayami.lazyloaded ol.items:before {
    left: 5px;
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/onayami_img01.png);
    width: 128px;
    height: 139px;
}

div#home_onayami.lazyloaded ol.items:after {
    right: 21px;
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/onayami_img02.png);
    width: 122px;
    height: 140px;
}

div#home_onayami ol.items li {
    width: calc(33.333% - 30px);
    border: 3px solid #92b76e;
    border-radius: 7px;
    padding: 30px;
    margin: 0 15px 30px;
    position: relative;
}

div#home_onayami ol.items h3 {
    font-size: 19px;
    font-weight: bold;
    color: #2b7300;
    padding-left: 50px;
    margin-bottom: 12px;
    position: relative;
}

div#home_onayami ol.items h3::before {
    content: '悩み';
    color: #fff;
    font-size: 18px;
    background: no-repeat 50% 50% / contain;
    width: 60px;
    height: 60px;
    position: absolute;
    top: -5px;
    left: -20px;
    display: flex;
    align-items: center;
    padding: 5px 5px 0;
    box-sizing: border-box;
}

div#home_onayami ol.items h3::before {
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/svg/nayami_ol_bg.svg);
}

div#home_onayami ol.items h3::after {
    content: '' counters(ol_cnt, "");
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    color: #deff00;
    position: absolute;
    top: 12px;
    left: 20px;
    z-index: 1;
}

div#home_onayami ol.items p.img {
    margin-bottom: 12px;
}

div#home_onayami ol.items p.txt {
    line-height: 1.6;
}

div#home_onayami ul.bnr_wrap {
    justify-content: center;
    margin: 0 auto;
    max-width: 1860px;
}

div#home_onayami ul.bnr_wrap li {
    margin: 0 10px;
    flex: 1;
    background: no-repeat 50% 50% / cover;
    position: relative;
    z-index: 0;
    padding: 75px 10px;
    text-align: center;
    max-width: 600px;
}

div#home_onayami ul.bnr_wrap li:hover {
    opacity: 1;
}

div#home_onayami.lazyloaded ul.bnr_wrap li.gardening {
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/gardening.jpg);
}

div#home_onayami.lazyloaded ul.bnr_wrap li.maintenance {
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/maintenance.jpg);
}

div#home_onayami.lazyloaded ul.bnr_wrap li.exterior {
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/exterior.jpg);
}

div#home_onayami ul.bnr_wrap li::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, .3);
    z-index: -1;
    transition: .3s;
}

div#home_onayami ul.bnr_wrap li:hover::before {
    opacity: 0;
}

div#home_onayami ul.bnr_wrap h3 {
    margin-bottom: 10px;
}

div#home_onayami ul.bnr_wrap h3 a {
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

div#home_onayami ul.bnr_wrap p.txt {
    color: #fff;
    line-height: 1.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_works
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_works.lazyloaded {
    background: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/works_bg.jpg) no-repeat 50% 50% / cover;
}

div#home_works ul.cmn_works_list {
    margin-bottom: 30px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_message
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_message .pc_base_width {
    position: relative;
    padding: 0 40px 0 540px;
    margin-bottom: 35px;
}

div#home_message h2 {
    font-size: 36px;
    line-height: 1.5;
    margin-bottom: 40px;
}

div#home_message span.border {
    background: linear-gradient(transparent 60%, #ffea00 60%);
    color: #5aa81f;
}

div#home_message p.img {
    position: absolute;
    top: 20px;
    left: 40px;
}

div#home_message p.main_txt {
    margin-bottom: 30px;
}

div#home_message p.name {
    text-align: right;
    font-size: 18px;
}

div#home_message p.name strong {
    font-size: 30px;
    font-weight: normal;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_jisseki
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_jisseki {
    background-color: #264e08;
    position: relative;
}

div#home_jisseki h2.ttl {
    width: 160px;
    height: 160px;
    position: absolute;
    top: -50px;
    left: calc(50% - 650px);
    background: no-repeat 50% 50% / contain;
    z-index: 1;
}

div#home_jisseki ul.items {
    position: relative;
    margin: 0 auto 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div#home_jisseki ul.items li {
    margin: 0 10px;
}

div#home_jisseki ul.items p.img {
    margin-bottom: 15px;
}

div#home_jisseki ul.items h3 {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

div#home_jisseki p.btn {
    margin-bottom: 35px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_nogeiya
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_nogeiya {
    background-color: #e4f7ed;
}

/*---農芸屋の画像サイズ優先---*/
div#home_nogeiya .info_wrap {
    background-color: #fff;
    margin-bottom: 40px;
}

div#home_nogeiya .info_wrap .area_a {
    width: calc(100% - 672px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

div#home_nogeiya .info_wrap .area_b {
    width: 672px;
}

div#home_nogeiya .info_wrap h2 {
    margin: 0 auto 15px;
}

div#home_nogeiya .info_wrap h2 a {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    text-align: center;
    background-color: #8ab700;
    display: table;
    padding: 12px 25px;
    border-radius: 10em;
}

div#home_nogeiya .info_wrap h3 {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    color: #1e6b57;
    margin-bottom: 25px;
}

div#home_nogeiya .info_wrap p.addr {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 5px;
}

div#home_nogeiya .info_wrap p.open {
    font-size: 18px;
}

div#home_nogeiya .info_wrap p.tel {
    font-size: 24px;
    font-weight: bold;
}

div#home_nogeiya .info_wrap p.tel strong {
    color: #2b865a;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#home_map
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#home_map {
    padding-bottom: 50px;
}

div#home_map .map {
    margin-bottom: 30px;
}

div#home_map .map iframe {
    vertical-align: bottom;
}

div#home_map p.route a {
    font-size: 18px;
    font-weight: bold;
    color: #299f64;
    border: 2px solid #299f64;
    text-decoration: none;
    border-radius: 7px;
    padding: 13px 35px;
    display: table;
    margin: 0 auto;
}

div#home_map p.route a:hover {
    background-color: #e4f7ed;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　#contact_area
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#contact_area {
    background-color: #eaf8e0;
}

div#contact_area .main_box {
    border: 10px solid #317300;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    background: no-repeat 100% 50% / contain #fff;
}

div#contact_area.lazyloaded .main_box {
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/info_box_bg.jpg);
}

div#contact_area .main_box p.lead {
    position: absolute;
    top: -50px;
    left: 35px;
}

div#contact_area .main_box h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    color: #317300;
    max-width: 700px;
    margin: 0 auto 5px;
}

div#contact_area .main_box h2 span.border {
    background: linear-gradient(transparent 50%, #fcff00 50%);
}

div#contact_area p.sub_lead {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 20px;
}

#contact_area span.emphasis {
    color: #ff8400;
}

div#contact_area .info_wrap {
    justify-content: center;
    margin-bottom: 25px;
}

div#contact_area .info_wrap > * {
    margin: 0 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
}

div#contact_area .info_wrap a {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 450px;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 10px 30px 10px 80px;
}

div#contact_area .info_wrap .tel a {
    font-size: 38px;
    color: #06295c!important;
    background-color: #e4eefb;
}

div#contact_area .info_wrap .contact a {
    font-size: 32px;
    color: #317300;
    background-color: #eaf8e0;
}

div#contact_area .info_wrap .contact a:hover {
    opacity: .8;
}

div#contact_area .info_wrap a:hover {
    text-decoration: none;
}

div#contact_area .info_wrap .info_ttl {
    font-size: 14px;
    color: #fff;
    width: 90px;
    height: 140px;
    border-radius: 0 50% 50% 0;
    position: absolute;
    top: calc(50% - 70px);
    left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 14px 30px 10px;
}

div#contact_area .info_wrap .tel .info_ttl {
    background-color: #0f68e6;
}

div#contact_area .info_wrap .contact .info_ttl {
    background-color: #317300;
}

div#contact_area .info_wrap .info_ttl::before {
    content: '';
    background: no-repeat 50% 50% /contain;
    display: block;
    margin-bottom: 5px;
}

div#contact_area.lazyloaded .info_wrap .tel .info_ttl::before {
    width: 24px;
    height: 45px;
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/svg/sumaho.svg);
}

div#contact_area.lazyloaded .info_wrap .contact .info_ttl::before {
    width: 36px;
    height: 26px;
    background-image: url(https://grworks.co.jp/wordpress/wp-content/themes/cyber-child/images/svg/mail2.svg);
}

div#contact_area .main_box p.addr {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

div#contact_area ul.bnr_wrap {
    justify-content: center;
    margin-bottom: 30px;
}

div#contact_area ul.bnr_wrap li {
    max-width: 278px;
    margin: 0 10px ;
}

/*---IEの為の記述---*/
div#contact_area ul.bnr_wrap li img {
    width: 100%;
}

div#contact_area dl.tiiki {
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;
    border-radius: 7px;
    text-align: center;
    overflow: hidden;
}

div#contact_area dl.tiiki > * {
    padding: 25px;
}

div#contact_area dl.tiiki dt {
    background-color: #8dbe18;
    width: 130px;
}

div#contact_area dl.tiiki h2 {
    font-size: 18px;
    line-height: 1.8;
    font-weight: bold;
    color: #fff;
}

div#contact_area dl.tiiki dd {
    color: #805f28;
    width: calc(100% - 130px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層　＞　農芸屋
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*寄せ植え教室*/
.basic_box02.yoseue_close {
    position: relative;
}

.basic_box02.yoseue_close::before {
    content: "終了いたしました。";
    color: #fff;
    font-size: 24px;
    line-height: 286px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(49, 115, 0, .7), rgba(49, 115, 0, .7));
}