@charset "utf-8";
/* ==========================================================================
   Base Style
   ========================================================================== */
body {
    background: url(../../img/imgMain.jpg) center/cover no-repeat fixed;
}
body.contact  {
     background:none; 
}

/* ==========================================================================
   Main Visual
   ========================================================================== */
#mainImg {
    height: 700px;
    padding-top: 250px;
}

#mainImg p {
    color: #000;
    font-size: 60px;
    font-weight: 500;
    font-family: "游明朝", "Yu Mincho", YuMincho, "Sawarabi Mincho";
    letter-spacing: 0.1em;
    line-height: 1.8em;
    text-align: center;
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 1), 
        0 0 3px rgba(255, 255, 255, 1), 
        0 0 5px rgba(255, 255, 255, 1), 
        0 0 7px rgba(255, 255, 255, 1), 
        0 0 10px rgba(255, 255, 255, 1);
}

#mainImg p#mainCopy {
    margin-bottom: 60px;
}

#mainImg p#mainCopy span {
    letter-spacing: -0.3em;
}

#mainImg p#readCopy {
    font-size: 24px;
}

/* 1300pxの幅の中で文字を左側に配置するための枠 */
.header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

/* ==========================================================================
   Common Article Style
   ========================================================================== */
article h2 span.main {
    display: block;
    color: #000;
    font-size: 60px;
    letter-spacing: 0.1em;
	transform: translateX(-500px);
    width: 500px;
    position: absolute;
    left: 50%;
	top: 35%;
}

article h2 span.sub {
    display: block;
    color: #007f33;
    font-size: 24px;
    letter-spacing: 0.3em;
	transform: translateX(-500px);
    width: 500px;
    position: absolute;
    left: 50%;
	top: 60%;
}
article#subpage h1 span.main {
    display: block;
    color: #000;
    font-size: 60px;
    letter-spacing: 0.1em;
	transform: translateX(-500px);
    width: 500px;
    position: absolute;
    left: 50%;
	top: 35%;
}

article#subpage h1 span.sub {
    display: block;
    color: #007f33;
    font-size: 24px;
    letter-spacing: 0.3em;
	transform: translateX(-500px);
    width: 500px;
    position: absolute;
    left: 50%;
	top: 60%;
}


/* ==========================================================================
   News Section
   ========================================================================== */
#newsArea {
    max-width: 1000px;
    margin: 80px auto 30px auto;
    
}

#newsArea h2 {
    display: block;
    float: left;
    width: 200px;
    padding: 70px 0;
    font-size: 34px;
    letter-spacing: 0.05em;
    text-align: center;
	background: #def8d6;
}

#newsArea dl {
    display: block;
    float: right;
    width: 800px;
    padding: 0 0 0 40px;
    background: #ffffff;
}

#newsArea dl dt {
    display: block;
    float: left;
    clear: both;
    width: 190px;
    padding: 20px;
    border-top: 1px dotted #777777;
    line-height: 1.2em;
}

#newsArea dl dd {
    display: block;
    float: right;
    width: 570px;
    padding: 20px;
    border-top: 1px dotted #777777;
    line-height: 1.2em;
}

#newsArea a {
    cursor: pointer;
}

#newsArea dl .news-item {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* 初期の状態（4番目以降を最初から隠しておく設定） */
#newsArea dl .news-item.is-hidden {
    visibility: hidden;
    opacity: 0;
    max-width: 100%;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}

.news_btn {
    position: relative;
    display: block;
    width: 142px;
    height: 40px;
    margin: auto;
    color: #579e49;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
    border: solid 1px #579e49;
    border-radius: 100vh;
}


.pdf{
    position: relative;
    display: inline-block;
    padding-right: 30px;
}
.pdf::after {
	content: "";
    position: absolute;
    top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
    background: url("../../img/pdf.png") no-repeat;
}

/* ==========================================================================
   Service Section
   ========================================================================== */
