/**
* Template Name: Append
* Updated: Sep 18 2023 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/append-bootstrap-website-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
    --default-font: "hiragino-kaku-gothic-pron","Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Montserrat", sans-serif;
    --nav-font: "Lato", sans-serif;
    --default-font-size: 16px;
}

/* Global Colors */
:root {
    --background-color: #ffffff;
    --background-color-rgb: 255, 255, 255;
    --background-color-2nd: #83B529;
    --background-color-2nd-rgb: 131, 181, 41;
    --background-color-3rd: #007749;
    --background-color-3rd-rgb:  0, 119, 73;
    --background-color-4th: #ECEBD6;
    --background-color-4th-rgb: 236, 235, 214;
    --default-color: #212529;
    --default-color-rgb: 33, 37, 41;
    --primary-color: #83B529;
    --primary-color-rgb: 120, 172, 37;
    --secondary-color: #007749;
    --secondary-color-rgb: 0, 119, 73;
    --contrast-color: #ffffff;
    --contrast-color-rgb: 255, 255, 255;
    --secondary-reverse-color: #ffffff;
}
/* Nav Menu Colors */
:root {
    --nav-color: #3a3939;
    --nav-hover-color: #e84545;
    --nav-dropdown-color: #3a3939;
    --nav-dropdown-hover-color: #e84545;
    --nav-dropdown-background-color: #ffffff;
    --nav-mobile-background-color: #ffffff;
}

/* button colors */
:root {
    --button-primary-color: #F36835 ;
    --button-hover-color: #e84545;
    --button-text-color: #ffffff;

}


/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.primary-color {
    color: var(--secondary-color);
}
.secondary-color {
    color: var(--secondary-color);
}


html,
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
    font-size: var(--default-font-size);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: rgba(var(--primary-color-rgb), 0.7);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--secondary-color);
    font-family: var(--heading-font);
}

section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    overflow: clip;
}

/*--------------------------------------------------------------
# Section Title
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
}

.section-title h2 {
    font-size: 2.0em;
    font-weight: 700;
    position: relative;
}

.section-title h2:before,
.section-title h2:after {
    content: "";
    width: 50px;
    height: 2px;
    background: var(--primary-color);
    display: inline-block;
}

.section-title h2:before {
    margin: 0 15px 10px 0;
}

.section-title h2:after {
    margin: 0 0 10px 15px;
}

.section-title p {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Page Title & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
}

.page-title .heading {
    padding: 80px 0;
    border-top: 1px solid rgba(var(--default-color-rgb), 0.1);
}

.page-title .heading h1 {
    font-size: 2.375em;
    font-weight: 700;
    color: var(--secondary-color);
}

.page-title nav {
    background-color: rgba(var(--default-color-rgb), 0.05);
    padding: 20px 0;
}

.page-title nav ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.page-title nav ol li+li {
    padding-left: 10px;
}

.page-title nav ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: rgba(var(--default-color-rgb), 0.3);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    --background-color: #ffffff;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 15px 0;
    transition: all 0.5s;
    z-index: 997;
}

.header .logo img {
    max-height: 40px;
    margin-right: 6px;
}

.header .logo h1 {
    font-size: 1.5em;
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
}

.header .logo span {
    color: var(--primary-color);
    font-size: 1.5em;
    font-weight: 600;
    padding-left: 3px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--button-text-color);
    background: var(--button-primary-color);
    font-size: 0.875em;
    padding: 8px 26px;
    margin: 0;
    border-radius: 4px;
    transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: var(--button-hover-color) ;
}

@media (max-width: 1200px) {
    .header .logo {
	order: 1;
    }

    .header .btn-getstarted {
	order: 2;
	margin: 0 15px 0 0;
	padding: 6px 20px;
    }

    .header .navmenu {
	order: 3;
    }
}

/* Global Header on page scroll
------------------------------*/
.scrolled .header {
    --background-color: #ffffff;
    --secondary-color: #444444;
    --nav-color: #444444;
    --nav-hover-color: #e84545;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
}

/* Global Scroll Margin Top
------------------------------*/
section {
    scroll-margin-top: 90px;
}

@media (max-width: 1199px) {
    section {
	scroll-margin-top: 66px;
    }
}

/* Home Page Custom Header
------------------------------*/
.index-page .header {
    --background-color: rgba(255, 255, 255, 0);
    --secondary-color: #ffffff;
    --nav-color: rgba(255, 255, 255, 0.515);
    --nav-hover-color: #ffffff;
}

/* Home Page Custom Header on page scroll
------------------------------*/
.index-page.scrolled .header {
    --background-color: #ffffff;
    --secondary-color: #444444;
    --nav-color: #444444;
    --nav-hover-color: #d83535;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
    .navmenu {
	padding: 0;
	margin-left: 1.0em ;
	margin-right: 1.0em ;
    }

    .navmenu ul {
	margin: 0;
	padding: 0;
	display: flex;
	list-style: none;
	align-items: center;
    }

    .navmenu li {
	position: relative;
    }

    .navmenu a,
    .navmenu a:focus {
	color: var(--nav-color);
	padding: 18px 15px;
	font-size: 16px;
	font-family: var(--nav-font);
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
	transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
	font-size: 12px;
	line-height: 0;
	margin-left: 5px;
	transition: 0.3s;
    }

    .navmenu li:last-child a {
	padding-right: 0;
    }

    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
	color: var(--nav-hover-color);
    }

    .navmenu .dropdown ul {
	margin: 0;
	padding: 10px 0;
	background: var(--nav-dropdown-background-color);
	display: block;
	position: absolute;
	visibility: hidden;
	left: 14px;
	top: 130%;
	opacity: 0;
	transition: 0.3s;
	border-radius: 4px;
	z-index: 99;
    }

    .navmenu .dropdown ul li {
	min-width: 200px;
    }

    .navmenu .dropdown ul a {
	padding: 10px 20px;
	font-size: 15px;
	text-transform: none;
	color: var(--nav-dropdown-color);
    }

    .navmenu .dropdown ul a i {
	font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
	color: var(--nav-dropdown-hover-color);
    }

    .navmenu .dropdown:hover>ul {
	opacity: 1;
	top: 100%;
	visibility: visible;
    }

    .navmenu .dropdown .dropdown ul {
	top: 0;
	left: -90%;
	visibility: hidden;
    }

    .navmenu .dropdown .dropdown:hover>ul {
	opacity: 1;
	top: 0;
	left: -100%;
	visibility: visible;
    }

    .navmenu .megamenu {
	position: static;
    }

    .navmenu .megamenu ul {
	margin: 0;
	padding: 10px;
	background: var(--nav-dropdown-background-color);
	box-shadow: 0px 0px 20px rgba(var(--default-color-rgb), 0.1);
	display: block;
	position: absolute;
	top: 130%;
	left: 0;
	right: 0;
	visibility: hidden;
	opacity: 0;
	display: flex;
	transition: 0.3s;
	border-radius: 4px;
	z-index: 99;
    }

    .navmenu .megamenu ul li {
	flex: 1;
    }

    .navmenu .megamenu ul li a,
    .navmenu .megamenu ul li:hover>a {
	padding: 10px 20px;
	font-size: 15px;
	color: var(--nav-dropdown-color);
    }

    .navmenu .megamenu ul li a:hover,
    .navmenu .megamenu ul li .active,
    .navmenu .megamenu ul li .active:hover {
	color: var(--nav-dropdown-hover-color);
    }

    .navmenu .megamenu:hover>ul {
	opacity: 1;
	top: 100%;
	visibility: visible;
    }

    .navmenu .dd-box-shadow {
	box-shadow: 0px 0px 30px rgba(var(--default-color-rgb), 0.15);
    }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
	/*color: var(--nav-color);*/
	color: #444444;
	font-size: 1.75em;
	line-height: 0;
	margin-right: 10px;
	cursor: pointer;
	transition: color 0.3s;
    }

    .navmenu {
	padding: 0;
	z-index: 9997;
    }

    .navmenu ul {
	display: none;
	position: absolute;
	inset: 60px 20px 20px 20px;
	padding: 10px 0;
	margin: 0;
	border-radius: 6px;
	background-color: var(--nav-mobile-background-color);
	overflow-y: auto;
	transition: 0.3s;
	z-index: 9998;
	box-shadow: 0px 0px 30px rgba(var(--default-color-rgb), 0.1);
    }

    .navmenu a,
    .navmenu a:focus {
	color: var(--nav-dropdown-color);
	padding: 10px 20px;
	font-family: var(--nav-font);
	font-size: 17px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
	transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
	font-size: 12px;
	line-height: 0;
	margin-left: 5px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: 0.3s;
	background-color: rgba(var(--primary-color-rgb), 0.1);
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
	background-color: var(--primary-color);
	color: var(--contrast-color);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
	color: var(--nav-dropdown-hover-color);
    }

    .navmenu .active i,
    .navmenu .active:focus i {
	background-color: var(--primary-color);
	color: var(--contrast-color);
	transform: rotate(180deg);
    }

    .navmenu .dropdown ul,
    .navmenu .megamenu ul {
	position: static;
	display: none;
	z-index: 99;
	padding: 10px 0;
	margin: 10px 20px;
	background-color: var(--nav-dropdown-background-color);
	transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul,
    .navmenu .megamenu ul ul {
	background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown>.dropdown-active,
    .navmenu .megamenu>.dropdown-active {
	display: block;
	background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
	overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
	color: #fff;
	position: absolute;
	font-size: 2.0em;
	top: 15px;
	right: 15px;
	margin-right: 0;
	z-index: 9999;
    }

    .mobile-nav-active .navmenu {
	position: fixed;
	overflow: hidden;
	inset: 0;
	background: rgba(33, 37, 41, 0.8);
	transition: 0.3s;
    }

    .mobile-nav-active .navmenu>ul {
	display: block;
    }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 90px;
    z-index: 99999;
    background-color: var(--button-primary-color);
    width: 45px;
    height: 45px;
    border-radius: 4px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 1.5em;
    color: #ffffff;
    line-height: 0;
}

.scroll-top:hover {
    background-color: rgba(var(--primary-color-rgb), 0.8);
    color: #ffffff;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: var(--background-color);
    transition: all 0.6s ease-out;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preloader div {
    width: 13px;
    height: 13px;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    position: absolute;
    left: 50%;
}

#preloader div:nth-child(1) {
    left: calc(50% + 8px);
    animation: animate-preloader-1 0.6s infinite;
}

#preloader div:nth-child(2) {
    left: calc(50% + 8px);
    animation: animate-preloader-2 0.6s infinite;
}

#preloader div:nth-child(3) {
    left: calc(50% + 32px);
    animation: animate-preloader-2 0.6s infinite;
}

#preloader div:nth-child(4) {
    left: calc(50% + 56px);
    animation: animate-preloader-3 0.6s infinite;
}

@keyframes animate-preloader-1 {
    0% {
	transform: scale(0);
    }

    100% {
	transform: scale(1);
    }
}

@keyframes animate-preloader-3 {
    0% {
	transform: scale(1);
    }

    100% {
	transform: scale(0);
    }
}

@keyframes animate-preloader-2 {
    0% {
	transform: translate(0, 0);
    }

    100% {
	transform: translate(24px, 0);
    }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
	transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    --background-color: #f4f4f4;
    color: var(--default-color);
    background-color: var(--secondary-color);
    font-size: 0.875em;
    /*padding-bottom: 50px;*/
}

.footer .footer-top {
    padding-top: 50px;
}

.footer .footer-about .logo {
    line-height: 0;
    margin-bottom: 25px;
}

.footer .footer-about .logo img {
    max-height: 40px;
    margin-right: 6px;
}

.footer .footer-about .logo span {
    color: var(--secondary-color);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--heading-font);
}

.footer .footer-about p {
    font-size: 0.875em;
    font-family: var(--heading-font);
}

.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(var(--default-color-rgb), 0.5);
    font-size: 16px;
    color: rgba(var(--default-color-rgb), 0.5);
    margin-right: 10px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.footer h4 {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-bottom: 12px;
}