#service h3 {
    color: #007f33;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    text-align: left;
    margin: 25px 0;
    transition: color 0.3s ease;
}

#service h3::after {
    display: none;
}

#service h3 img {
    width: 100%;
    height: auto;
}

#service h3 span {
    position: absolute;
    top: 108px;
    display: block;
    width: 375px;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding: 12px 5px;
    background-color: rgba(255, 218, 0, 0.8);
    text-shadow: 0 0 5px #def8d6;
}

#service .tBox p.s_txt {
    line-height: 1.6em;
    margin-bottom: 0.5em;
}

#service .service-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

#service .service-item {
    display: flex;
    flex-direction: column;
    width: 43%;
    margin-bottom: 60px;
}

#service .service-item a {
    display: flex;
    flex-direction: column; 
    flex: 1; 
    text-decoration: none;
    color: inherit;
}

#service .service-img {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

#service .service-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; 
}

#service .service-desc-box {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 15px; 
    margin-top: auto; 
}

#service .service-desc-box p {
    flex: 1; 
    line-height: 1.6em;
    margin: 0;
}

/* 緑の丸い矢印ボタン */
#service .arrow-btn {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: #579e49; 
    border-radius: 50%; 
    cursor: pointer;
    transition: background-color 0.3s ease; 
}

#service .arrow-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 30%; 
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff; 
    border-right: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

#service .service-item a:hover .service-img img {
    transform: scale(1.05);
}

#service .service-item a:hover h3,#service .service-item a:hover .arrow-btn {
    color: #3f7b36; 
}

/* ご利用の流れ誘導帯 */
#service .service-cta {
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #def8d6;
    padding: 25px 0;
}

#service .service-cta p {
    font-size: 16px;
}

/* ご利用の流れボタン（カプセル型） */
.cta-btn {
    position: relative;
    display: inline-block;
    width: 190px;
    height: 60px;
    margin: auto;
    color: #ffffff;
    font-size: 18px;
    line-height: 3.3em;
	font-weight: bold;
    text-align: center;
	text-decoration: none;
    background: #579e49;
    border-radius: 100vh;
    transition: background-color 0.2s ease;
}

.cta-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

/* ボタン共通ホバー設定 */
#service .arrow-btn:hover,
.cta-btn:hover,
#footer-contact .contact-form-btn:hover,.privacy-block .contact-form-btn:hover {
    background-color: #3f7b36; 
    opacity: 1;
}

/* ==========================================================================
   Footer Contact Area
   ========================================================================== */
#footer-contact {
    position: relative;
    overflow: hidden;
    background-color: #ffffff; 
    background-image: url('../../img/footer-tree.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 85% auto; 
    text-align: center;
}

#footer-contact::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1; 
    width: 100%;
    height: 28px; 
    background-color: #93b057; 
}

#footer-contact .contact-lead {
    font-size: 20px;
    line-height: 1.8em;
    margin-bottom: 35px;
}

#footer-contact .contact-info {
    display: flex;
    align-items: center;      
    justify-content: center;  
    gap: 115px;                
    margin-bottom: 40px;
}

#footer-contact .contact-tel {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

#footer-contact .contact-form-btn,.privacy-block .contact-form-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 54px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #55a049;
    border-radius: 100vh;    
    transition: background-color 0.2s ease;
}

#footer-contact .contact-form-btn img,.privacy-block .contact-form-btn img {
    margin-right: 14px;
}

#footer-contact .contact-time {
    line-height: 1.8;
    padding-bottom: 55px;
}

/* ==========================================================================
   Google Map Embed
   ========================================================================== */
.map-embed {
    position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	height: 400px;
    overflow: hidden;
}

.map-embed > div,
.map-embed > div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
	object-fit: cover;
}

/* ==========================================================================
   Responsive (Tablet & Mobile Common)
   ========================================================================== */