.footer .footer-links {
    margin-bottom: 30px;
}

.footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-links ul i {
    padding-right: 2px;
    font-size: 12px;
    line-height: 0;
}

.footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.footer .footer-links ul li:first-child {
    padding-top: 0;
}

.footer .footer-links ul a {
    color: rgba(var(--default-color-rgb), 0.8);
    display: inline-block;
    line-height: 1;
}

.footer .footer-links ul a:hover {
    color: var(--primary-color);
}

.footer .footer-links a {
    color: #ffffff ;
    margin-bottom: 5px;
}

.footer .footer-contact p {
    margin-bottom: 5px;
}

.footer .copyright {
    color: #ffffff;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: var(--secondary-color);
}

.footer .copyright p {
    margin-bottom: 0;
}

.footer .credits {
    margin-top: 6px;
    font-size: 13px;
}

/*--------------------------------------------------------------
# Home Page
--------------------------------------------------------------*/
/* Hero Section - Home Page
------------------------------*/
.hero {
    --default-color: #ffffff;
    --default-color-rgb: 255, 255, 255;
    --background-color: #ffffff;
    --background-color-rgb: 255, 255, 255;
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 160px 0 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
}

.hero:before {
    content: "";
    /*background: rgba(var(--background-color-rgb), 0.5);*/
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero h2 {
    color: var(--contrast-color);
    margin: 0;
    font-size: 44px;
    font-weight: 700;
}

.hero p {
    color: rgba(var(--default-color-rgb), 0.8);
    margin: 5px 0 0 0;
    font-size: 1.25em;
}

.hero .sign-up-form {
    margin-top: 20px;
    padding: 10px;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
}

.hero .sign-up-form .form-control {
    border: none;
}

.hero .sign-up-form .form-control:active,
.hero .sign-up-form .form-control:focus {
    outline: none;
    box-shadow: none;
}

.hero .sign-up-form input[type=submit] {
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 8px 20px 10px 20px;
    border-radius: 7px;
    color: var(--contrast-color);
}

.hero .sign-up-form input[type=submit]:hover {
    background-color: rgba(var(--primary-color-rgb), 0.9);
}

@media (max-width: 768px) {
    .hero {
	--default-color: #ffffff;
	--default-color-rgb: 255, 255, 255;
	--background-color: #ffffff;
	--background-color-rgb: 255, 255, 255;
	width: 100%;
	min-height: auto;
	position: relative;
	padding: 160px 0 110px 0;
	display: flex;
	align-items: center;
	justify-content: center;
    }

    .hero img {
	width: 100%;
	height: auto;
    }
    .hero h2 {
	font-size: 2.0em;
    }

    .hero p {
	font-size: 1.125em;
    }
}

/* ASK ME
------------------------------*/
#askme {
    padding: 0 0;
    /*background: #AA9767;*/
}

#askme .askme {

    padding: 10px 0;
}


#askme .contact-section {

    background-color: #AA9767; /* 茶色の背景色 */
    /* Bootstrapのpy-4が既にpaddingを設定しているため、ここでは不要な場合が多いですが、調整したい場合はここに追加 */
    /* padding: 20px; */
    font-family: sans-serif;
}

#askme .contact-free-estimate {
    font-size: 1.5rem; /* 約24px */
    line-height: 1.2;
}

#askme .custom-phone-btn {
    background-color: #F5F5DC; /* クリーム色っぽい背景 */
    color: #333; /* テキストの色 */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 0.5rem; /* Bootstrapのデフォルトに合わせるか、調整 */
    font-weight: bold;
    font-size: 1.125rem; /* 約18px */
    padding: 0.75rem 1.5rem; /* 上下左右のパディング */
}

#askme .custom-phone-btn:hover {
    background-color: #E0E0C0; /* ホバー時の背景色 */
    color: #333; /* ホバー時のテキスト色を維持 */
}

#askme .custom-form-btn {
    background-color: #FF7F50; /* オレンジ色 */
    color: white; /* テキストの色 */
    border: 1px solid #FF6347; /* 枠線 */
    border-radius: 0.5rem; /* Bootstrapのデフォルトに合わせるか、調整 */
    font-weight: bold;
    font-size: 1.125rem; /* 約18px */
    padding: 0.75rem 1.5rem; /* 上下左右のパディング */
}

#askme .custom-form-btn:hover {
    background-color: #FF6347; /* ホバー時の背景色 */
    color: white; /* ホバー時のテキスト色を維持 */
}

/* 小さいスクリーンでの調整 (電話番号のカッコ書きを非表示にする例) */
@media (max-width: 767.98px) { /* mdブレークポイントより小さい場合 */
    #askme .contact-section {
        flex-direction: column; /* 要素を縦並びにする */
        gap: 15px; /* 縦並びになった時の隙間 */
        padding: 15px; /* モバイルでのパディングを調整 */
    }
    #askme .contact-free-estimate {
        margin-right: 0; /* 右マージンをリセット */
        margin-bottom: 15px; /* 下にマージンを追加 */
    }
    #askme .custom-phone-btn,
    #askme .custom-form-btn {
        width: 90%; /* ボタンの幅を調整 */
        text-align: center; /* ボタン内のテキストを中央揃え */
        justify-content: center; /* アイコンとテキストを中央揃え */
        margin-right: 0 !important; /* 右マージンをリセット */
    }
}

/* ASK ME
------------------------------*/

#consult_us_first {

    padding: 0;
}

#consult_us_first h1 {
    color: var(--secondary-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75em;
    text-align: left;
    border-bottom: 4px dotted var(--secondary-color) ;
}
@media screen and (max-width: 768px) {
    #consult_us_first h1 {
	color: var(--secondary-color);
	font-size: 1.5em;
	border-bottom: 4px dotted var(--secondary-color) ;
    }
}

/* 吹き出し */
#consult_us_first .balloon {
    background-color: #ECEBD6; /* 吹き出しの色 */
    border: 5px solid #dfe1c5; /* 吹き出しの枠線 */
    border-style: dotted;
    padding: 10px; /* 内側の余白 */
    border-radius: 50px; /* 角の丸み */
    position: relative; /* 相対配置の基準 */
    width: 100%; /* 幅 */
    font-size: 2.0em;
    text-align: center;
    /* 変更: 先端が大きくなる分、吹き出し間のマージンをさらに広げる */
    margin-bottom: 60px; /* 以前の 40px からさらに広げる */
    box-sizing: border-box; /* paddingとborderをwidthに含める */
}

#consult_us_first .balloon:before {
    content: '';
    position: absolute;
    /* 変更: bottomをさらに下にずらす */
    bottom: -33px; /* :after の bottom (今回は-30px) - ボーダーの太さ (3px) = -33px */
    z-index: 9; /* :after より奥に配置 */
    border-color: #dfe1c5 transparent transparent transparent; /* 吹き出しの枠線と同じ色 */
    border-style: solid; /* こちらはソリッド（実線）で作成 */
}

/* 吹き出しの先端の基本的なスタイル (背景色) (:after) */
#consult_us_first .balloon:after {
    content: '';
    position: absolute;
    /* 変更: bottomをさらに下にずらす */
    bottom: -30px; /* 吹き出しの先端の縦位置を大きくする分調整 */
    z-index: 10; /* :before より手前に配置 */
    border-color: #ECEBD6 transparent transparent transparent; /* 吹き出しの背景色 */
    border-style: solid; /* こちらもソリッド（実線）で作成 */
}

/* パターン1: 先端を左寄りにする */
#consult_us_first .balloon.tip-left:before {
    /* 変更: leftの位置も調整（border-widthの半分 - 枠の太さ） */
    left: 27px; /* (30px / 2) - 3px = 12px くらいが目安だが、見た目で調整。元の20pxに+7px */
    /* 変更: border-widthを大きくする */
    border-width: 33px 33px 0 0; /* 以前の 23px から大きく */
}
#consult_us_first .balloon.tip-left:after {
    /* 変更: leftの位置も調整（border-widthの半分） */
    left: 30px; /* 以前の 20px から大きく */
    /* 変更: border-widthを大きくする */
    border-width: 30px 30px 0 0; /* 以前の 20px から大きく */
}

/* パターン2: 先端を中央にする */
#consult_us_first .balloon.tip-center:before {
    left: 50%; /* 中央 */
    transform: translateX(-50%); /* 中央寄せの微調整 */
    /* 変更: border-widthを大きくする */
    border-width: 33px 33px 0 0; /* 以前の 23px から大きく */
}
#consult_us_first .balloon.tip-center:after {
    left: 50%; /* 中央 */
    transform: translateX(-50%); /* 中央寄せの微調整 */
    /* 変更: border-widthを大きくする */
    border-width: 30px 30px 0 0; /* 以前の 20px から大きく */
}

/* パターン3: 先端を右寄りにする */
#consult_us_first .balloon.tip-right:before {
    /* 変更: rightの位置も調整 */
    right: 27px; /* 以前の 17px から大きく */
    left: auto;
    /* 変更: border-widthを大きくする */
    border-width: 0 33px 33px 0; /* 以前の 0 23px 23px 0 から大きく */
    border-color: transparent #dfe1c5 transparent transparent; /* 枠線と同じ色 */
}
#consult_us_first .balloon.tip-right:after {
    /* 変更: rightの位置も調整 */
    right: 30px; /* 以前の 20px から大きく */
    left: auto; /* leftの指定をリセット (重要) */
    /* 変更: border-widthを大きくする */
    border-width: 0 30px 30px 0; /* 以前の 0 20px 20px 0 から大きく */
    border-color: transparent #ECEBD6 transparent transparent; /* 三角形の色を調整 */
}




@media screen and (max-width: 768px) {
    #consult_us_first .balloon {
        font-size: 0.75em;
    }
}


#consult_us_first h2 {
    color: var(--secondary-color);
    font-size: 1.5em;
    text-align: left !important; /* 中央揃え */
}
@media screen and (max-width: 768px) {
    #consult_us_first h2 {
	color: var(--secondary-color);
	font-size: 1.0em;
        text-align: left !important; /* 中央揃え */
    }
}

#consult_us_first img {
    width: 100%;
}

#consult_us_first .go-contact {
    /*background: var(--primary-color);*/
    background: var(--button-primary-color);
    color: var(--contrast-color);
    font-family: var(--heading-font);
    display: inline-block; /* または block; ボタンの配置方法に合わせて調整 */
    text-decoration: none; /* デフォルトの下線を削除 */
    padding: 10px 20px; /* パディング（余白） */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 5px; /* 角丸 */
    text-align: center; /* 中央揃え */
    /*align-items: center;*/
    justify-content: center;
    width: 100%;
}

#consult_us_first .go-contact i {
    font-size: 1.125em;
    margin-left: 5px;
    line-height: 0;
    transition: 0.3s;
}

#consult_us_first .go-contact .line1 {
    display: block; /* 1行目をブロック要素にする */
    font-size: 20px;
    line-height: 1.2; /* 行間 */
}

#consult_us_first .go-contact .line2 {
    display: block; /* 2行目をブロック要素にする */
    font-size: 42px;
    line-height: 1.2; /* 行間 */
}

#consult_us_first .go-contact:hover {
    /*background: rgba(var(--primary-color-rgb), 0.8);*/
    background: var(--button-hover-color);
    padding-right: 19px;
}

#consult_us_first .go-contact:hover {
    margin-left: 10px;
}

/* appeal point
------------------------------*/

/* 境界のがたがた
------------------------------*/
#appeal_point_1 .overlay-top::before,
#appeal_point_2 .overlay-bottom::after,
#appeal_point_4 .overlay-top::before,
#appeal_point_4 .overlay-bottom::after,
#contact .overlay-top::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    left: 0;
    z-index: 1;
}

/* appeal_point_1 (overlay-top) のスタイル */
/* appeal_point_1 の下部にオーバーレイ画像を配置し、appeal_point_2 と繋がるようにします。 */
.appeal_point_1.overlay-top {
    position: relative;
    overflow: hidden; /* オーバーレイが親要素からはみ出さないように */
    /* コンテンツのパディングは、その下のオーバーレイ画像と重ならないように調整 */
    padding-bottom: 100px; /* オーバーレイ画像の半分が下にはみ出るため、コンテンツはその分上にする */
}