@media screen and (max-width: 1310px) {
    #top #about .about-header,
    #top #service .service-header,.flow-header  {
        position: relative;
    }


    #top #about .about-header::before, #top #service .service-header::before,
    #top #about .about-header::after, #top #service .service-header::after {
        position: absolute;
    }

    #top #about .about-header::before, 
    #top #service .service-header::before {
        z-index: 1;
    }

    #top #about .about-header::after, 
    #top #service .service-header::after {
        z-index: 2;
    }

    #top #about .about-header .header-inner,
    #top #service .service-header .header-inner {
        z-index: 3;
    }
	#service .service-list {
    justify-content: space-around;
}
}

@media screen and (max-width: 1200px) {
	.header-inner {
    padding: 0 20px;
}
	#footer-contact {
    background-size: 140% auto;
		background-position: center 94%;
}
}
@media screen and (max-width: 1050px) {
    body {
        background: none;
    }
    body::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 500px;
        background: url(../../img/imgMain.jpg) center center no-repeat;
        background-size: 150%;
    } 
	body::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 500px;
        background: url(../../img/imgMain.jpg) center center no-repeat;
        background-size: 150%;
    }
	body.contact::before {
        background: #fff;
    }
    #mainImg {
        height: 500px;
        padding-top: 150px;
    }
    #mainImg p {
        font-size: 36px;
    }
    #mainImg p#mainCopy {
        margin-bottom: 20px;
    }
    #mainImg p#readCopy {
        font-size: 22px;
        line-height: 1.5em;
    }
    #mainImg p#readCopy span {
        display: block;
        text-align: center;
    }
    #newsArea {
        background: #ffffff;
        margin: 30px 0;
        width: 100%;
    }
    #newsArea h2 {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 0;
        font-size: 26px;
        letter-spacing: 0.05em;
        text-align: left;
		background: none;
    }
    #newsArea h2::before {
        content: "";
        display: block;
        float: left;
        width: 20px;
        height: 10px;
        margin: 0.3em 15px 0 0;
        background: #def8d6;
    }
    #newsArea dl {
        float: none;
        width: 100%;
        padding: 0;
    }
    #newsArea dl:after {
        border-bottom: none;
    }
    #newsArea dl dt {
        float: left;
        border-top: none;
        width: 25%;
        margin: 0 0 20px 10px;
        padding: 0;
    }
    #newsArea dl dd {
        float: right;
        border-top: none;
        width: 70%;
        margin: 0 0 20px 0;
        padding: 0;
    }
	#newsArea dl .news-item {
    padding-top: 5px;
}
    article h2 {
        height: 120px;
    }
    article h2 span.main {
        display: block;
        font-size: 40px;
        letter-spacing: 0.1em;
        text-align: center;
		position: static;
        width: auto;
        transform: none;
    }
    article h2 span.sub {
        display: block;
        color: #007f33;
        font-size: 16px;
        letter-spacing: 0.3em;
        text-align: center;
        padding: 18px 0 0 0;
		position: static;
        width: auto;
        transform: none;
    }
    article#subpage h1 span.main {
        display: block;
        font-size: 40px;
        letter-spacing: 0.1em;
        text-align: center;
		position: static;
        width: auto;
        transform: none;
    }
    article#subpage h1 span.sub {
        display: block;
        color: #007f33;
        font-size: 16px;
        letter-spacing: 0.3em;
        text-align: center;
        padding: 18px 0 0 0;
		position: static;
        width: auto;
        transform: none;
    }
    article h3 {
        font-size: 20px;
        margin: 20px 0 30px 0;
    }
    article h3:after {
        margin: 20px auto;
    }
	
	    #top #about .map-embed,
    #top #service .map-embed {
        max-width: 100%;
        padding-bottom: 56.25%; 
    }
	
    #service h3 {
        display: block;
        float: none;
        width: 100%;
        height: auto;
        overflow: hidden;
        margin-bottom: 1em;
    }
    #service h3 img {
        width: 100%;
        height: auto;
    }
    #service h3 span {
        top: 45%;
        width: 100%;
        font-size: 24px;
        padding: 20px 0;
    }
    #service section {
        width: 100%;
        padding: 1.5em 0;
    }
    #service section:after {
        content: "";
        display: block;
        clear: both;
    }
    #service section p {
        float: none;
        width: 100%;
        display: block;
    }
		#service .service-list {
    display: block;
}
	#service .service-item {
    width: 100%;
}
#service .service-img {
    width: 100%;
	height: auto;
    margin: 0 auto;
}
	#top #service .service-img img{
		object-fit: contain;
	}
	