#appeal_point_1 .overlay-top::before {
    top: -1px;
    background: url(../img/parts/overlay-top.png);
}

/* appeal_point_2 (overlay-top と overlay-bottom の両方を持つ) のスタイル */
.appeal_point_2.overlay-top.overlay-bottom {
    position: relative;
    overflow: hidden;
    /* 上下のオーバーレイ画像とコンテンツが重ならないようにパディングを調整 */
    padding-top: 100px;    /* 上のオーバーレイ画像の半分が上にはみ出るため、コンテンツはその分下にする */
    padding-bottom: 100px; /* 下のオーバーレイ画像の半分が下にはみ出るため、コンテンツはその分上にする */
}

/* appeal_point_2 の上部に表示されるオーバーレイ画像 (overlay-top.png を使用) */
/* これは、appeal_point_1 と appeal_point_2 の間の境界線を形成します。 */
.appeal_point_2.overlay-top::before {
    content: "";
    position: absolute;
    top: -25px; /* オーバーレイ画像 (高さ200pxと仮定) が親要素の上端から100pxはみ出して表示される */
    left: 0;
    width: 100%;
    height: 200px; /* `overlay-top.png` の実際の高さに合わせて調整してください */
    background-image: url(../img/parts/overlay-top-ap1.png); /* 画像のパスを正確に指定 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* 画像を上部に配置 */
    z-index: 2;
    pointer-events: none;
}

/* appeal_point_2 の下部に表示されるオーバーレイ画像 (overlay-bottom.png を使用) */
/* これは、appeal_point_2 とその後のセクションの間の境界線を形成します。 */
.appeal_point_2.overlay-bottom::after {
    content: "";
    position: absolute;
    bottom: -100px; /* オーバーレイ画像 (高さ200pxと仮定) が親要素の下端から100pxはみ出して表示される */
    left: 0;
    width: 100%;
    height: 200px; /* `overlay-bottom.png` の実際の高さに合わせて調整してください */
    z-index: 2;
    pointer-events: none;
}

#appeal_point_2 .overlay-bottom::after {
    bottom: -1px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom; /* 画像を下部に配置 */
    background: url(../img/parts/overlay-bottom.png);
}

/* スマホ版 (max-width: 768px) の調整 */
@media screen and (max-width: 768px) {
    /* オーバーレイ画像の高さがPC版と異なる場合、以下の値を調整 */
    /* 例えば、スマホ版での画像高さが150pxの場合 */
    .appeal_point_1.overlay-top::after,
    .appeal_point_2.overlay-top::before,
    .appeal_point_2.overlay-bottom::after {
        height: 150px; /* スマホ版での実際の画像高さに合わせてください */
        /* はみ出す量も半分に調整 */
    }

    .appeal_point_1.overlay-top {
        padding-bottom: 1.0em; /* スマホ版の画像高さの半分 */
    }

    .appeal_point_2.overlay-top.overlay-bottom {
        padding-top: 75px;
	スマホ版の画像高さの半分
        padding-bottom: 75px; /* スマホ版の画像高さの半分 */
    }
    .appeal_point_1.overlay-top::after {
        bottom: -75px;
    }
    .appeal_point_2.overlay-top::before {
        top: -5px;
    }
    .appeal_point_2.overlay-bottom::after {
        bottom: -75px;
    }
}

#appeal_point_4 .overlay-top::before {
    top: -1px;
    background: url(../img/parts/overlay-top.png);
}

#appeal_point_4 .overlay-bottom::after {
    bottom: -1px;
    background: url(../img/parts/overlay-bottom.png);
}

#contact .overlay-top::before {
    top: -1px;
    background: url(../img/parts/overlay-top.png);
}

#appeal_point_1 {
    margin-bottom: 0;
    padding-bottom: 0;

}

#appeal_point_1 h2 {
    color: var(--secondary-color);
    font-size: 2.75em;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-style: normal;
    font-weight: 600;
    display: inline-block;
    border-bottom: 4px dotted var(--secondary-color) ;
}

#appeal_point_1 .appeal_point_1 {
    background-color: var(--background-color-4th) ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#appeal_point_1 .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 90px 20px;
    padding: 20px;
}

#appeal_point_1 .service-box {
    /*border: 2px solid #ccc;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

#appeal_point_1 .service-box .service-icons {
    background-color: #FFFFFF ;
    max-width: 120px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--secondary-color);
    z-index: 1; /* アイコンを画像の上に表示 */
}

#appeal_point_1 .service-box .service-image {
    border: 3px solid var(--secondary-color);
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    margin-top: 0; /* アイコンとのスペースを削除 */
}

/* レスポンシブデザイン (画面幅が600px以下の場合) */
@media screen and (max-width: 768px) {
    #appeal_point_1 h2 {
	color: var(--secondary-color);
	font-size: 1.75em;
	border-bottom: 4px dotted var(--secondary-color) ;
    }

    #appeal_point_1 .grid-container {
	grid-template-columns: 1fr;
    }

}

#appeal_point_2 {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#appeal_point_2 .appeal_point_2 {
    background-color: var(--background-color-2nd) ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#appeal_point_2 h2 {
    color: #ffffff;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75em;
}

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

@media screen and (max-width: 768px) {
    #appeal_point_2 h2 {
	color: #ffffff;
	font-size: 1.75em;
    }

}
/* 「LINKが選ばれる理由」のスタイル */
.appeal_point_2 {
    display: flex; /* Flexboxを有効にする */
    flex-direction: column; /* 子要素を縦方向に並べる */
    align-items: center; /* 子要素を主軸（縦方向）に対して中央に揃える */
    min-height: 100vh; /* ビューポートの高さ全体を使う（縦方向の中央寄せのため） */
    margin: 0; /* bodyのデフォルトマージンをリセット */
    gap: 40px; /* 各カード間のスペース */
    padding: 20px;
    background-color: #f0f0f0;

}

#appeal_point_2 .card-container {
    position: relative;
    width: 100%; /* カードの幅 */
    border-radius: 15px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding-top: 75px; /* 番号の半分（25px）より少し多めに設定 */
    padding-left: 0;
    padding-right: 0;
    border: 3px solid #006400; /* 濃い緑 */
}

#appeal_point_2 .card-number {
    position: absolute;
    top: -50px; /* 丸の高さの半分（50px / 2 = 25px）に設定すると、丸の中心がpadding-topの開始位置に来る */
    left: 50%;
    transform: translateX(-50%);
    /* 変更: 背景色を白、枠の色を濃い緑、数字の色を濃い緑に */
    background-color: #ffffff; /* 白 */
    color: #006400; /* 濃い緑 */
    border-radius: 50%;
    width: 100px; /* 番号の丸のサイズ */
    height: 100px; /* 番号の丸のサイズ */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-weight: bold;
    z-index: 10; /* 他の要素より手前に表示 */
    border: 3px solid #006400; /* 濃い緑 */
}

#appeal_point_2 .title-area {
    flex: 1; /* 縦幅の割合 1 */
    background-color: #006400; /* 濃い緑色 */
    color: white; /* 文字色を白に */
    border: 1px solid #004d00; /* 細い枠線 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 変更: 左右のpaddingを0にし、margin-left/rightで幅を調整 */
    padding: 10px 0; /* 上下10px、左右0 */
    /* 新規追加: 写真と同じ左右のマージンを設定 */
    margin: 0 10%; /* 上下0、左右10% */
    /* 新規追加: 写真との間にマージンを追加 */
    margin-bottom: 1.5em; /* 例: 20px のマージン */

    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5em;
    text-align: center;
    box-sizing: border-box; /* borderとpaddingを含めて幅を計算 */
}
/* 新規追加: 写真本体の枠と角丸を設定するクラス */
#appeal_point_2 .image-frame {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 角丸に合わせて画像をクリッピング */
    border: 3px solid #006400; /* 濃い緑色の枠線 */
    border-radius: 10px; /* 角丸 */
    display: flex; /* imgを中央に配置するため */
    justify-content: center;
    align-items: center;
}

#appeal_point_2 .image-area {
    flex: 7; /* 縦幅の割合 7 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 画像自体ははみ出さないように */
    /* 変更: 背景色を白に変更 */
    background-color: #ffffff; /* 白 */
    padding: 0 10%; /* 左右に10%のマージン */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

#appeal_point_2 .image-area img {
    width: 100%; /* 親要素（paddingを含むimage-area）の100% */
    height: 100%;
    object-fit: cover; /* 画像をエリアに合わせてトリミング */
    display: block;
}

#appeal_point_2 .text-area {
    flex: 2; /* 縦幅の割合 2 */
    /* 変更: 左右のpaddingを0にし、margin-left/rightで幅を調整 */
    padding: 15px 0; /* 上下15px、左右0 */
    margin: 0 10%; /* 上下0、左右10% */
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.0em;
    line-height: 1.4;
    text-align: left;
    overflow: auto; /* テキストが長い場合にスクロール可能に */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* 必要に応じてカルーセルの表示を調整 */
#appeal_point_3 {
    background-color: #ffffff;
    margin-top: 90px;
    padding-top: 0;
    padding-bottom: 90px;
    text-align: center;
}
@media screen and (max-width: 768px) {

    #appeal_point_3 {
	padding-bottom: 0;
    }
}
#appeal_point_3 .appeal_point_3 {
    background-color: var(--background-color-3rd) ;
    color: #ffffff;
}

#appeal_point_3 h2 {
    color: #ffffff;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75em;
    display: inline-block;
    border-bottom: 4px dotted #ffffff ;
}

#appeal_point_3 img {
    border: 10px solid #ffffff;
}


#appeal_point_3 .carousel-item h5 {
    padding-top: 1em;
    color: #ffffff;
}

#appeal_point_3 .carousel-control-prev-icon,
#appeal_point_3 .carousel-control-next-icon {
    background-color: #FF7F50; /* オレンジ色 */
    border-radius: 0.5rem;
    width: 40px;
    height: 40px;
}

#appeal_point_3 .carousel-caption {
    background-color: rgba(0, 0, 0, 0.7);
    padding-bottom: 10px;
    padding-top: 10px;
}

#appeal_point_3 .row {
    position: relative;
}

#appeal_point_3 .row > #appeal_point_3 div {
    position: relative;
    overflow: visible; /* 子要素がはみ出しても表示する */
}

#appeal_point_3 .row > #appeal_point_3 div > #appeal_point_3 h5 {
    background-color: #ffffff;
    border: 4px solid green ! important;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: -10%; /* 上方向にずらす */
    transform: translateX(-50%); /* 水平方向の中央揃え */
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    z-index: 10; /* 写真よりも手前に表示する（必要に応じて） */
}

@media screen and (max-width: 768px) {
    #appeal_point_3 h2 {
	/*color: #ffffff;*/
	font-size: 1.75em;
    }

}

#appeal_point_4 {
    margin-bottom: 0;
    padding-bottom: 0;
}

#appeal_point_4 .appeal_point_4 {
    /*background-color: #ECEBD6 ;*/
    background-color: var(--background-color-4th) ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#appeal_point_4 h2 {
    color: var(--secondary-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75em;
    display: inline-block;
    border-bottom: 4px dotted var(--secondary-color) ;
}

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

#appeal_point_4 .plan-container {
    /* Flexboxレイアウトを使用 */
    display: flex;
    justify-content: space-around; /* 要素間に均等なスペースを配置 */
}
@media screen and (max-width: 768px) {
    #appeal_point_4 .plan-container {
	display: initial;
	/* Flexboxレイアウトを使用 */
	justify-content: space-around; /* 要素間に均等なスペースを配置 */
    }
}
#appeal_point_4 .grass-cutting-plan {
    background-color: #388e3c;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 4px;
    text-align: center;
    /*width: 300px;  幅を固定（必要に応じて調整） */
    /*width: 33%;*/
    width: 95%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin: 10px; /* 各プラン間の余白 */
}