.header-inner {
        position: static;
    width: 100%;
    max-width: 100%;
    }
}

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


	article h2 span.main{
		padding: 0;
	}
	article h2 span.main{
		padding: 0;
	}
	article#subpage h1 span.main{
		padding: 0;
	}
	article#subpage h1 span.main{
		padding: 0;
	}
    #top #about .about-header,
    #top #service .service-header,.flow-header {
        height: 290px; 
        display: block;
        position: relative;
        background-color: #ffffff;
        overflow: hidden;
    }

    #top #about .about-header::before, #top #service .service-header::before,.flow-header::before,
    #top #about .about-header::after, #top #service .service-header::after,
	.flow-header::after {
        position: absolute;
        top: 0;
        height: 200px;   
	}
    #top #about .about-header::before, 
    #top #service .service-header::before,
	.flow-header::before {
        content: "";
        left: 20px; 
        width: calc(100% - 20px);
        background-color: #def8d6;
        clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%);
        z-index: 1;
        margin: 0; 
    }

    #top #about .about-header::after, 
    #top #service .service-header::after, 
    .flow-header::after {
        content: "";
        left: 40px; 
        width: calc(100% - 40px);
        clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%);
        z-index: 2; 
        margin: 0;
    }
    #top #about .about-header .header-inner,
    #top #service .service-header .header-inner,
	.flow-header .header-inner{
        position: absolute;
        top: 200px; 
        left: 0;
        width: 100%;
        height: 120px;
        padding: 25px 20px;
        text-align: center;
        box-sizing: border-box;
        z-index: 3;
    }
    #top #about .about-header .header-inner .main,
    #top #service .service-header .header-inner .main,
    .flow-header .header-inner .main {
        display: block;
        font-size: 34px;
    }

    #top #about .about-header .header-inner .sub,
    #top #service .service-header .header-inner .sub,
    .flow-header .header-inner .sub {
        display: block;
        font-size: 16px;
    }
	#footer-contact .contact-lead {
    font-size: 16px;
}
	#footer-contact .contact-tel {
    font-size: 26px;
}
	#footer-contact .contact-info {
    gap: 20px;
		flex-direction: column;
}

}

/* ==========================================================================
   Responsive (Smartphone Only)
   ========================================================================== */
@media screen and (max-width: 639px) {
    body::before {
        height: 400px;
        background-size: 205%;
    }
    #mainImg {
        height: 400px;
        padding-top: 150px;
    }
    #mainImg p {
        font-size: 22px;
    }
    #mainImg p#mainCopy {
        margin-bottom: 15px;
    }
    #mainImg p#readCopy {
        font-size: 14px;
    }
    #newsArea dl dt {
        float: none;
        border-top: none;
        width: 100%;
        margin-bottom: 10px;
        margin-left: 10px;
        padding: 0;
    }
    #newsArea dl dd {
        float: none;
        border-top: none;
        width: 100%;
        margin-bottom: 30px;
        margin-left: 10px;
        padding: 0;
		line-height: 1.5em;
    }
	#service h3 {
    font-size: 20px;
}
    #service h3 span {
        top: 40%;
        font-size: 20px;
        padding: 10px 0;
    }
    #service p.hTxt {
        font-size: 18px;
    }
    .map-embed {
        padding: 0 0 320px 0;
    }
}
@media screen and (max-width: 450px) {
    #footer-contact .contact-time {
    padding-bottom: 85px;
}
}