@media screen and (max-width: 768px) {
    #appeal_point_4 .grass-cutting-plan {
	background-color: #388e3c;
	color: #fff;
	border-radius: 10px;
	padding: 20px;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 4px;
	text-align: center;
	width: 100%;
	/*幅を固定（必要に応じて調整）*/
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	margin: 10px; /* 各プラン間の余白 */
    }
}

#appeal_point_4 .plan-title {
    color: #fff;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5em;
    margin-bottom: 10px;
}

#appeal_point_4 .price-container {
    color: var(--default-color);
    background-color: var(--background-color);
    /*margin-bottom: 15px;*/
}

#appeal_point_4 .unit-price {
    /*color: var(--primary-color) ;*/
    color: var(--secondary-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5em;
    padding-top: 20px;
    margin-bottom: 0;
}

#appeal_point_4 .price {
    color: var(--secondary-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2em;
    margin-bottom: 0;
}

#appeal_point_4 .tax-included {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.85em;
    margin-bottom: 0;
}

#appeal_point_4 .notes {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.75em;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    /*margin-top: 10px;*/
    text-align: center;
    border-top-left-radius: 0; /* 左上の角を丸めない */
    border-top-right-radius: 0; /* 右上の角を丸めない */
    border-bottom-left-radius: 10px; /* 左下の角を丸める */
    border-bottom-right-radius: 10px; /* 右下の角を丸める */
}

#appeal_point_4 .note {
    margin-bottom: 3px;
}

#appeal_point_4 .support-area-banner {
    background-color: var(--background-color-4th) ;
    border: 4px solid var(--primary-color); /* 濃い緑色の枠線 */
    padding: 20px;
    text-align: center;
}

#appeal_point_4 .support-area-title {
    background-color: var(--primary-color);
    color: white;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5em;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
    position: relative; /* 位置調整を有効にする */
    top: -50px; /* 上方向に30px移動 */
}

#appeal_point_4 .support-area-list {
    list-style: none;
    padding: 0;
    margin-bottom: 10px;
}

#appeal_point_4 .support-area-item {
    display: inline-block;
    margin: 0 15px;
    color: var(--secondary-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5em;
}

#appeal_point_4 .support-area-item::before {
    content: "📍"; /* ピンの絵文字 */
    margin-right: 5px;
}

#appeal_point_4 .support-area-message {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.2em;
    color: #555; /* やや薄い灰色 */
}

@media screen and (max-width: 768px) {
    #appeal_point_4 .support-area-banner {
	background-color: var(--background-color-4th) ;
	border: 4px solid var(--primary-color); /* 濃い緑色の枠線 */
	padding: 20px;
	text-align: left;
    }

    #appeal_point_4 .support-area-message {
	text-align: center ! important;
    }

    #appeal_point_4 h2 {
	/*color: #ffffff;*/
	font-size: 1.75em;
    }

}


/*--------------------------------------------------------------
# flow
--------------------------------------------------------------*/
#flows .flows {
    padding-top: 10px;
    background-color: var(--background-color-2nd) ;

}
#flows .flows h2 {
    color: #ffffff;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75em;
    /*display: inline-block;*/
    /*border-bottom: 4px dotted var(--secondary-color) ;*/
}

@media screen and (max-width: 768px) {
    #flows .flows h2 {
	/*color: #ffffff;*/
	font-size: 1.75em;
    }

}

#flows .flows .flow-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#flows .flows .flow-steps {
    padding-left: 0;
}

#flows .flows .flow-steps > li {
    list-style-type: none;
    position: relative;
    padding-left: 50px;
}

#flows .flows .flow-steps > li:not(:last-child) {
    padding-bottom: 10px;
}

#flows .flows .flow-steps > li .step-title {
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 100vh;
    display: inline-block;
    background: var(--background-color-4th);
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
}

#flows .flows .flow-steps > li:not(:last-child)::before {
    content: '';
    background: #ffffff;
    width: 4px;
    height: 100%;
    position: absolute;
    top: calc(50% - -30px);
    left: 19px;
    left: calc(2em - 2px); /* 円の中央に配置 */
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#flows .flows .flow-steps > li dl dt {
    /*font-size: 1.3em;*/
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.0em;
    /*color: #ffffff ;*/
    color: var(--secondary-color);
    background-color: #ffffff ;
    padding-left: 1.0em;
    margin-left: 1.0em ;
}

#flows .flows .flow-steps > li dl dd {
    /*margin-left: 0;*/
}

#flows .flows .step-description {
    color: #ffffff ;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-left: 1.5em;
    padding-top: 1.0em;
    margin-left: 0.8em;
}

@media screen and (max-width: 768px) {
    #flows .flows .flow-steps > li .step-title {
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
    }

    #flows .flows .flow-steps > li:not(:last-child)::before {
	content: '';
	background: #ffffff;
	width: 3px;
	height: 100%;
	position: absolute;
	top: calc(50% - -30px);
	left: 19px;
	left: calc(1.5em - 8px); /* 円の中央に配置 */
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
    }


    #flows .flows .flow-steps > li dl dt {
	/*color: #ffffff;*/
	font-size: 1.5em;
        padding-left: 0.5em;
        margin-left: 0 ;
    }

    #flows .flows .step-description {
        padding-left: 0.75em;
        margin-left: 0;
    }
}

/* Faq Section - Home Page
------------------------------*/
#faq .faq {
    padding-top: 10px;
    background-color: var(--background-color) ;

}

#faq .faq-heading {
    display: flex; /* 要素を横並びにする */
    align-items: center; /* 縦方向中央揃え */
    justify-content: center; /* 横方向中央揃え */
    text-align: center;
    margin: 20px 0; /* 上下の余白（調整可能） */
}

#faq .heading-leaf {
    width: auto; /* 画像の本来の幅を維持 */
    height: 130px; /* 画像の高さを指定（調整可能） */
}
@media screen and (max-width: 768px) {
    #faq .heading-leaf {
	width: auto; /* 画像の本来の幅を維持 */
	height: 30px; /* 画像の高さを指定（調整可能） */
    }
}

#faq .heading-leaf-left {
    margin-right: 10px; /* テキストとの間隔（調整可能） */
    /*width: 100%;*/
}

#faq .heading-leaf-right {
    margin-left: 10px; /* テキストとの間隔（調整可能） */
    /*width: 100%;*/
}

#faq .heading-text {
    color: #2e8b57; /* 「よくある質問」の文字色（添付画像に近い緑色） */
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.0em; /* 文字サイズ（調整可能） */
    margin: 0; /* デフォルトのマージンをリセット */
}

.faq .content h3 {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 34px;
}

.faq .content p {
    font-size: 15px;
    color: rgba(var(--default-color-rgb), 0.7);
}

.faq .faq-container .faq-item {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 5px 25px 0px rgba(var(--default-color-rgb), 0.1);
    overflow: hidden;

    background-color: var(--secondary-color);
}

.faq .faq-container .faq-item:last-child {
    margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
    color: #ffffff ;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.125em;
    line-height: 24px;
    margin: 0 30px 0 0;
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
    /*color: var(--primary-color);*/
    /*color: var(--primary-color);*/
    color: #ffffff;
    padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
    color: #ffffff;
}

.faq .faq-container .faq-item .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 0;
    overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
    color: #ffffff;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    line-height: 0;
    transition: 0.3s;
    cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
    color: var(--primary-color);
}

.faq .faq-container .faq-active h3 {
    color: #ffffff;
}

.faq .faq-container .faq-active .faq-content {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    padding-top: 10px;
    color: #ffffff;
    background-color: var(--secondary-color);
}

.faq .faq-container .faq-active .faq-toggle {
    transform: rotate(90deg);
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    #faq .heading-text {
        font-size: 1.75em; /* 文字サイズ（調整可能） */
    }
}

/* Contact Section - Home Page
------------------------------*/
#contact {
    padding-bottom: 0;

}

#contact .contact {
    /*background-color: #ECEBD6 ;*/
    background-color: var(--background-color-4th) ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#contact h2 {
    color: var(--secondary-color);
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75em;
    display: inline-block;
    border-bottom: 4px dotted var(--secondary-color) ;
}

#contact .contact .php-email-form h2 {
    color: var(--secondary-color);
    font-size: 2.0em;
    display: inline-block;
    padding-top: 12px ;
    border-top: 2px solid var(--secondary-color) ;
    border-bottom: none;

}

#contact .contact .php-email-form .form-label {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
}
#contact .contact .php-email-form .required::after {
    content: " *";
    color: red;
}
#contact .contact .php-email-form .form-check-group {
    display: flex;
    flex-wrap: wrap;
}
#contact .contact .php-email-form .form-check {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}
#contact .contact .php-email-form {
    background: rgba(var(--default-color-rgb), 0.03);
    padding: 30px;
    height: 100%;
}

#contact .contact .php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

#contact .contact .php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

#contact .contact .php-email-form .loading {
    display: none;
    background: var(--background-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

#contact .contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--primary-color);
    border-top-color: var(--background-color);
    animation: animate-loading 1s linear infinite;
}

#contact .contact .php-email-form input[type=text],
#contact .contact .php-email-form input[type=tel],
#contact .contact .php-email-form input[type=email],
#contact .contact .php-email-form textarea {
    font-size: 0.875em;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: rgba(var(--background-color-rgb), 0.5);
    border-color: rgba(var(--default-color-rgb), 0.2);
}

#contact .contact .php-email-form input[type=text]:focus,
#contact .contact .php-email-form input[type=tel]:focus,
#contact .contact .php-email-form input[type=email]:focus,
#contact .contact .php-email-form textarea:focus {
    border-color: var(--primary-color);
}

#contact .contact .php-email-form input[type=text]::-moz-placeholder,
#contact .contact .php-email-form input[type=tel]::-moz-placeholder,
#contact .contact .php-email-form input[type=email]::-moz-placeholder,
#contact .contact .php-email-form textarea::-moz-placeholder {
    color: rgba(var(--default-color-rgb), 0.3);
}

#contact .contact .php-email-form input[type=text]::placeholder,
#contact .contact .php-email-form input[type=tel]::placeholder,
#contact .contact .php-email-form input[type=email]::placeholder,
#contact .contact .php-email-form textarea::placeholder {
    color: rgba(var(--default-color-rgb), 0.3);
}

#contact .contact .php-email-form button[type=submit] {
    color: var(--button-text-color);
    background: var(--button-primary-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 4px;
}

#contact .contact .php-email-form button[type=submit]:hover {
    color: var(--button-text-color);
    background: var(--button-hover-color);
}

@media screen and (max-width: 768px) {
    #contact h2 {
        font-size: 1.75em; /* 文字サイズ（調整可能） */
    }
    #contact .contact .php-email-form h2 {
        font-size: 1.75em; /* 文字サイズ（調整可能） */
    }
}

@keyframes animate-loading {
    0% {
	transform: rotate(0deg);
    }

    100% {
	transform: rotate(360deg);
    }
}

#cream_back {
    background-color: var(--background-color-4th) ;

}

/*--------------------------------------------------------------
# profile Page
--------------------------------------------------------------*/
/* profile Section - profile Page
------------------------------*/
.profile .posts-list article {
    box-shadow: 0 4px 16px rgba(var(--default-color-rgb), 0.1);
    padding: 30px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.profile .posts-list .post-img {
    max-height: 240px;
    margin: -30px -30px 15px -30px;
    overflow: hidden;
}

.profile .posts-list .profile-sentence {
    font-size: 22px;
    font-weight: 700;
    padding: 0;
    margin: 0 0 20px 0;

}

.profile .posts-list .title {
    font-size: 16px;
    /*color: rgba(var(--default-color-rgb), 0.6);*/
    color: var(--secondary-color);
    margin-bottom: 10px;
}

/* Contact Section - Home Page
------------------------------*/
#banners {
    padding-bottom: 0;
    background-color: var(--background-color-4th) ;

}

#banners .banners {
    /*background-color: #ECEBD6 ;*/
    background-color: var(--background-color-4th) ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}